摘要：服務(wù)端確認(rèn)協(xié)議版本，升級為協(xié)議。自己寫了一個例子，服務(wù)端在開始連接后，利用定時器主動向客戶端發(fā)送隨機(jī)數(shù)，客戶端也可以發(fā)給服務(wù)器消息，然后服務(wù)器返回這條消息給客戶端。做的事情就是給頁面的元素綁定事件。

寫在前面
webSocket是一項可以讓服務(wù)器將數(shù)據(jù)主動推送給客戶端的技術(shù)。前幾天寫了一個日志功能，日志數(shù)據(jù)需要實時更新。正好項目中有封裝好的WebSocket組件，且接口支持webSocket，就用它實現(xiàn)了。也是第一次用，簡單研究了一下，分享出來。

文章示例代碼：https://github.com/neroneroff...

什么是WebSocket
首先需要明白webSocket的概念，下邊是維基百科的解釋

WebSocket是一種通信協(xié)議，可在單個TCP連接上進(jìn)行全雙工通信。WebSocket使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單，允許服務(wù)端主動向客戶端推送數(shù)據(jù)。在WebSocket API中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就可以建立持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。
首先，要明白WebSocket是一種通信協(xié)議，區(qū)別于HTTP協(xié)議，HTTP協(xié)議只能實現(xiàn)客戶端請求，服務(wù)端響應(yīng)的這種單項通信。
而WebSocket可以實現(xiàn)客戶端與服務(wù)端的雙向通訊，說白了，最大也是最明顯的區(qū)別就是可以做到服務(wù)端主動將消息推送給客戶端。

其余的特點(diǎn)有：

握手階段采用 HTTP 協(xié)議。
數(shù)據(jù)格式輕量，性能開銷小。客戶端與服務(wù)端進(jìn)行數(shù)據(jù)交換時，服務(wù)端到客戶端的數(shù)據(jù)包頭只有2到10字節(jié)，客戶端到服務(wù)端需要加上另外4字節(jié)的掩碼。HTTP每次都需要攜帶完整頭部。
更好的二進(jìn)制支持，可以發(fā)送文本，和二進(jìn)制數(shù)據(jù)
沒有同源限制，客戶端可以與任意服務(wù)器通信
協(xié)議標(biāo)識符是ws（如果加密，則是wss），請求的地址就是后端支持websocket的API。
幾種與服務(wù)端實時通信的方法
我們都知道，不使用WebSocket與服務(wù)器實時交互，一般有兩種方法。AJAX輪詢和Long Polling長輪詢。

AJAX輪詢
AJAX輪詢也就是定時發(fā)送請求，也就是普通的客戶端與服務(wù)端通信過程，只不過是無限循環(huán)發(fā)送，這樣，可以保證服務(wù)端一旦有最新消息，就可以被客戶端獲取。

Long Polling長輪詢
Long Polling長輪詢是客戶端和瀏覽器保持一個長連接，等服務(wù)端有消息返回，斷開。
然后再重新連接，也是個循環(huán)的過程，無窮盡也。。。

客戶端發(fā)起一個Long Polling，服務(wù)端如果沒有數(shù)據(jù)要返回的話，
會hold住請求，等到有數(shù)據(jù)，就會返回給客戶端?？蛻舳擞謺俅伟l(fā)起一次Long Polling，再重復(fù)一次上面的過程。

缺點(diǎn)
上邊這兩種方式都有個致命的弱點(diǎn)，開銷太大，被動性。假設(shè)并發(fā)很高的話，這對服務(wù)端是個考驗。
而WebSocket一次握手，持久連接，以及主動推送的特點(diǎn)可以解決上邊的問題，又不至于損耗性能。

WebSocket連接過程
客戶端發(fā)起HTTP握手，告訴服務(wù)端進(jìn)行WebSocket協(xié)議通訊，并告知WebSocket協(xié)議版本。服務(wù)端確認(rèn)協(xié)議版本，升級為WebSocket協(xié)議。之后如果有數(shù)據(jù)需要推送，會主動推送給客戶端。

連接開始時，客戶端使用HTTP協(xié)議和服務(wù)端升級協(xié)議，升級完成后，后續(xù)數(shù)據(jù)交換遵循WebSocket協(xié)議。我們看看Request Headers

Accept-Encoding: gzip, deflate, br
Accept-Language: zh,zh-TW;q=0.9,en-US;q=0.8,en;q=0.7,zh-CN;q=0.6
Cache-Control: no-cache
Connection: Upgrade
Host: 127.0.0.1:3000
Origin: http://localhost:3000
Pragma: no-cache
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: bwb9SFiJONXhQ/A4pLaXIg==
Sec-WebSocket-Version: 13
Upgrade: websocket
重點(diǎn)字段是這些：

Connection: Upgrade 表示要升級協(xié)議
Upgrade: websocket 要升級協(xié)議到websocket協(xié)議
Sec-WebSocket-Version 表示websocket的版本。如果服務(wù)端不支持該版本，需要返回一個Sec-WebSocket-Versionheader，里面包含服務(wù)端支持的版本號。
Sec-WebSocket-Key 對應(yīng)服務(wù)端響應(yīng)頭的Sec-WebSocket-Accept，由于沒有同源限制，websocket客戶端可任意連接支持websocket的服務(wù)。這個就相當(dāng)于一個鑰匙一把鎖，避免多余的，無意義的連接。
再看看看服務(wù)端響應(yīng)的 Response Headers

Connection: Upgrade
Sec-WebSocket-Accept: 2jrbCWSCPlzPtxarlGTp4Y8XD20=
Upgrade: websocket
關(guān)鍵是這個字段

Sec-WebSocket-Accept: 用來告知服務(wù)器愿意發(fā)起一個websocket連接， 值根據(jù)客戶端請求頭的Sec-WebSocket-Key計算出來
WebSocket API
客戶端若想要與支持webScoket的服務(wù)器通信，可以使用WebSocket構(gòu)造函數(shù)返回WebSocket對象。

const ws = new WebSocket("ws://localhost:3000/websocket");
這樣，客戶端就會與服務(wù)端開始連接。

返回的實例對象的屬性：

WebSocket.onopen： 連接成功后的回調(diào)
WebSocket.onclose： 連接關(guān)閉后的回調(diào)
WebSocket.onerror： 連接失敗后的回調(diào)
WebSocket.onmessage： 客戶端接收到服務(wù)端數(shù)據(jù)的回調(diào)
webSocket.bufferedAmount： 未發(fā)送至服務(wù)器的二進(jìn)制字節(jié)數(shù)
WebSocket.binaryType： 使用二進(jìn)制的數(shù)據(jù)類型連接
WebSocket.protocol ： 服務(wù)器選擇的下屬協(xié)議
WebSocket.url ： WebSocket 的絕對路徑
WebSocket.readyState： 當(dāng)前連接狀態(tài)，對應(yīng)的四個常量
WebSocket.CONNECTING: 0

WebSocket.OPEN: 1

WebSocket.CLOSING: 2

WebSocket.CLOSED: 3

方法：

WebSocket.close() 關(guān)閉當(dāng)前連接
WebSocket.send(data) 向服務(wù)器發(fā)送數(shù)據(jù)
示例
講了那么多概念以后，終于可以看看怎么用了。實現(xiàn)WebSocket通信，需要客戶端和服務(wù)端配合。

自己寫了一個例子，服務(wù)端在開始連接后，利用定時器主動向客戶端發(fā)送隨機(jī)數(shù)，客戶端也可以發(fā)給服務(wù)器消息，然后服務(wù)器返回這條消息給客戶端。客戶端就是js+html，服務(wù)端用了express + express-ws來實現(xiàn)。

代碼在這里：https://github.com/neroneroff... 可以clone下來，安裝依賴，npm start運(yùn)行看下效果。

客戶端
前端頁面，最終效果如以上效果圖：

  

    

      
服務(wù)端返回的消息
      

    
    

      
      

        點(diǎn)擊發(fā)消息給服務(wù)端
      
    
    關(guān)閉連接
  

js，使用webSocket的代碼都在這里。做的事情就是給頁面的元素綁定事件。
然后創(chuàng)建WebSocket對象，監(jiān)聽對象的連接、接收消息、關(guān)閉等事件，將數(shù)據(jù)反饋到頁面中

    const msgBox = document.getElementById("msg-need-send")
    const sendBtn = document.getElementById("send-btn")
    const exit = document.getElementById("exit")
    const receiveBox = document.getElementById("receive-box")
    
    // 創(chuàng)建一個webSocket對象
    const ws = new WebSocket("ws://127.0.0.1:3000/websocket/test")
    ws.onopen = e => {
      // 連接后監(jiān)聽
      console.log(`WebSocket 連接狀態(tài)： ${ws.readyState}`)
    }
    
    ws.onmessage = data => {
      // 當(dāng)服務(wù)端返回數(shù)據(jù)的時候，放到頁面里
      receiveBox.innerHTML += `
${data.data}
`
      receiveBox.scrollTo({
        top: receiveBox.scrollHeight,
        behavior: "smooth"
      })
    }
    
    ws.onclose = data => {
      // 監(jiān)聽連接關(guān)閉
      console.log("WebSocket連接已關(guān)閉")
      console.log(data);
    }
    
    sendBtn.onclick = () => {
      // 點(diǎn)擊發(fā)送按鈕。將數(shù)據(jù)發(fā)送給服務(wù)端
      ws.send(msgBox.value)
    }
    exit.onclick = () => {
      // 客戶端主動關(guān)閉連接
      ws.close()
    }

服務(wù)端
考慮到了模塊化開發(fā)，沒有直接把代碼放到直接創(chuàng)建服務(wù)的文件中。而是使用了路由，給webSocket服務(wù)分配一個多帶帶的接口

const express = require("express");
const expressWs = require("express-ws")
const router = express.Router()
expressWs(router);

router.ws("/test", (ws, req) => {
  ws.send("連接成功")
  let interval
  // 連接成功后使用定時器定時向客戶端發(fā)送數(shù)據(jù)，同時要注意定時器執(zhí)行的時機(jī)，要在連接開啟狀態(tài)下才可以發(fā)送數(shù)據(jù)
  interval = setInterval(() => {
    if (ws.readyState === ws.OPEN) {
      ws.send(Math.random().toFixed(2))
    } else {
      clearInterval(interval)
    }
  }, 1000)
  // 監(jiān)聽客戶端發(fā)來的數(shù)據(jù)，直接將信息原封不動返回回去
  ws.on("message", msg => {
    ws.send(msg)
  })
})

module.exports = router

最后看一下數(shù)據(jù)交互的過程

總結(jié)
上邊簡單實現(xiàn)了一個webSocket通信。實際的東西還有很多，比如webSocket擴(kuò)展，心跳檢測，數(shù)據(jù)加密，身份認(rèn)證等知識點(diǎn)。但自己也需要再去研究，所以先不做介紹了。

相關(guān)文章
WebSocket協(xié)議：5分鐘從入門到精通 - 程序猿小卡 - 博客園

WebSocket 教程 - 阮一峰的網(wǎng)絡(luò)日志

WebSocket

express-ws