JavaScript Academy · 课时

重新连接策略

Q: 「重新连接策略」这节课中我会学到什么？

在连接断开后可靠地重新连接。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在连接断开后可靠地重新连接。

重新连接策略 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

为什么要重新连接

网络并不可靠——Wi-Fi 可能中断，笔记本电脑可能休眠，服务器也可能重启。健壮的 WebSocket 客户端会检测连接关闭并自动重新建立连接，让用户体验保持流畅。

简单的重新连接

最简单的方法是在关闭后立即重新打开连接。危险在于：如果服务器已关闭，这会在紧密循环中不断向服务器发起请求。

function connect() {
  const socket = new WebSocket(url);
  socket.onclose = () => connect(); // too aggressive!
}

固定延迟

添加固定延迟会更温和，但仍会持续发送连接尝试，而且可能使许多客户端同步行动，形成惊群效应。

socket.onclose = () => {
  setTimeout(connect, 3000);
};

指数退避

每次尝试失败后将等待时间加倍：1s、2s、4s、8s……并设置最大上限。这样可以分散重试请求，减轻处于压力中的服务器负担。

let attempt = 0;
function reconnect() {
  const delay = Math.min(1000 * 2 ** attempt, 30000);
  attempt++;
  setTimeout(connect, delay);
}

添加抖动

让延迟略带随机性，避免成千上万的客户端在同一时刻重新连接。完全抖动会在 0 和计算出的 cap 之间随机选择一个值。

function backoffWithJitter(attempt) {
  const cap = Math.min(1000 * 2 ** attempt, 30000);
  return Math.random() * cap;
}

成功后重置

触发 onopen 时，请重置 attempt 计数器，使下一次断开连接时从头开始退避。

socket.onopen = () => {
  attempt = 0;
  console.log("reconnected");
};

完整的重新连接客户端

将各个部分组合起来：连接、打开时重置、关闭时退避。

let attempt = 0, socket;
function connect() {
  socket = new WebSocket(url);
  socket.onopen = () => { attempt = 0; };
  socket.onclose = () => {
    const delay = Math.min(1000 * 2 ** attempt++, 30000);
    setTimeout(connect, delay + Math.random() * 1000);
  };
}
connect();

遵循在线与离线状态

监听浏览器的在线和离线事件。离线时暂停重新连接，连接恢复后立即发起一次尝试。

window.addEventListener("online", () => {
  attempt = 0;
  connect();
});
window.addEventListener("offline", () => {
  if (socket) socket.close();
});

限制连接尝试次数

您可以选择对重试次数设置 cap，并向用户显示永久失败，而不是无限重试。

const MAX = 10;
socket.onclose = () => {
  if (attempt >= MAX) { showOfflineBanner(); return; }
  setTimeout(connect, backoffWithJitter(attempt++));
};

重新连接后重新同步状态

新连接没有服务器端上下文。重新打开连接后，请重新订阅频道，并请求断开期间错过的消息。

socket.onopen = () => {
  attempt = 0;
  socket.send(JSON.stringify({ type: "resubscribe", channels }));
  socket.send(JSON.stringify({ type: "sync", since: lastSeenId }));
};

避免重复 socket

请防止重新连接逻辑被触发两次时打开多个 socket。跟踪当前 socket，并忽略过时的处理程序。

function connect() {
  if (socket && socket.readyState <= WebSocket.OPEN) return;
  socket = new WebSocket(url);
}

快速检查

测试重新连接设计。

回顾：重新连接

您从简单的重新连接逐步学习到带抖动的指数退避，在成功后重置尝试次数，遵循在线和离线事件，限制重试次数，重新连接后同步状态，并避免重复 socket。现在，您的客户端已经具备良好的容错能力。

常见问题解答

「重新连接策略」课时是免费的吗？

是的 — 「重新连接策略」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「重新连接策略」这节课中我会学到什么？

在连接断开后可靠地重新连接。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「重新连接策略」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy