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

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

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

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

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

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

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

求。這顯然無(wú)法適應(yīng)對(duì)實(shí)時(shí)通信有高要求的場(chǎng)景。

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

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

（比如間隔一秒），再發(fā)送另一個(gè)請(qǐng)求。這種實(shí)現(xiàn)方式相對(duì)比較簡(jiǎn)單，無(wú)須做過(guò)多的更改。但缺點(diǎn)是輪詢的間隔過(guò)長(zhǎng)，會(huì)導(dǎo)致用戶不能及

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

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

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

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

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

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

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

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

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

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

3、安裝ws：npm install ws

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

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

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

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

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

（3）backlog：掛起連接隊(duì)列的最大長(zhǎng)度

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

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

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

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

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

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

（10）perMessageDeflate：?jiǎn)⒂?禁用消息壓縮

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

三、監(jiān)聽(tīng)連接：ws通過(guò)connection事件來(lái)監(jiān)聽(tīng)連接

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ù)器，就會(huì)觸發(fā)'connection'事件；req對(duì)象可以用來(lái)獲取客戶端的信息，如ip、端口號(hào)
 //獲取所有已連接的客戶端信息，則可以使用server.clients數(shù)據(jù)集

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

 /* send(data [,options][,callback])
       data：發(fā)送的數(shù)據(jù)
       options對(duì)象：
         (1)compress：指定數(shù)據(jù)是否需要壓縮。默認(rèn)為true
         (2)binary：指定數(shù)據(jù)是否通過(guò)二進(jìn)制傳送。默認(rèn)是自動(dòng)檢測(cè)
         (3)mask：指定是否應(yīng)遮罩?jǐn)?shù)據(jù)。
         (4)fin：指定數(shù)據(jù)是否為消息的最后一個(gè)片段。默認(rèn)為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通過(guò)message事件來(lái)接收數(shù)據(jù)。當(dāng)客戶端有消息發(fā)送給服務(wù)器時(shí)，服務(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)
             }
         })
     })
 })

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

1、CONNCETION：值為0，表示連接還沒(méi)有打開(kāi)

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

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ù)器：通過(guò)監(jiān)聽(tīng)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 = '連接開(kāi)啟!'
             }
 ?
             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('連接沒(méi)有開(kāi)啟')
             }
         }
     </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>

總結(jié)

到此這篇關(guān)于node.js中ws模塊創(chuàng)建服務(wù)端與客戶端的文章就介紹到這了,更多相關(guān)node.js創(chuàng)建服務(wù)端與客戶端內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: