用 Node 實現簡單 WebSocket 協議

chavesgu 發布于2019-08-21 18:26 / 3393人閱讀

摘要：用實現簡單協議從瀏覽器說起瀏覽器提供的非常簡潔。創建連接連接建立時的回調收到消息時的回調連接出錯時的回調連接終止時的回調發送消息告訴我們也就是說，在創建對象時，瀏覽器嘗試與服務端建立連接發送請求建立個服務端一旦收到數據，就會觸發。

用 Node 實現簡單 WebSocket 協議 從瀏覽器 WebSocket API 說起

瀏覽器提供的 WebSocket API 非常簡潔。

let ws = new WebSocket("ws://localhost:8124") // 創建連接

ws.onopen = function(e){...}  // 連接建立時的回調

ws.onmessage = function(e){...}  // 收到消息時的回調

ws.onerror = function(e){...}  // 連接出錯時的回調

ws.onclose = function(e){...}  // 連接終止時的回調

ws.send("Hello Server!") // 發送消息

MDN告訴我們

In order to communicate using the WebSocket protocol, you need to create a WebSocket object; this will automatically attempt to open the connection to the server.

也就是說，在 let ws = new WebSocket("ws://localhost:8124") 創建 WebSocket 對象時，瀏覽器嘗試與服務端建立連接（發送請求）

建立個服務端

const net = require("net")
const server = net.createServer(s => {
  s.on("data", d => {
    console.log(d.toString())
  })
})
server.listen(8124, () => {
  console.log("listening on 8124...")
})

一旦收到數據，就會觸發 data。

啟動服務端，監聽8124端口；在瀏覽器中打開控制臺，輸入let ws = new WebSocket("ws://localhost:8124")；得到結果如下

通過這次請求，瀏覽器告訴服務端，要升級協議為 websocket

服務端收到這個請求后，向瀏覽器發出響應，這個過程就叫做握手（handshaking）

服務端向瀏覽器發出同意升級協議的響應后會觸發瀏覽器端 websocket.onopen 的回調

服務端的響應

Obtain the value of Sec-WebSocket-Key request header without any leading and trailing whitespace

Link it with "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"

Compute SHA-1 and Base64 code of it

Write it back as value of Sec-WebSocket-Accept response header as part of a HTTP response.

根據MDN的指示，修改服務端代碼

const net = require("net")
const crypto = require("crypto")
const server = net.createServer(s => {
  s.on("data", d => {
    let req = d.toString() 
    // Obtain the value of Sec-WebSocket-Key request header without any leading and trailing whitespace
    let secWebsocketKey = /Sec-WebSocket-Key:s(.*)/.exec(req)[1]
    // Link it with "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
    let key = secWebsocketKey + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
    // Compute SHA-1 and Base64 code of it
    let secWebSocketAccept = crypto.createHash("sha1").update(key).digest("base64")
    // Write it back as value of Sec-WebSocket-Accept response header as part of a HTTP response.
    let res = "HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: " + secWebSocketAccept + "

"
    s.write(res)
  })
})
server.listen(8124, () => {
  console.log("listening on 8124...")
})

同時為了方便測試，寫個html文件





  
  
  
  socketClient



  socketClient

啟動服務端，用瀏覽器打開html文件

至此之后，瀏覽器和服務端之間就可以更加愉快地聊天了，之前的服務端很矜持，瀏覽器問一句，服務端答一句；而握手之后，服務端也會主動向瀏覽器發送消息，這樣就會觸發瀏覽器端 websocket.onmessage 的回調

服務端主動發送消息

修改服務端代碼

...
  s.on("data", d => {
    let req = d.toString()
    console.log(req)
    // Obtain the value of Sec-WebSocket-Key request header without any leading and trailing whitespace
    let secWebsocketKey = /Sec-WebSocket-Key:s(.*)/.exec(req)[1]
    // Link it with "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
    let key = secWebsocketKey + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
    // Compute SHA-1 and Base64 code of it
    let secWebSocketAccept = crypto.createHash("sha1").update(key).digest("base64")
    // Write it back as value of Sec-WebSocket-Accept response header as part of a HTTP response.
    let res = "HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: " + secWebSocketAccept + "

"
    console.log(res)
    s.write(res)
    // 服務端主動發消息 Hi, Client! l"m Server.
    let dataBuffer = new Buffer(`Hi, Client! l"m Server.`)
    let payload_len = dataBuffer.length
    let assistData = []
    assistData.push(129)
    assistData.push(payload_len)
    let assistBuffer = new Buffer(assistData)
    let message = Buffer.concat([assistBuffer, dataBuffer])
    console.log(message)
    s.write(message)
  })
})
...

代碼中

    // 服務端主動發消息 Hi, Client! l"m Server.
    let dataBuffer = new Buffer(`Hi, Client! l"m Server.`)
    let payload_len = dataBuffer.length
    let assistData = []
    assistData.push(129)
    assistData.push(payload_len)
    let assistBuffer = new Buffer(assistData)
    let message = Buffer.concat([assistBuffer, dataBuffer])
    console.log(message)
    s.write(message)

實際上是將數據編碼成數據幀的過程，其具體細節稍后再說。

修改html

websocket.send()

瀏覽器發送消息很簡單

修改html

修改服務端代碼

