Js 心跳实现
心跳机制简介
心跳机制用于维持客户端与服务器的长连接，通过定时发送小数据包检测连接状态。在Web开发中常用于WebSocket或轮询场景，避免连接因超时被中断。
基于setInterval的实现
使用setInterval定时发送心跳消息，代码简单但可能因页面休眠或切换导致定时器不准确：
let heartbeatInterval = setInterval(() => {
if (websocket.readyState === WebSocket.OPEN) {
websocket.send('HEARTBEAT');
}
}, 30000); // 30秒间隔
// 清除心跳
clearInterval(heartbeatInterval);基于setTimeout的递归实现
递归调用setTimeout可避免休眠后定时器堆积的问题，更适合移动端场景：
function sendHeartbeat() {
if (websocket.readyState === WebSocket.OPEN) {
websocket.send('HEARTBEAT');
}
setTimeout(sendHeartbeat, 30000);
}
sendHeartbeat(); // 启动心跳WebSocket心跳示例
结合WebSocket的onclose事件实现完整心跳检测：
const websocket = new WebSocket('wss://example.com');
let pingTimeout;
function heartbeat() {
clearTimeout(pingTimeout);
pingTimeout = setTimeout(() => {
websocket.close();
}, 5000); // 5秒无响应则认为断开
}
websocket.onopen = () => {
heartbeat();
setInterval(() => {
websocket.send('PING');
}, 30000);
};
websocket.onmessage = (e) => {
if (e.data === 'PONG') heartbeat();
};优化建议
- 心跳间隔通常建议20-60秒，需根据服务器配置调整
- 添加重连机制，在心跳失败时自动重新连接
- 使用二进制帧（如opcode 0x9）替代字符串消息提升效率
- 考虑使用
requestIdleCallback在浏览器空闲时发送心跳
