nodejs实现简单聊天室2

server.js

var http = require('http');
var express = require('express');
var sio = require('socket.io');
var app = express();
app.use(express.static(__dirname + '/'));
var server = http.createServer(app);
app.get('/', function(req, res) {
    res.sendFile(__dirname + '/chat.html');
});
server.listen(3000, '127.0.0.1', function() {
    console.log('开始监听......');
});
var io = sio.listen(server);
var names = [];
io.sockets.on('connection', function(socket) {
    socket.on('login', function(name) {
        for (var i = 0; i < names.length; i++) {
            if (names[i] == name) {
                socket.emit('duplicate');
                return;
            }
        }
        names.push(name);
        io.sockets.emit('login', name);
        io.sockets.emit('sendClients', names);
    });
    socket.on('chat', function(data) {
        io.sockets.emit('chat', data);
    });
    socket.on('logout', function(name) {
        for (var i = 0; i < names.length; i++) {
            if (names[i] == name) {
                names.splice(i, 1);
                break;
            }
        }
        socket.broadcast.emit('logout', name);
        io.sockets.emit('sendClients', names);
    });
});

chat.js

var userName;
var socket;
var tbxUsername;
var tbxMsg;
var divChat;
function window_onload() {
    //alert('hello');
    divChat = document.getElementById("divchat");
    tbxUsername = document.getElementById('tbxUsername');
    tbxMsg = document.getElementById('tbxMsg');
    tbxUsername.focus();
    tbxUsername.select();
}
function addMsg(msg) {
    divChat.innerHTML += msg + '<br>';
    if (divChat.scrollHeight > divChat.clientHeight) {
        divChat.scrollTop = divChat.scrollHeight - divChat.clientHeight;
    }
}
function btnLogin_onclick() {
    alert('login');
    if (tbxUsername.value.trim() == '') {
        alert('请输入用户名');
        return;
    }
    userName = tbxUsername.value.trim();
    socket = io.connect();
    socket.on('connect', function() {
        addMsg('与服务器建立连接');
        socket.on('login', function(name) {
            addMsg('欢迎用户' + name + '进入聊天室');
        });
        socket.on('sendClients', function(names) {
            var divRight = document.getElementById('divRight');
            var str = '';
            names.forEach(function(name) {
                str += name + '<br>';
            });
            divRight.innerHTML = '用户列表<br>';
            divRight.innerHTML += str;
        });
        socket.on('chat', function(data) {
            addMsg(data.user + '说: ' + data.msg);
        });
        socket.on('disconnect', function() {
            addMsg('与服务器的连接断开');
            document.getElementById('btnSend').disabled = true;
            document.getElementById('btnLogout').disabled = true;
            document.getElementById('btnLogin').disabled = '';
            var divRight = document.getElementById('divRight');
            divRight.innerHTML = '用户列表';
        });
        socket.on('logout', function(name) {
            addMsg('用户' + name + '已退出聊天室');
        });
        socket.on('duplicate', function() {
            alert('该用户名已经被使用');
            document.getElementById('btnSend').disabled = true;
            document.getElementById('btnLogout').disabled = true;
            document.getElementById('btnLogin').disabled = '';
        });
    });
    socket.on('error', function(err) {
        socket.disconnect();
        socket.removeAllListeners('connect');
        io.sockets = {};
    });
    socket.emit('login', userName);
    document.getElementById('btnSend').disabled = '';
    document.getElementById('btnLogout').disabled = '';
    document.getElementById('btnLogin').disabled = true;
}
function btnSend_onclick() {
    alert('send');
    var msg = tbxMsg.value;
    if (msg.length > 0) {
        socket.emit('chat', {user: userName, msg: msg});
        tbxMsg.value = '';
    }
}
function btnLogout_onclick() {
    socket.emit('logout', userName);
    socket.disconnect();
    socket.removeAllListeners('connect');
    io.sockets = {};
    addMsg('用户' + userName + '退出聊天室');
    var divRight = document.getElementById('divRight');
    divRight.innerHTML = '用户列表';
    document.getElementById('btnSend').disabled = 'disabled';
    document.getElementById('btnLogout').disabled = 'disabled';
    document.getElementById('btnLogin').disabled = '';
}

chat.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>socket.io聊天室</title>
<link rel="stylesheet" href="chat.css" />
<script type="text/javascript" src="socket.io.js"></script>
<script type="text/javascript" src="chat.js"></script>
</head>
<body onload="window_onload()">
<h1>聊天室</h1>
<div id="divContainer1">
    <table class="tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%">
        <tr class="trDlg">
            <td class="tdDlg" width="5">
                用户名:&nbsp;
                <input id="tbxUsername" type="text" value="游客" size="20" />
                <input id="btnLogin" type="button" value="登录" onclick="btnLogin_onclick();" />
                <input type="button" value="test" onclick="alert('test');" />
                <input id="btnLogout" type="button" value="退出" disabled onclick="btnLogout_onclick();" />
            </td>
        </tr>
    </table>
</div>
<div id="divLeft">
    <div id="divchat"></div>
    <div id="divContainer3">
        <table class="tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%">
            <tr class="trDlg">
                <td valign="top" class="tdDlg" nowrap>
                    对话
                </td>
                <td valign="top" class="tdDlg">
                    <textarea id="tbxMsg" cols="255" rows="5" style=" 100%"></textarea>
                </td>
                <td valign="top" class="tdDlg">
                    <input id="btnSend" type="button" value="发送" disabled onclick="btnSend_onclick();" />
                </td>
            </tr>
        </table>
    </div>
</div>
<div id="divRight">
    用户列表:
</div>
</body>
</html>

chat.css

h1 {
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    font-size: 14pt;
    color: #006bb5;
    background-color: #f0f0f0;
    border-radius: 5px;
    border: 1px solid #f0f0f0;
    padding: 5px;
    margin: 0 0 18px 0;
}
div[id^=divContainer] {
    border: 0;
    margin: 10px 0;
    padding: 3px;
    background-color: #f0f0f0;
    border-radius: 5px;
}
div#divLeft {
    width: 85%;
    background-color: #f0f0f0;
    float: left;
}
div#divRight {
    width: 15%;
    background-color: white;
    float: right;
    font-weight: bold;
    font-size: 12px;
}
div#divchat {
    border: 0;
    margin: 10px;
    padding: 3px;
    background-color: #f0f0f0;
    border: 1px solid pink;
    border-radius: 5px;
    position: relative;
    height: 300px;
    overflow: auto;
    font-size: 12px;
}
table.tbDlg {
    font-family: Verdana,Helvetica,sans-serif;
    font-weight: normal;
    font-size: 12px;
    background-color: #f0f0f0;
}
tr.trDlg, td.tdDlg {
    background-color: #f0f0f0;
    font-size: 10px;
}
textarea {
    font-family: inherit;
    font-size: 10pt;
    border: 1px solid #444;
    background-color: white;
    width: 100%;
}
input[type="button"] {
    font-family: inherit;
    border: 1px solid #808080;
    border-radius: 10px;
    margin: 1px;
    color: white;
    background-color: #81a0b5;
    width: 100px;
}
input[type="button"]:hover {
    margin: 1px;
    background-color: #006bb5;
}
input[type="button"]:active {
    margin: 1px;
    font-weight: bold;
    background-color: #006bb5;
}
input[type="button"]:focus {
    margin: 0;
    font-weight: bold;
    background: #006bb5;
}