websocket简介
websocket其实HTML中新增加的内容，其本质还是一种网络通信协议，以下是websocket的一些特点：
（1）因为连接在端口80（ws）或者443（wss）上创建，与HTTP使用的端口相同，几乎所有的防火墙都不会阻塞WebSocket链接
（2）因为它使用HTTP 进行握手，所以该协议可以自然地集成到网络浏览器和HTTP服务器中
（3）心跳消息（称为ping和pong）将反复被发送，保持WebSocket连接几乎一直处于活跃状态。基本上，一个节点周期性地发送一个小数据包另一个节点(ping)，而另一个节点则使用包含了相同数据的数据包作为响应(pong)。这将使这两个节点处于连接状态
（4）WebSocket协议可以安全地支持跨域连接，避免Ajax和XMLHttpRequest上的限制
（5）HTTP规范要求浏览器将并发连接数限制为每个主机名两个连接，但是在我手完成之后该限制就不再存在，因为此时连接已经不再是HTTP连接了 今天我将和大家分享如何利用Node.js及websocket来搭建一个简单的多人聊天室。
对node.js稍微有所了解的朋友知道，node.js采用的包管理机制即，所以我们为使用websocket必须使用npm（包管理工具）来安装websocket所需要的包，首先在终端通过命令行的形式进入node.js中的node_modules的npm安装目录下，例如在我这台电脑上对应的路径就是：D:\Node.js\node_modules\npm\node_modules，最后使用命令 **npm -install nodejs-websocket**来安装使用websocket时所需要的包。
好的，这样以来我们的前期准备工作就已经完成了，下面我们来搭建聊天室对应的客户端和服务器端。
搭建聊天室服务器端
以下这段代码是我搭建服务器端时所需的代码，大家在GitHub官网搜索一下很容易找到的一个模板：
1 var ws = require("nodejs-websocket")
2 var PORT = 3000
3 var clientCount = 0
4 var server = ws.createServer(function (conn) {
5 console.log("New connection")
6 clientCount++
7 conn.nickname = 'user'+clientCount
8 broadcast(conn.nickname+" comes in")
9 conn.on("text", function (str) {
10 console.log("Received "+str);
11 broadcast(str)
})
12 conn.on("close", function (code, reason) {
13 console.log("Connection closed")
14 broadcast(conn.nickname+" left")
})
15 conn.on("error",function(err){
16 console.log("Handle Error");
17 console.log(err);
})
18 }).listen(PORT)
19 console.log("websocket listening on port:"+PORT)
20 function broadcast(str){
21 server.connections.forEach(function(connection) {
22 connection.sendText(str)
});
}服务器代码分析：
- 第1行：通过require（‘node-websocket’）来获取一个websocket对象，
第2、3行定义服务器的端口号即服务器端的客户连接数 - 第6行，每当服务器收到一个客户端发来的连接请求时，客户端数加1
- 第7行，给每个客户端取一个昵称
- 第8行，每当有客户端个服务器端建立连接时，服务器就向全部客户端广播一条消息：
userX comes in - 第9~11行，当客户端和服务器建立连接时，服务器就向全部客户端广播消息，即将任意一个客户端发的消息转发给全体客户端
- 第12~14行是当有客户端关闭时，服务器告诉全体客户端userX left
- 第20-22是broadcast函数的实现
搭建客户端：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <center><h1>ChatRoom</h1></center>
11
12 <input type="text" id="sendTxt">
13
14 <button id="sendBtn">发送</button>
15 <script type="text/javascript">
16 var websocket = new WebSocket("ws://localhost:3000");
17 websocket.onopen = function()
18 {
19 console.log("websocket open");
20 document.getElementById('sendBtn').onclick = function()
21 {
22 var txt = document.getElementById('sendTxt').value;
23 if(txt){
24 websocket.send(txt);
}
}
}25 websocket.onclose = function()
{26 console.log("websocket close!");
}27 websocket.onmessage = function(e){
28 console.log(e.data);
29 showMessage(e.data)
}30 function showMessage(str)
{31 var div = document.createElement('div');
32 div.innerHTML = str;
33 document.body.appendChild(div);
}34 </script>
35 </body>
36 </html>
客户端代码分析：
- 第16行建议和服务器端的websocket连接
- 第17行~24行，当在输入框输入消息后点击发送按钮时，客户端向服务端发送消息
总结
总体来说客户端的搭建是比较简单的，就是使用4个常用的websock API（onopen,onclose,onerror,onmessage）,难点在于如何搭建服务器端。以上就是我分享的关于利用node.js和websocket来搭建一个简单的多人聊天室。最后附上结果运行图：
本例的源码下载地址：
链接：http://pan.baidu.com/s/1cdIatC 密码：6pxl
扫一扫
5104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
