node.js中ws模塊創(chuàng)建服務(wù)端與客戶端實例代碼

更新時間：2023年05月25日 11:30:47 作者：Jeffrey?Dean

在Node.js中提供了http模塊與https模塊,專用于創(chuàng)建HTTP服務(wù)器、HTTP客戶端,以及HTTPS服務(wù)器及HTTPS客戶端,同時實現(xiàn)這些服務(wù)器端與客戶端之中所需進行的處理,下面這篇文章主要給大家介紹了關(guān)于node.js中ws模塊創(chuàng)建服務(wù)端與客戶端的相關(guān)資料,需要的朋友可以參考下

一、WebSocket出現(xiàn)的原因
二、Node使用ws創(chuàng)建WebSocket服務(wù)器
三、監(jiān)聽連接：ws通過connection事件來監(jiān)聽連接
四、發(fā)送數(shù)據(jù)：ws通過send()方法來發(fā)送數(shù)據(jù)
五、接收數(shù)據(jù)：ws通過message事件來接收數(shù)據(jù)。當(dāng)客戶端有消息發(fā)送給服務(wù)器時，服務(wù)器就能夠觸發(fā)該消息
六、準備的狀態(tài)：ws中WebSocket類具有以下4中準備狀態(tài)
七、關(guān)閉WebSocket服務(wù)器：通過監(jiān)聽close事件關(guān)閉服務(wù)器
總結(jié)

一、WebSocket出現(xiàn)的原因

1、Http協(xié)議發(fā)布REST API 的不足：

每次請求響應(yīng)完成之后，服務(wù)器與客戶端之間的連接就斷開了，如果客戶端想要繼續(xù)獲取服務(wù)器的消息，必須再次向服務(wù)器發(fā)起請

求。這顯然無法適應(yīng)對實時通信有高要求的場景。

2、改善http的不足：Web通信領(lǐng)域出現(xiàn)了一些其他的解決方案，如輪詢、長輪詢、服務(wù)器推送事件、WebSocket

（1）輪詢：就是重復(fù)發(fā)送新的請求到服務(wù)器。如果服務(wù)器沒有新的數(shù)據(jù)，就發(fā)送適當(dāng)?shù)闹甘静㈥P(guān)閉連接。然后客戶端等待一段時間

（比如間隔一秒），再發(fā)送另一個請求。這種實現(xiàn)方式相對比較簡單，無須做過多的更改。但缺點是輪詢的間隔過長，會導(dǎo)致用戶不能及

時接收到更新的數(shù)據(jù)；輪詢時間過短，會導(dǎo)致查詢請求過多，增加服務(wù)器端的負擔(dān)。

（2）長輪詢：客戶端發(fā)送一個請求到服務(wù)器，如果服務(wù)器端沒有新的數(shù)據(jù)，就保持這個連接直到有數(shù)據(jù)。一旦服務(wù)器端有了數(shù)據(jù)

（消息）給客戶端，它就使用這個連接發(fā)送數(shù)據(jù)給客戶端，接著連接關(guān)閉

（3）服務(wù)器推送事件：Server-Sent Events（SSE）,SSE通常重用一個連接處理多個消息（事件）。SSE還定義了一個專門的媒體類

型，用于描述一個從服務(wù)端發(fā)送到客戶端的簡單格式。

（4）WebSocket：提供了一個真正的全雙工連接。發(fā)起者是一個客戶端，發(fā)送一個帶特殊HTTP頭的請求到服務(wù)端，通知服務(wù)器。

該方案的優(yōu)點是屬于html5標準，已經(jīng)被大多數(shù)瀏覽器支持，而且是真正的全雙工，性能比較好，其缺點是實現(xiàn)起來比較復(fù)雜，需要對ws協(xié)議專門處理。

二、Node使用ws創(chuàng)建WebSocket服務(wù)器

1、Node.js原生API沒有提供對WebSocket的支持，需要安裝第三方包才能使用WebSocket功能

2、ws模塊：是一個用于支持WebSocket客戶端和服務(wù)器的框架。它易于使用，功能強大，且不依賴于其他環(huán)境

3、安裝ws：npm install ws

4、創(chuàng)建WebSocket服務(wù)器：

 //創(chuàng)建一個WebSocket服務(wù)器，在8080端口啟動
 const WebSocket = require('ws')
 const server = new WebSocket.Server({port:8080})

5、WebSocket.Server(options[，callback])方法中options對象所支持的參數(shù)

（1）host：綁定服務(wù)器的主機名

（2）port：綁定服務(wù)器的端口號

（3）backlog：掛起連接隊列的最大長度

（4）server：預(yù)先創(chuàng)建的node.js http/s服務(wù)器

（5）verifyClient：可用于驗證傳入連接的函數(shù)

（6）handleProtocols：可用于處理WebSocket子協(xié)議的函數(shù)

（7）path：僅接受與此路徑匹配的連接

（8）noServer：不啟用服務(wù)器模式

（9）clientTracking：指定是否跟蹤客戶端

（10）perMessageDeflate：啟用/禁用消息壓縮

（11）maxPayload：允許的最大消息大?。ㄒ宰止?jié)為單位）

