JavaScript Academy · 课时

连接生命周期与错误

Q: 「连接生命周期与错误」这节课中我会学到什么？

处理打开、关闭和错误事件。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

处理打开、关闭和错误事件。

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

完整生命周期

socket 会依次经过 CONNECTING → OPEN → CLOSING → CLOSED。四个事件对应这些状态转换：open、message、error 和 close。

onclose 事件

连接结束时，无论是否正常，都会触发 onclose。该事件包含 code、reason 和 wasClean。

socket.onclose = (event) => {
  console.log("Closed", event.code, event.reason, event.wasClean);
};

关闭代码

标准代码包括 1000（正常）、1001（即将离开）、1006（异常，没有关闭帧）和 1011（服务器错误）。4000–4999 范围的代码由应用定义。

socket.onclose = (e) => {
  if (e.code === 1000) console.log("normal close");
  else console.log("unexpected", e.code);
};

主动关闭

socket.close(code, reason) 会发起正常关闭。正常关闭请使用 1000；原因字符串必须少于 123 个字节。

socket.close(1000, "user logged out");

onerror 事件

发生故障时会触发 onerror。出于安全考虑，错误事件提供的信息很少，特意不包含详细原因。close 事件几乎总会随后触发。

socket.onerror = (event) => {
  console.log("Socket error — a close will follow");
};

区分正常关闭与异常关闭

只有双方都交换了关闭帧时，event.wasClean 才是 true。网络中断会产生 wasClean: false 和代码 1006。

socket.onclose = (e) => {
  if (!e.wasClean) console.log("Connection dropped unexpectedly");
};

清理资源

关闭时，请清除计时器（包括心跳计时器）、拒绝待处理的请求，并更新用户界面状态，让应用反映连接已断开。

socket.onclose = () => {
  clearInterval(heartbeatTimer);
  pending.forEach((reject) => reject(new Error("disconnected")));
  pending.clear();
};

移除监听器

如果您使用 addEventListener 附加了处理程序，请在关闭时移除它们，以避免内存泄漏，尤其是在重新创建 socket 时。

function cleanup() {
  socket.removeEventListener("message", onMessage);
  socket.removeEventListener("close", onClose);
}

关闭期间的 readyState

从调用 close() 到触发 onclose 事件之间，readyState 为 CLOSING (2)。在此期间发送的数据会被忽略。

socket.close();
console.log(socket.readyState); // 2 (CLOSING)

服务器导致的空闲超时

服务器和代理通常会在 30–60 秒后关闭空闲连接。心跳可以保持连接活跃，并帮助您及时发现连接中断。

检测失效连接

将心跳与监视器结合起来：如果在规定时间内没有收到 pong，就将 socket 视为失效并关闭它，从而触发重新连接。

let pongTimer;
function ping() {
  socket.send(JSON.stringify({ type: "ping" }));
  pongTimer = setTimeout(() => socket.close(4000, "no pong"), 5000);
}
socket.onmessage = (e) => {
  if (JSON.parse(e.data).type === "pong") clearTimeout(pongTimer);
};

快速检查

测试生命周期处理。

回顾：生命周期与错误

您处理了带有 code/reason/wasClean 的 onclose，了解了标准关闭代码，主动关闭了连接，处理了信息很少的 onerror，清理了计时器和监听器，并构建了心跳监视器。下一步：重新连接策略。

常见问题解答

「连接生命周期与错误」课时是免费的吗？

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

「连接生命周期与错误」这节课中我会学到什么？

处理打开、关闭和错误事件。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「连接生命周期与错误」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy