1. WebSocket 心跳机制概述
在使用 JavaScript 实现 WebSocket 时，心跳机制是一种确保连接稳定的重要手段。通过定期发送心跳包（如 ping 帧），客户端可以确认与服务端的连接状态是否正常。如果服务端未能及时响应，则客户端可采取重连策略。
常见的心跳机制流程如下：
客户端以固定时间间隔发送 ping 消息。服务端接收到 ping 后，返回 pong 消息作为响应。客户端根据 pong 的接收情况判断连接状态。若超时未收到 pong，则触发重连逻辑。
这种机制的核心在于合理设置心跳间隔和超时时间，从而在性能与可靠性之间找到平衡点。
2. 心跳间隔的选择与优化
选择合适的心跳间隔是实现高效心跳机制的关键。通常建议将心跳间隔设置为服务端超时时间的一半。例如，如果服务端超时时间为 30 秒，则心跳间隔可设为 15 秒。
以下是不同场景下心跳间隔的调整建议：
场景推荐心跳间隔原因高网络延迟环境20-30 秒减少频繁通信带来的带宽消耗。低延迟、高稳定性网络10-15 秒快速检测连接异常。移动设备30-60 秒节省电量并降低数据流量。
实际应用中，需要根据业务需求和网络环境动态调整心跳间隔。
3. 客户端代码实现示例
以下是一个简单的 WebSocket 心跳机制实现示例：
let ws = new WebSocket('wss://example.com/socket');
let heartbeatInterval;
let isAlive = true;
ws.onopen = function () {
console.log('WebSocket connection established.');
startHeartbeat();
};
ws.onmessage = function (event) {
if (event.data === 'pong') {
isAlive = true;
}
};
ws.onclose = function () {
console.log('WebSocket connection closed. Attempting to reconnect...');
setTimeout(() => {
ws = new WebSocket('wss://example.com/socket');
}, 3000);
};
function startHeartbeat() {
heartbeatInterval = setInterval(() => {
if (isAlive) {
isAlive = false;
ws.send('ping');
} else {
console.log('No pong received, closing connection.');
ws.close();
}
}, 15000); // 设置心跳间隔为 15 秒
}
上述代码展示了如何通过定时器发送 ping 并监听 pong 响应来维护连接稳定性。
4. 连接异常处理与重连策略
除了心跳机制外，还需要妥善处理 WebSocket 的 onclose 事件。当发生网络中断或服务器宕机时，客户端应具备自动重连能力。
以下是重连逻辑的 mermaid 流程图：
sequenceDiagram
participant Client
participant Server
Client->>Server: WebSocket 连接建立
Note over Client,Server: 正常通信中
Client-->>Client: 发送 ping 帧
alt Server 响应
Server-->>Client: 返回 pong 帧
else Server 无响应
Client--x Client: 关闭连接
Client-->>Client: 触发重连逻辑
end
通过上述流程，客户端可以在连接异常时迅速恢复通信。