3

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

 对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. 第1行:通过require(‘node-websocket’)来获取一个websocket对象,
    第2、3行定义服务器的端口号即服务器端的客户连接数
  2. 第6行,每当服务器收到一个客户端发来的连接请求时,客户端数加1
  3. 第7行,给每个客户端取一个昵称
  4. 第8行,每当有客户端个服务器端建立连接时,服务器就向全部客户端广播一条消息:
    userX comes in
  5. 第9~11行,当客户端和服务器建立连接时,服务器就向全部客户端广播消息,即将任意一个客户端发的消息转发给全体客户端
  6. 第12~14行是当有客户端关闭时,服务器告诉全体客户端userX left
  7. 第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>

客户端代码分析:

  1. 第16行建议和服务器端的websocket连接
  2. 第17行~24行,当在输入框输入消息后点击发送按钮时,客户端向服务端发送消息

总结

总体来说客户端的搭建是比较简单的,就是使用4个常用的websock API(onopen,onclose,onerror,onmessage),难点在于如何搭建服务器端。以上就是我分享的关于利用node.js和websocket来搭建一个简单的多人聊天室。最后附上结果运行图:
结果运行图一

结果运行图二

本例的源码下载地址:

链接:http://pan.baidu.com/s/1cdIatC 密码:6pxl

james
202 声望24 粉丝