调用socket.close()后WebSocket关闭事件未触发，连接无法完全关闭求助

当前你的代码在页面切换时尝试关闭WebSocket，但连接停留在关闭中状态（readyState=2），且close事件日志未打印，问题出在事件绑定时机和页面卸载事件的特性上，以下是具体解决方法：

核心问题分析 #

• 你在调用socket.close()前才绑定close事件，此时关闭流程可能已经启动，导致监听器错过事件触发。
• pagehide/unload事件触发时，浏览器会快速终止页面资源，WebSocket的关闭握手流程可能被中断，无法完成到CLOSED（readyState=3）状态。

解决方案 #

1. 提前绑定close事件 #

将close事件监听器移到WebSocket初始化阶段，而不是等到页面卸载时才绑定，确保不会错过事件：

// 初始化WebSocket后立即绑定close事件
socket.addEventListener("close", (event) => {
  console.log("Websocket closed, code:", event.code, "reason:", event.reason);
});

// 页面卸载事件处理保留
const type = "onpagehide" in self ? "pagehide" : "unload";
window.addEventListener(type, (event) => {
  if (event.persisted === false) {
    // 指定正常关闭的状态码和原因，帮助服务器正确处理
    socket.close(1000, "User navigated away from page");
  }
});

2. 补充beforeunload事件处理 #

beforeunload事件触发时机早于pagehide/unload，能给WebSocket关闭握手留足时间，避免浏览器中断流程：

window.addEventListener("beforeunload", () => {
  // 仅当连接处于打开状态时执行关闭
  if (socket.readyState === WebSocket.OPEN) {
    socket.close(1000, "Before page unload");
  }
});

3. 排查WebSocket引用泄漏 #

检查是否存在其他代码持有WebSocket实例的引用，比如未清理的定时器、订阅事件，导致连接无法被垃圾回收和完全关闭。确保在页面卸载时，除了关闭连接，还清理所有相关的监听器和定时器。

4. 强制关闭（极端情况） #

如果上述方法无效，可尝试在关闭后主动清理WebSocket引用：

window.addEventListener(type, (event) => {
  if (event.persisted === false) {
    socket.close(1000);
    // 主动释放引用
    socket = null;
  }
});

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