WebSocket心跳的實現

來源：千鋒教育

發布人：xqq

時間： 2023-11-23 12:21:14 1700713274

一、什么是WebSocket心跳

WebSocket心跳是指通過在客戶端和服務端之間以固定時間間隔發送心跳消息，以確保連接持續有效的機制。在WebSocket連接中，由于TCP連接的特性，當數據傳輸完成后連接并不會馬上關閉，因此使用心跳可以保證連接在空閑狀態時也不被關閉。

通常情況下，心跳發送的間隔需要根據實際場景進行設計，一般在幾秒鐘到幾分鐘之間，以達到較好的效果。同時，心跳內容也需要特殊處理，以便客戶端和服務端在接收心跳消息時可以通過特殊標志判斷是否為心跳消息，并及時回復確認消息。

二、如何在JavaScript中實現WebSocket心跳

在JavaScript中，可以通過setInterval函數設置定時器，周期性地向服務端發送心跳消息。在接收到服務端的響應后，以及在WebSocket關閉或發生錯誤時，需要清理定時器，停止心跳消息的發送。


let heartbeatTimer = null;

function startHeartbeat(ws) {
  // 每5秒向服務端發送一次心跳消息
  heartbeatTimer = setInterval(function () {
    let msg = { type: "heartbeat" };
    ws.send(JSON.stringify(msg));
  }, 5000);
}

function stopHeartbeat() {
  clearInterval(heartbeatTimer);
}

三、如何在服務端實現WebSocket心跳

在服務端通常使用定時器周期性地向所有連接發送心跳消息。在接收到客戶端的心跳消息后，服務端需要及時回復確認消息，以表示連接仍然有效。


let heartbeatTimer = null;

function startHeartbeat(ws) {
  // 每10秒發送一次心跳消息
  heartbeatTimer = setInterval(function () {
    let msg = { type: "heartbeat" };
    ws.send(JSON.stringify(msg));
  }, 10000);
}

function stopHeartbeat() {
  clearInterval(heartbeatTimer);
}

// WebSocket連接監聽
wss.on('connection', function (ws) {
  // 啟動心跳機制
  startHeartbeat(ws);

  // 監聽消息事件
  ws.on('message', function (message) {
    console.log('received: %s', message);

    // 接收到心跳消息，回復確認消息
    if (message === '{"type":"heartbeat"}') {
      ws.send('{"type":"heartbeat_ack"}');
    }
  });

  // 監聽關閉事件
  ws.on('close', function () {
    // 停止心跳機制
    stopHeartbeat();
  });
});

四、WebSocket系統監控

WebSocket系統監控是通過監測WebSocket連接的狀態，以及管理WebSocket連接的數量、資源消耗等信息，確保WebSocket系統的穩定可靠運行。

如下是一個WebSocket系統監控的實現示例：


// 定義存儲WebSocket連接的數組
let connections = [];

// WebSocket連接監聽
wss.on('connection', function (ws) {
  // 將連接對象加入數組
  connections.push(ws);

  // 監聽關閉事件
  ws.on('close', function () {
    // 將連接對象從數組中移除
    connections.splice(connections.indexOf(ws), 1);
  });
});

// 定時監控WebSocket連接狀態
setInterval(function () {
  let activeCount = 0;

  // 統計活躍連接數量
  connections.forEach(function (ws) {
    if (ws.readyState === WebSocket.OPEN) {
      activeCount++;
    }
  });

  // 輸出連接狀態及數量
  console.log(new Date(), 'Active:', activeCount, 'Total:', connections.length);

  // 檢查系統負載情況，如果超過閾值則報警
  let loadavg = os.loadavg();
  let threshold = 2 * os.cpus().length;
  if (loadavg[0] >= threshold) {
    console.log(new Date(), 'System Overloaded!');
  }
}, 5000);