浏览器节能机制导致Websocket断连的坑

一、背景介绍

WebSocket是一种通信协议，为客户端和服务器之间提供全双工通信通道。与传统的HTTP协议不同，WebSocket在建立连接后，可以在客户端和服务器之间持续传输数据，而无需每次都重新建立连接。然而，现代浏览器的节能机制（如后台标签页管理、节能模式）可能导致WebSocket连接意外断开，给开发者带来诸多困扰。

二、浏览器节能机制的影响

1. 背景标签页管理

当用户将浏览器标签页切换到后台时，浏览器可能会减少对该标签页的资源分配，甚至暂停JavaScript的执行，以节省系统资源。此时，WebSocket连接可能会被浏览器关闭或变得不稳定。

2. 节能模式

一些浏览器在设备电量较低时会进入节能模式，限制网络活动以延长电池寿命。这种模式下，WebSocket连接可能会被强制关闭，导致通信中断。

三、解决方案

1. 保持活跃连接

通过定期发送心跳包（heartbeat），可以向服务器发送小的数据包，告知服务器连接仍然活跃，避免浏览器因无活动而断开连接。

function keepAlive(socket) {
    if (socket.readyState === WebSocket.OPEN) {
        socket.send('ping');
    }
    setTimeout(keepAlive, 30000); // 每30秒发送一次
}
keepAlive(socket);
​

2. 处理断线重连

实现自动重连机制，当检测到WebSocket连接关闭时，自动尝试重新连接。

let socket;
function connect() {
    socket = new WebSocket('wss://example.com/socket');

    socket.onopen = () => {
        console.log('WebSocket connection opened');
    };

    socket.onclose = () => {
        console.log('WebSocket connection closed, retrying in 5 seconds');
        setTimeout(connect, 5000); // 5秒后重连
    };

    socket.onerror = (error) => {
        console.error('WebSocket error:', error);
        socket.close(); // 关闭连接以触发重连逻辑
    };

    socket.onmessage = (message) => {
        console.log('WebSocket message received:', message.data);
    };
}

connect();
​

3. 后台标签页检测

利用 Page Visibility API检测页面是否处于后台，并采取适当的措施，如减少心跳包频率或暂停非关键任务。

document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
        console.log('Page is in background, reducing heartbeat frequency');
        // 调整心跳包发送频率或其他逻辑
    } else {
        console.log('Page is in foreground, resuming normal operations');
        // 恢复正常操作
    }
});