WebSocket 學習筆記

來自我的博客

因為項目原因需要用到雙工通信，所以比較詳細的學習了一下瀏覽器端支持的 WebSocket.
並記錄一些遇到的問題。

簡介

WebSocket 一般是指瀏覽器提供的 API 介面，允許 Web 頁面通過 WebSocket 協議與遠程主機進行雙向通信。

註：本介面不允許到底層網路的原始訪問。舉例說明，本介面不能被用於實現一個不通過自定義伺服器代理髮送消息的 IRC（網間實時聊天，Internet Relay Chat）客戶端。

介面說明 文檔

WebSocket 對象提供了用於創建和管理 WebSocket 連接，以及可以通過該連接發送和接收數據的 API。

常見問題

1.基於 WebSocket 心跳功能

因為 WebSocket 本身不提供心跳功能，所以在有些時候無法及時正確的判斷與後端的連接狀態，很多時候就需要自己來進行實現。可以通過與後端約定定時握手的形式來實現心跳功能。比如說每 30 秒通信一次。

/** WebSocket 心跳 **/

const msg = "heatbeat"; // 約定的心跳消息
let timer = null; // 定時器
let lastMsgTimestamp = null; // 時間戳
let ws = new WebSocket(""); // ws 實例

ws.onopen = e => {
  // 更新時間戳
  lastMsgTimestamp = new Date().getTime();

  if (e.type === "open") {
    // 創建心跳連接
    if (timer) {
      clearInterval(timer);
    }
    timer = setInterval(heatbeat, 10000);
  }
};

function heatbeat() {
  if (ws) {
    if (new Date().getTime() - lastMsgTimestamp > 300000) {
      clearInterval(timer);
      console.log("心跳已斷開");
      // ... 心跳斷開後的處理
    } else {
      // 發送約定的心跳
      ws.send(msg);
    }
  }
}

/** 記得關閉連接時清楚定時器 **/

TODO 通信中斷重連問題