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);
}
}
}
/** 記得關閉連線時清楚定時器 **/