三、監(jiān)聽連接：ws通過connection事件來監(jiān)聽連接

server.on('connection',function connection(ws,req){
     const ip = req.socket.remoteAddress
     const port = req.socket.remotePort
     const clientName = ip + port
 ?
     console.log('%s is connected ',clientName)
 })
 //只要有WebSocket連接到該服務(wù)器，就會觸發(fā)'connection'事件；req對象可以用來獲取客戶端的信息，如ip、端口號
 //獲取所有已連接的客戶端信息，則可以使用server.clients數(shù)據(jù)集

四、發(fā)送數(shù)據(jù)：ws通過send()方法來發(fā)送數(shù)據(jù)

 /* send(data [,options][,callback])
       data：發(fā)送的數(shù)據(jù)
       options對象：
         (1)compress：指定數(shù)據(jù)是否需要壓縮。默認為true
         (2)binary：指定數(shù)據(jù)是否通過二進制傳送。默認是自動檢測
         (3)mask：指定是否應(yīng)遮罩數(shù)據(jù)。
         (4)fin：指定數(shù)據(jù)是否為消息的最后一個片段。默認為true
 */
 server.on('connection',function connection(ws,req){
     const ip = req.socket.remoteAddress
     const port = req.socket.remotePort
     const clientName = ip + port
 ?
     console.log('%s is connected ',clientName)
 ?
     ws.send('Welcome ' + clientName)
 })

五、接收數(shù)據(jù)：ws通過message事件來接收數(shù)據(jù)。當(dāng)客戶端有消息發(fā)送給服務(wù)器時，服務(wù)器就能夠觸發(fā)該消息

server.on('connection',function connection(ws,req){
     const ip = req.socket.remoteAddress
     const port = req.socket.remotePort
     const clientName = ip + port
 ?
     console.log('%s is connected ',clientName)
 ?
     ws.send('Welcome ' + clientName)
 ?
     ws.on('message',function incoming(message){
         console.log('received: %s from %s',message,clientName)
         server.clients.forEach(function each(client){
             if(client.readyState === WebSocket.OPEN){
                 client.send(clientName +" -> " + message)
             }
         })
     })
 })

六、準備的狀態(tài)：ws中WebSocket類具有以下4中準備狀態(tài)

1、CONNCETION：值為0，表示連接還沒有打開

2、OPEN：值為1，表示連接已經(jīng)打開，可以通信了

3、CLOSING：值為2，表示連接正在關(guān)閉

4、CLOSED：值為2，表示連接已經(jīng)關(guān)閉

server.clients.forEach(function each(client){
             if(client.readyState === WebSocket.OPEN){
                 client.send(clientName +" -> " + message)
             }
 })

七、關(guān)閉WebSocket服務(wù)器：通過監(jiān)聽close事件關(guān)閉服務(wù)器

 server.on('close',function close(){
     console.log('disconnected')
 })

案例

1、服務(wù)器端：server.js

const WebSocket = require('ws')
 ?
 const server = new WebSocket.Server({port:8080})
 ?
 server.on('open',function open(){
     console.log('connected')
 })
 ?
 server.on('close',function close(){
     console.log('disconnected')
 })
 ?
 server.on('connection',function connection(ws,req){
     const ip = req.socket.remoteAddress
     const port = req.socket.remotePort
     const clientName = ip + port
 ?
     console.log('%s is connected ',clientName)
 ?
     ws.send('Welcome ' + clientName)
 ?
     ws.on('message',function incoming(message){
         console.log('received: %s from %s',message,clientName)
         server.clients.forEach(function each(client){
             if(client.readyState === WebSocket.OPEN){
                 client.send(clientName +" -> " + message)
             }
         })
     })
 })

2、客戶端：

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <script>
         var socket
         if (!window.WebSocket) {
             window.WebSocket = window.MozWebSocket
         }
         if(window.WebSocket){
             socket = new WebSocket("ws://localhost:8080/ws")
             socket.onmessage = function(event){
                 var ta = document.getElementById('responseTest')
                 ta.value = ta.value + '\n' + event.data
             }
             socket.onopen = function(event) {
                 var ta = document.getElementById('responseTest')
                 ta.value = '連接開啟!'
             }
 ?
             socket.onclose = function(event) {
                 var ta = document.getElementById('responseTest')
                 ta.value = '連接關(guān)閉!'
             }
         }else{
             alert('你的瀏覽器不支持WebSocket')
         }
 ?
         function send(message){
             if(!window.WebSocket){
                 return
             }
             if(socket.readyState === WebSocket.OPEN){
                 socket.send(message)
             }else{
                 alert('連接沒有開啟')
             }
         }
     </script>
     <form onsubmit="return false">
         <h3>WebSocket 聊天室：</h3>
         <textarea  id="responseTest" style="width: 500px;height: 300px;"></textarea>
         <br>
         <input type="text" name="message" style="width: 300px;" value="Welcome to woniuxy.com">
         <input type="button" value="發(fā)送消息" onclick="send(this.form.message.value)">
         <input type="button" value="清空聊天記錄" onclick="javascript:document.getElementById('responseTest').value=''">
     </form>
 </body>
 </html>