面试题：JavaScript WebSocket的心跳机制实现

Question

在JavaScript的WebSocket实时通信场景中，为保证连接的稳定性，常需要实现心跳机制。请阐述心跳机制的原理，并给出JavaScript代码实现，包括发送心跳消息以及处理心跳响应。

Answer 1

心跳机制原理

在WebSocket实时通信中，心跳机制是一种用于保持连接活跃、检测连接状态以及处理网络波动等问题的机制。原理是客户端定时向服务器发送心跳消息（也叫PING消息），服务器接收到后返回心跳响应（也叫PONG消息）。通过这种方式，双方可以确认连接仍然有效，并且可以及时发现由于网络故障、服务器过载等原因导致的连接中断，以便进行重连等操作。

JavaScript代码实现

// 创建WebSocket实例
const socket = new WebSocket('ws://your-server-url');

// 心跳间隔时间（毫秒）
const HEARTBEAT_INTERVAL = 5000;
let heartbeatTimer;

// 连接成功时
socket.onopen = function () {
    console.log('WebSocket连接已建立');
    startHeartbeat();
};

// 接收消息时
socket.onmessage = function (event) {
    const data = JSON.parse(event.data);
    if (data.type === 'pong') {
        console.log('收到心跳响应');
    } else {
        console.log('收到其他消息:', data);
    }
};

// 连接关闭时
socket.onclose = function () {
    console.log('WebSocket连接已关闭');
    clearHeartbeat();
};

// 发送心跳消息
function sendHeartbeat() {
    socket.send(JSON.stringify({ type: 'ping' }));
    console.log('发送心跳消息');
}

// 启动心跳
function startHeartbeat() {
    heartbeatTimer = setInterval(sendHeartbeat, HEARTBEAT_INTERVAL);
}

// 清除心跳
function clearHeartbeat() {
    clearInterval(heartbeatTimer);
}