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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。