WebSocket心跳檢測詳解

一、什麼是WebSocket心跳檢測

WebSocket是一種全雙工通信協議，它能夠實現在瀏覽器和伺服器之間建立持久連接，從而實現實時通信。而在WebSocket通信過程中，有一種特殊的機制，叫做WebSocket心跳檢測。

WebSocket心跳檢測是指在WebSocket通信過程中，客戶端會定時向伺服器發送一個心跳包，以表明客戶端仍然在線。如果伺服器在一段時間內沒有收到客戶端的心跳包，就可以認為客戶端已經掉線，並且可以採取相應措施，例如刪除客戶端對應的session等。

通常情況下，心跳包的發送間隔會比較短，例如30秒或者1分鐘。

二、為什麼需要WebSocket心跳檢測

在實際應用中，可能會面臨多種網路狀況，例如：

1、客戶端網路故障，可能會導致客戶端無法發送和接收數據；

2、伺服器網路故障，可能會導致客戶端無法連接伺服器；

3、防火牆或者代理等網路設備可能會攔截WebSocket通信，從而導致連接中斷。

為了應對這些可能的網路問題，我們需要使用WebSocket心跳檢測機制來檢測客戶端的在線狀態，避免無法處理掉線等異常情況。

三、WebSocket心跳檢測的實現

WebSocket心跳檢測的實現涉及到客戶端和伺服器兩個方面。

1、客戶端實現

在客戶端實現WebSocket心跳檢測的過程中，我們通常採用定時器實現。具體而言，我們可以在客戶端代碼中添加如下定時器代碼：

var websocket = new WebSocket('ws://127.0.0.1:8000/');
var heartbeatTimer = null;

websocket.onopen = function(event) {
  console.log('WebSocket連接已打開！');

  // 開啟心跳定時器，間隔為30s
  heartbeatTimer = setInterval(function() {
    websocket.send('heartbeat');
  }, 30000);
};

websocket.onmessage = function(event) {
  console.log('接收到數據：' + event.data);
};

websocket.onclose = function(event) {
  console.log('WebSocket連接已關閉！');
  clearInterval(heartbeatTimer);
};

websocket.onerror = function(event) {
  console.log('WebSocket連接發生錯誤！');
  clearInterval(heartbeatTimer);
};

上面的代碼中，我們通過setInterval()函數開啟了一個每30秒發送一次「heartbeat」消息的定時器，以檢測客戶端是否在線。當客戶端連接關閉或者發生錯誤時，我們需要清除心跳定時器。

2、伺服器端實現

在伺服器端實現WebSocket心跳檢測的過程中，我們需要定時檢查每個客戶端上一次的心跳時間，並且判斷其是否已經超過了心跳超時時間。具體而言，我們可以在伺服器端代碼中添加如下代碼：

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({ port: 8000 });

// 心跳檢測間隔
var heartbeatInterval = 30000;
// 最長心跳超時時間
var maxHeartbeatTimeout = 120000;

// 客戶端信息列表
var clients = [];

// 開啟心跳檢測定時器
setInterval(function() {
  var now = Date.now();
  clients.forEach(function(client) {
    if (now - client.lastHeartbeatTime > maxHeartbeatTimeout) {
      console.log('客戶端已掉線：' + client.id);
      // 關閉WebSocket連接
      client.websocket.terminate();

      // 從客戶端列表中刪除此客戶端
      clients = clients.filter(function(item) {
        return item !== client;
      });
    }
  });
}, heartbeatInterval);

wss.on('connection', function(websocket) {
  console.log('WebSocket連接已打開！');

  var client = {
    id: Date.now().toString(),
    websocket: websocket,
    lastHeartbeatTime: Date.now()
  };

  clients.push(client);

  websocket.on('message', function(message) {
    console.log('接收到數據：' + message);

    if (message === 'heartbeat') {
      client.lastHeartbeatTime = Date.now();
    }
  });

  websocket.on('close', function() {
    console.log('WebSocket連接已關閉！');
    // 從客戶端列表中刪除此客戶端
    clients = clients.filter(function(item) {
      return item !== client;
    });
  });

  websocket.on('error', function() {
    console.log('WebSocket連接發生錯誤！');
    // 關閉WebSocket連接
    websocket.terminate();

    // 從客戶端列表中刪除此客戶端
    clients = clients.filter(function(item) {
      return item !== client;
    });
  });
});

上面的代碼中，我們首先定義了心跳檢測間隔和最長心跳超時時間。然後我們定義了一個客戶端信息列表，用於記錄每個客戶端的WebSocket連接信息。

在WebSocket連接建立後，我們會將該客戶端的WebSocket連接信息添加到客戶端信息列表中，並且初始化該客戶端的最後心跳時間為當前時間。當接收到客戶端發送的「heartbeat」消息時，我們會更新該客戶端的最後心跳時間。

在每個心跳檢測時間間隔內，我們會遍歷客戶端信息列表，並判斷是否有客戶端的心跳超時。如果超時時間超過了最長心跳超時時間，我們會關閉該客戶端的WebSocket連接，並從客戶端信息列表中刪除該客戶端。

四、WebSocket心跳檢測的注意事項

在使用WebSocket心跳檢測時，我們需要注意以下幾個問題：

1、心跳包的發送間隔應該根據具體應用情況進行調整，一般建議不要過長；

2、心跳包的消息內容應該盡量精簡，避免浪費帶寬；

3、心跳間隔和最長超時時間的設置需要考慮網路狀況和伺服器負載等因素；

4、在檢測到客戶端掉線時，需要及時關閉WebSocket連接，並且從客戶端信息列表中刪除該客戶端。