js怎样操作WebSocket心跳 3种心跳机制保持长连接-js教程-PHP中文网

js怎样操作WebSocket心跳 3种心跳机制保持长连接

冰火之心

发布： 2025-06-30 17:15:01

原创

339人浏览过

websocket心跳机制通过定期发送“存活”消息维持连接，解决长时间无通信导致的断连问题。其核心在于设定合适的心跳间隔、内容及超时判断，常用实现方式有3种：1）客户端定时发送“ping”，服务端可选择回应“pong”；2）服务端主动发送“ping”，客户端回应“pong”；3）将时间戳嵌入应用层协议中，通过数据包判断连接状态。此外，断线重连建议采用指数退避算法、设置最大重连次数并提供用户提示，以提升稳定性和用户体验。

js怎样操作WebSocket心跳 3种心跳机制保持长连接

WebSocket心跳机制，简单来说，就是客户端或服务端定期向对方发送一个“我还活着”的消息，确保连接没有断开。这对于需要保持长时间连接的应用，比如在线游戏、实时聊天等，至关重要。否则，你以为还在连接，其实早就断了，数据发不出去，体验很糟糕。

解决方案

WebSocket心跳机制的核心在于定期发送心跳包。关键点在于：

心跳间隔： 间隔时间要合适，太短浪费资源，太长可能无法及时发现断线。一般建议30秒到1分钟。
心跳内容： 心跳包内容可以很简单，比如一个简单的字符串 "ping"。
超时判断： 如果在一定时间内没有收到对方的心跳响应，就认为连接断开，需要重连。

以下提供3种JavaScript实现WebSocket心跳机制的方法，各有侧重：

方法一：客户端主动心跳

这是最常见的做法，客户端定时发送心跳包，服务端收到后可以不回复，也可以回复一个"pong"作为确认。

let websocket = new WebSocket("ws://your-websocket-server");
let heartbeatInterval = 30000; // 30秒
let timeout = 60000; // 60秒没收到心跳响应就重连
let timeoutObj = null;

websocket.onopen = () => {
    console.log("WebSocket connected");
    resetTimeout();
    startHeartbeat();
};

websocket.onmessage = (event) => {
    console.log("Received message:", event.data);
    resetTimeout(); // 收到消息也重置超时
};

websocket.onclose = () => {
    console.log("WebSocket disconnected");
    clearTimeout(timeoutObj);
    clearInterval(heartbeatIntervalId);
};

websocket.onerror = (error) => {
    console.error("WebSocket error:", error);
};

function startHeartbeat() {
    heartbeatIntervalId = setInterval(() => {
        websocket.send("ping");
        console.log("Sent heartbeat");
    }, heartbeatInterval);
}


function resetTimeout() {
    clearTimeout(timeoutObj);
    timeoutObj = setTimeout(() => {
        console.log("Heartbeat timeout, reconnecting...");
        websocket.close(); // 关闭连接，触发onclose事件，可以在onclose中重连
    }, timeout);
}

登录后复制

这种方法的优点是简单易懂，缺点是如果服务端挂了，客户端可能需要等待较长时间才能发现。

方法二：服务端主动心跳

这种方式由服务端定时向客户端发送心跳包，客户端收到后回复一个"pong"。

// 客户端代码
let websocket = new WebSocket("ws://your-websocket-server");
let timeout = 60000; // 60秒没收到心跳就重连
let timeoutObj = null;

websocket.onopen = () => {
    console.log("WebSocket connected");
    resetTimeout();
};

websocket.onmessage = (event) => {
    console.log("Received message:", event.data);
    if (event.data === "ping") {
        websocket.send("pong"); // 回复pong
        console.log("Received heartbeat, sent pong");
    }
    resetTimeout();
};

websocket.onclose = () => {
    console.log("WebSocket disconnected");
    clearTimeout(timeoutObj);
};

websocket.onerror = (error) => {
    console.error("WebSocket error:", error);
};

function resetTimeout() {
    clearTimeout(timeoutObj);
    timeoutObj = setTimeout(() => {
        console.log("Heartbeat timeout, reconnecting...");
        websocket.close(); // 关闭连接，触发onclose事件，可以在onclose中重连
    }, timeout);
}

登录后复制

这种方法的优点是服务端可以更及时地发现客户端的连接问题，缺点是服务端需要维护每个客户端的心跳状态。

方法三：结合应用层协议的心跳

这种方法不单独发送心跳包，而是将心跳信息嵌入到应用层协议中。例如，在发送数据时，可以附加一个时间戳，服务端收到数据后，根据时间戳判断连接是否超时。

// 假设应用层协议是JSON
function sendData(data) {
    data.timestamp = Date.now();
    websocket.send(JSON.stringify(data));
}

websocket.onmessage = (event) => {
    let data = JSON.parse(event.data);
    let now = Date.now();
    let diff = now - data.timestamp;
    if (diff > timeout) {
        console.log("Heartbeat timeout, reconnecting...");
        websocket.close();
    } else {
        console.log("Received data:", data);
    }
};

登录后复制

这种方法的优点是减少了心跳包的开销，缺点是需要在应用层协议中增加额外的字段，增加了复杂性。

WebSocket断线重连的最佳实践是什么？

断线重连是心跳机制的重要补充。以下是一些建议：

指数退避算法： 不要立即重连，而是等待一段时间，并随着重连次数的增加，逐渐增加等待时间。例如，第一次等待1秒，第二次2秒，第三次4秒，以此类推。
最大重连次数： 设置一个最大重连次数，避免无限重连。
用户提示： 在重连期间，给用户一个友好的提示，告知他们正在尝试重新连接。
避免频繁重连： 如果服务器持续不可用，频繁重连只会浪费资源。可以设置一个“放弃重连”的机制，例如，如果重连失败超过一定次数，就停止重连，并提示用户稍后再试。