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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。