WebSocket 中的心跳是为了解决什么问题?

---

WebSocket

WebSocket 是一种在客户端和服务器之间建立持久化连接的协议，它允许双方实时地交换数据。由于 WebSocket 连接是长时间保持的，因此需要一种机制来确保连接的稳定性和可靠性，这就是心跳机制。

心跳机制是指定期发送一些数据包来保持连接的活跃状态。在 WebSocket 连接中，心跳包通常是空消息或一些特定的标识符，发送方会定时向接收方发送心跳包，接收方收到心跳包后会立即回复一个确认消息。通过这种方式，可以检测连接是否还处于活跃状态。

一、心跳机制的主要作用是：

确保连接的稳定性：由于网络环境的不稳定性，WebSocket 连接有可能会因为各种原因断开，例如网络故障、服务器重启等。通过心跳机制，可以及时发现连接是否已经断开，并采取相应的措施。

减少无效流量：由于 WebSocket 连接是长时间保持的，如果没有心跳机制，连接双方会不停地发送和接收数据包，这会导致大量的无效流量和带宽浪费。通过心跳机制，可以在保持连接的同时，减少无效流量的产生，提高数据传输的效率。

提高连接的可靠性：通过心跳机制可以及时检测连接是否已经断开，这可以减少因连接断开而导致的数据传输中断和数据丢失的情况，从而提高连接的可靠性。

二、代码

const socket = new WebSocket('ws://localhost:8080');
const heartbeatInterval = 5000; // 心跳间隔时间，单位：毫秒
let heartbeatTimer = null; // 心跳定时器

socket.onopen = () => {
    
    
  console.log('WebSocket连接已打开');
  startHeartbeat();
};

socket.onmessage = (event) => {
    
    
  console.log(`接收到消息：${
      
      event.data}`);
};

socket.onclose = () => {
    
    
  console.log('WebSocket连接已关闭');
  stopHeartbeat();
};

socket.onerror = (error) => {
    
    
  console.error(`WebSocket连接发生错误：${
      
      error}`);
  stopHeartbeat();
};

function startHeartbeat() {
    
    
  heartbeatTimer = setInterval(() => {
    
    
    if (socket.readyState === WebSocket.OPEN) {
    
    
      socket.send('heartbeat'); // 发送心跳包
    } else {
    
    
      stopHeartbeat();
    }
  }, heartbeatInterval);
}

function stopHeartbeat() {
    
    
  clearInterval(heartbeatTimer);
  heartbeatTimer = null;
}

在上述代码中，我们定义了一个 heartbeatInterval 变量来表示心跳间隔时间，然后定义了一个 heartbeatTimer 变量来表示心跳定时器。在 WebSocket 连接打开时，我们调用 startHeartbeat 函数来启动心跳定时器，在定时器中发送心跳包。在 WebSocket 连接关闭或发生错误时，我们调用 stopHeartbeat 函数来停止心跳定时器。
需要注意的是，在发送心跳包时，我们需要先检查 WebSocket 连接的状态是否为 OPEN，因为如果连接已经关闭或发生错误，我们就不应该再发送心跳包了。