一、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ā)送適當?shù)闹甘静㈥P(guān)閉連接。然后客戶端等待一段時間

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

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

（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ù)。當客戶端有消息發(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、客戶端：文章來源地址http://www.zghlxwxcb.cn/news/detail-783139.html

<!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>

到了這里，關(guān)于Node.js實現(xiàn)WebSocket的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！