HTML5 WebSocket + NodeJs 实现聊天室

WebSocket技术的加入在浏览器中实现了和服务器端的双向通信。在这里我选择NodeJs作为服务器端，与WebSocket技术结合起来，实现浏览器与服务器端的双向通信。

首先，需要通过下面这条命令在nodeJs中安装websocket模块：

npm install socket

安装完成之后开始编写我们服务器端代码server.js。

var http    = require('http'),
    io      = require('socket.io'),
    fs      = require('fs');
 
//配置
varconfig = {
    port :8888
}
 //创建服务器，监听端口。
http = http.createServer(handler);
http.listen(config.port);
//创建webscoket监听服务器
io = io.listen(http);
 
functionhandler(req, res) {
    fs.readFile(__dirname+'/client.html',
    function(err, data){
        req.setEncoding(encoding="utf8");
        res.writeHead(200);
        res.end(data);
    });
}
io.sockets.on('connection',function(socket){
     //定义事件
    socket.on('msg',function(data){
        socket.broadcast.emit('user message',data);
    });
});

代码中先导入了socket.io包，然后设置监听端口，最后通过io.sockets.on方法监听服务器端与浏览器的连接，并在服务器端与浏览器握手完成后通过回调函数调用socket.on方法来监听服务器端发来的消息。

下面是浏览器端的实现client.html：

<script src="http://172.18.48.159:8888/socket.io/socket.io.js"></script>
        <script type="text/javascript">
            varsocket = io.connect('http://172.18.48.159:8888/');
            //Comet
            socket.on('user message',function(msg) {
                msgbox(msg.msg);
            });
            //发送消息
            functionsendMsg() {
                varinpt = document.getElementById('txtInput');
                varstr = inpt.value;
                if(str.length==0){
                    inpt.className="error";
                    alert("请输入发送的消息内容");
                    returnfalse;
                }
                inpt.className ="";
                msgbox(str);
                //发送消息至服务器的Scoket。
                socket.emit('msg', {
                    msg : str
                });
                console.log('[client]'+ str);
                inpt.value ="";
                inpt.focus();
            }
            functionmsgbox(str) {
                varbox = document.getElementById('box');
                box.innerHTML += str +'<br>';
            }
            window.onload =function(){
                document.body.onkeypress =function(event){
                    vare = window.event || event;
                    if(e.keyCode==13){
                        sendMsg();
                    }
                }
            }
        </script>

在页面中首先需要导入socket.io.js模块，这个模块文件是放在nodejs服务器目录下的，所以需要通过ip去获取。

之后通过io.connect(//服务器ip+端口)方法让客户端与服务器端连接握手。

同样的，通过socket.on方法监听来自服务器端的消息。

通过socket.emit方法向服务器端发送数据。在这里使用的是广播机制，所以所有的客户端都会收到消息。