如何配置WebSocket保持永久连接，解决1-2分钟无消息超时断开问题

WebSocket协议本身没有内置的空闲连接保活逻辑，浏览器、中间代理、服务端都会在连接无数据传输超过设定阈值后主动断开连接，1-2分钟无消息后断开的问题就是典型的空闲超时触发导致的。

可以通过以下配置实现稳定的持久连接： #

1. 实现客户端心跳保活机制（核心必要配置） #

心跳是维持WebSocket连接的通用方案：客户端定期向服务端发送极小的心跳包（ping），服务端收到后立刻返回响应包（pong），只要双方能正常收发心跳包就判定连接存活，超时未收到响应则判定连接断开。

心跳间隔必须小于服务端/中间代理的空闲超时阈值，建议设置为超时阈值的1/2，比如服务端空闲超时为1分钟，心跳间隔就设为30秒。 #

2. 增加断开自动重连逻辑 #

网络波动、服务端重启等场景都会导致连接断开，需要在onclose回调中增加自动重连逻辑，可搭配指数退避策略避免频繁重连给服务端造成压力。 #

完整实现代码示例 #

useEffect(() => {
  let futureResponseClient = null;
  let heartBeatTimer = null;
  let reconnectTimer = null;
  let pongWaitTimer = null;
  // 可根据实际服务端超时阈值调整参数
  const HEARTBEAT_INTERVAL = 30 * 1000; // 每30秒发一次心跳
  const PONG_WAIT_TIMEOUT = 10 * 1000; // 10秒没收到心跳响应判定连接失效
  const RECONNECT_DELAY = 3 * 1000; // 断开后3秒触发重连

  const initConnect = () => {
    const futureResponseFeedAddress = "ws://localhost/endpoint";
    futureResponseClient = new W3CWebSocket(futureResponseFeedAddress);
    props.onUpdateOrderbookWebsocket(futureResponseClient);

    // 发送心跳逻辑
    const sendPing = () => {
      if (futureResponseClient.readyState === WebSocket.OPEN) {
        // 也可以直接使用WebSocket协议内置的ping帧，无需自定义消息体
        futureResponseClient.send(JSON.stringify({ type: 'ping' }));
        // 等待pong响应，超时主动断开触发重连
        pongWaitTimer = setTimeout(() => {
          futureResponseClient.close();
        }, PONG_WAIT_TIMEOUT);
      }
    };

    futureResponseClient.onopen = () => {
      console.log("WebSocket Client Connected on " + futureResponseFeedAddress);
      // 连接成功启动心跳定时器
      heartBeatTimer = setInterval(sendPing, HEARTBEAT_INTERVAL);
    };

    futureResponseClient.onmessage = (message) => {
      const data = JSON.parse(message.data);
      // 处理心跳响应
      if (data.type === 'pong') {
        clearTimeout(pongWaitTimer);
        return;
      }
      // 原有业务逻辑写在下方
      // ..............
    };

    futureResponseClient.onclose = closeEvent => {
      console.log("response messages websocket closed.");
      // 清理所有现有定时器
      clearInterval(heartBeatTimer);
      clearTimeout(pongWaitTimer);
      // 触发重连
      reconnectTimer = setTimeout(initConnect, RECONNECT_DELAY);
    };

    futureResponseClient.onerror = (error) => {
      console.error("WebSocket连接异常: ", error);
    };
  };

  // 初始化连接
  initConnect();

  // 组件卸载清理逻辑
  return function cleanup() {
    clearInterval(heartBeatTimer);
    clearTimeout(pongWaitTimer);
    clearTimeout(reconnectTimer);
    if (futureResponseClient) {
      futureResponseClient.close();
    }
  };
}, []);

服务端配套要求 #

• 收到客户端的ping消息后，立刻返回pong响应
• 调整服务端WebSocket的空闲超时阈值，建议设置为心跳间隔的2-3倍
• 如果使用Node.js的ws库实现WebSocket服务，可直接使用内置的ping/pong帧处理逻辑，无需自定义消息体，性能更高

内容的提问来源于stack exchange，提问作者user1285928