Node.js+WebSocket創建簡單聊天室

cppprimer 發布于2019-08-22 11:09 / 508人閱讀

摘要：好的，這樣以來我們的前期準備工作就已經完成了，下面我們來搭建聊天室對應的客戶端和服務器端。

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 ode_modules pm ode_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
2
3
4
5
6
7 Document
8
9
10

ChatRoom

12
13

14
15
35
36

客戶端代碼分析：

第16行建議和服務器端的websocket連接

第17行~24行，當在輸入框輸入消息后點擊發送按鈕時，客戶端向服務端發送消息

總結

總體來說客戶端的搭建是比較簡單的，就是使用4個常用的websock API（onopen,onclose,onerror,onmessage）,難點在于如何搭建服務器端。以上就是我分享的關于利用node.js和websocket來搭建一個簡單的多人聊天室。最后附上結果運行圖：

本例的源碼下載地址：

鏈接：http://pan.baidu.com/s/1cdIatC 密碼：6pxl

GPU云服務器云服務器 websocket實現聊天室簡單聊天室簡單的php聊天簡單的php聊天系統

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91884.html

Node.js+WebSocket創建簡單聊天室

摘要：好的，這樣以來我們的前期準備工作就已經完成了，下面我們來搭建聊天室對應的客戶端和服務器端。 websocket簡介 websocket其實HTML中新增加的內容，其本質還是一種網絡通信協議，以下是websocket的一些特點：（1）因為連接在端口80（ws）或者443（wss）上創建，與HTTP使用的端口相同，幾乎所有的防火墻都不會阻塞WebSocket鏈接（2）因...

Seay 2019-08-06 13:26 評論0 收藏0
感謝有“你”-------socket.io

摘要：首先將的包拷貝到你的項目文件下，并在部分使用標簽將其添加進去使用專業的函數創建一個端點當在消息框輸入消息并點擊發送按鈕時，客戶端就將向服務器端發送輸入的消息，消息類型是。我此前曾發過一遍文章有關于如何利用node.js+websocket搭建一個簡單的多人聊天室有興趣的朋友可以關注我的技術客棧---濤濤技術客棧。今天學習了websocket的一個框架---socket.io后瞬間感覺...

stackvoid 2019-08-22 11:10 評論0 收藏0
感謝有“你”-------socket.io

摘要：首先將的包拷貝到你的項目文件下，并在部分使用標簽將其添加進去使用專業的函數創建一個端點當在消息框輸入消息并點擊發送按鈕時，客戶端就將向服務器端發送輸入的消息，消息類型是。我此前曾發過一遍文章有關于如何利用node.js+websocket搭建一個簡單的多人聊天室有興趣的朋友可以關注我的技術客棧---濤濤技術客棧。今天學習了websocket的一個框架---socket.io后瞬間感覺...

FuisonDesign 2019-08-06 13:25 評論0 收藏0
搭建WebSocket簡易聊天室

摘要：本文，我們通過和實現一個在線聊天室的。創建三個對象，一個作為多人在線聊天室，一個作為提示當前在線人數，還有一個為的作為在線人數顯示文本。創建一個對象為作為消息發送輸入框，用戶可以在此輸入消息進行發送。本文，我們通過Egret和Node.js實現一個在線聊天室的demo。主要包括：聊天，改用戶名，查看其他用戶在線狀態的功能。大致流程為，用戶訪問網頁，即進入聊天狀態，成為新游客，通過底部...

Lowky 2019-08-23 11:53 評論0 收藏0