Node.js+WebSocket建立简单聊天室

时间 2019-12-06

标签 node.js+websocket node websocket 建立简单聊天室栏目 JavaScript 繁體版

原文原文链接

websocket简介

websocket其实HTML中新增长的内容，其本质仍是一种网络通讯协议，如下是websocket的一些特色：javascript

（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来搭建一个简单的多人聊天室。html

对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时所须要的包。
好的，这样以来咱们的前期准备工做就已经完成了，下面咱们来搭建聊天室对应的客户端和服务器端。java

搭建聊天室服务器端

如下这段代码是我搭建服务器端时所需的代码，你们在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对象，
第二、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 node

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()web

26 console.log("websocket close!");npm

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