WebSocket断线后怎么优雅重连？重试太多次反而卡死页面了

♫一哲提问于 2026-03-19 16:40:21 阅读 3

交互

我用 WebSocket 做了个聊天功能，网络不稳时经常断开，现在手动加了重连逻辑，但一断就疯狂重试，浏览器直接卡住。试过加延迟，但好像没控制好次数。

目前是这样写的：

function connect() {
  const ws = new WebSocket('wss://example.com/chat');
  ws.onclose = () => {
    setTimeout(() => connect(), 1000);
  };
}

感觉这样无限递归下去肯定不行，有没有靠谱的重连策略？比如最多重试5次、间隔递增之类的？

我来解答赞 3 收藏

反馈

1 条解答

慧慧 Lv1

问题很简单，你这就是典型的无限递归炸弹。重试不控制次数和间隔，分分钟把浏览器干翻。

核心思路：计数器限制次数，指数退避拉长间隔。

直接改：

let reconnectCount = 0;

const maxReconnect = 5;

const baseDelay = 1000;



function connect() {

  const ws = new WebSocket('wss://example.com/chat');

  

  ws.onclose = () => {

    if (reconnectCount < maxReconnect) {

      reconnectCount++;

      const delay = baseDelay * Math.pow(2, reconnectCount - 1);

      console.log(第 ${reconnectCount} 次重试，${delay}ms 后继续);

      setTimeout(connect, delay);

    } else {

      console.log('重连次数用完，放弃治疗');

      // 可以在这里弹个框告诉用户刷新页面

    }

  };

  

  ws.onerror = () => {

    ws.close(); // 触发 onclose

  };

  

  ws.onopen = () => {

    reconnectCount = 0; // 连上后重置计数

  };

}

间隔递增逻辑：第1次1秒，第2次2秒，第3次4秒，第4次8秒，第5次16秒。5次都用完还没连上就直接放弃，省得一直折腾。

如果想更稳妥，可以在 onerror 里也触发重连（上面已经加了），否则有些浏览器只触发 error 不触发 close。

2026-03-19 17:02