const net = require("net")
const crypto = require("crypto")
const server = net.createServer(s => {
  s.handshaking = false
  s.on("data", d => {
    if (!s.handshaking) {
      let req = d.toString()
      console.log(req)
      // Obtain the value of Sec-WebSocket-Key request header without any leading and trailing whitespace
      let secWebsocketKey = /Sec-WebSocket-Key:s(.*)/.exec(req)[1]
      // Link it with "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
      let key = secWebsocketKey + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
      // Compute SHA-1 and Base64 code of it
      let secWebSocketAccept = crypto.createHash("sha1").update(key).digest("base64")
      // Write it back as value of Sec-WebSocket-Accept response header as part of a HTTP response.
      let res = "HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: " + secWebSocketAccept + "

"
      console.log(res)
      s.write(res)
      // 服務端主動發消息 Hi, Client! l"m Server.
      let dataBuffer = new Buffer(`Hi, Client! l"m Server.`)
      let payload_len = dataBuffer.length
      let assistData = []
      assistData.push(129)
      assistData.push(payload_len)
      let assistBuffer = new Buffer(assistData)
      let message = Buffer.concat([assistBuffer, dataBuffer])
      console.log(message)
      s.write(message)
      s.handshaking = true
    } else {
      //解析瀏覽器發送消息
      let fin = d[0] >> 7
      let opcode = d[0] & parseInt(1111, 2) // 1 表示文本數據幀
      let mask = d[1] >> 7 // 標示是否進行掩碼處理，客戶端發送給服務端時為1，服務端發送給客戶端時為0
      let payload_len = d[1] & parseInt(1111111, 2) // 這里假設發送的數據長度小于 125
      let masking_key = d.slice(2, 6)
      let payload_data = new Buffer(payload_len)
      for (let i = 0; i < payload_len; i++) {
        let j = i % 4
        payload_data[i] = d[6 + i] ^ masking_key[j]
      }
      console.log(payload_data.toString())
    }
  })
})
server.listen(8124, () => {
  console.log("listening on 8124...")
})

編碼解碼數據幀

解碼Hi, Server! l"m Client.

let fin = d[0] >> 7
      let opcode = d[0] & parseInt(1111, 2) // 1 表示文本數據幀
      let mask = d[1] >> 7 // 標示是否進行掩碼處理，客戶端發送給服務端時為1，服務端發送給客戶端時為0
      let payload_len = d[1] & parseInt(1111111, 2) // 這里假設發送的數據長度小于 125
      let masking_key = d.slice(2, 6)
      let payload_data = new Buffer(payload_len)
      for (let i = 0; i < payload_len; i++) {
        let j = i % 4
        payload_data[i] = d[6 + i] ^ masking_key[j]
      }
      console.log(payload_data.toString())

編碼Hi, Client! l"m Server.

let dataBuffer = new Buffer(`Hi, Client! l"m Server.`)
      let payload_len = dataBuffer.length
      let assistData = []
      assistData.push(129)
      assistData.push(payload_len)
      let assistBuffer = new Buffer(assistData)
      let message = Buffer.concat([assistBuffer, dataBuffer])
      console.log(message)

解碼編碼依據Base Framing Protocol

主要用到 nodeAPI 中 Buffer 的模塊以及位運算

其實我主要看的是《深入淺出NodeJS》第七章websocket的那部分

小結

握手之后才可以通信

從請求頭獲取websocketKey

設置響應頭

通信

編碼信息

解碼信息

位運算/Buffer/正則

let socketArr = []
const server = net.createServer(s => {
  s.handShaking === false
  s.name = `Client_${socketArr.length}`
  socketArr.push(s)
  s.on("data", d => {})
  ...
})

將每個socket對象標記并保存，從而實現對象之間的通信

參考資料

WebSocket

Writing WebSocket client applicaitons

Writing a WebSocket server in Java

《深入淺出NodeJS》第六章、第七章部分

The WebSocket Protocol

用Node實現WebSocket協議

基于node實現websocket協議

nodejs實現websocket的數據接收發送

GPU云服務器云服務器用c實現簡單的shell WebSocket協議 websocket 實現webrtc websocket 實現即時通訊

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

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

Node.js - 200 多行代碼實現 Websocket 協議

摘要：預備工作序最近正在研究相關的知識，想著如何能自己實現協議。監聽事件就是協議的抽象，直接在上面監聽已有的事件和事件這兩個事件。表示當前數據幀為消息的最后一個數據幀，此時接收方已經收到完整的消息，可以對消息進行處理。 A、預備工作 1、序最近正在研究 Websocket 相關的知識，想著如何能自己實現 Websocket 協議。到網上搜羅了一番資料后用 Node.js 實現該協議，倒也沒...

張巨偉 2019-08-26 12:21 評論0 收藏0
淺談 WebSocket

摘要：接口用于接收服務器發送的事件。因此，是目前來說最佳的選擇。最大特點就是，服務器可以主動向客戶端推送消息，客戶端也可以主動向服務器發送信息，是一種不受限的全雙工通信。若是，則交給的回調函數處理，否則，還是走正常的回調的路子。使用 WebSocket 的理由傳統的http協議有一個根本性的缺陷，那就是請求只能由客戶端向服務器發起，服務器接收到請求后再進行響應，把數據返回給客戶端。也就是...

Jensen 2019-08-23 13:53 評論0 收藏0
WebSockets實戰：在 Node 和 React 之間進行實時通信

摘要：服務器推遲響應，直到發生更改更新或超時。旨在取代現有的雙向通信技術。只要我們對套接字事件和有了充分的了解，理解和實現就非常簡單。翻譯：瘋狂的技術宅原文：blog.logrocket.com/websockets-… showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada008fc1f81d7); Web 為了支持客戶端和服務器之間的全...

DevWiki 2019-05-23 11:48 評論0 收藏0