WebSocket监听连接关闭事件 WebSocket常见事件钩子函数详解【基础】-js教程-PHP中文网

onclose回调中再调用socket.close()会报错，因为此时连接状态已变为CLOSED（3），而close()仅在OPEN（1）或CLOSING（2）状态下才可执行；规范强制校验状态，非法调用即抛出“connection is already closed”错误。

websocket监听连接关闭事件 websocket常见事件钩子函数详解【基础】

监听 onclose 事件本身不会出错，但直接在回调里调用 socket.close() 或忽略连接当前状态，大概率触发 Failed to execute 'close' on 'WebSocket': The connection is already closed 错误。

为什么 `onclose` 里再调用 `close()` 会报错

WebSocket 对象有明确的状态机：CONNECTING（0）、OPEN（1）、CLOSING（2）、CLOSED（3）。onclose 事件只会在状态变为 CLOSED 后触发 —— 此时连接已不可用，再调用 close() 就是无效操作。

浏览器规范强制要求：仅当状态为 OPEN 或 CLOSING 时，close() 才能成功执行
常见误写：socket.onclose = () => { socket.close(); } —— 这行代码在绝大多数情况下都会抛异常
Vue/React 组件中若在 beforeUnmount 或 useEffect cleanup 中未判断状态就关闭，也容易复现该问题

`event.code` 和 `event.reason` 怎么用才有效

关闭事件对象的 code 和 reason 是诊断真实原因的关键，但它们不总可靠：服务器未显式传参时，reason 可能为空；某些网络中断场景下 code 固定为 1006，无法区分是客户端主动关还是断网。

event.code === 1000：基本可认定为正常关闭（如用户退出、页面刷新前手动调用 close()）
event.code === 1001：通常对应标签页关闭、导航离开，此时 JS 执行环境即将销毁，不适合做重连
event.code === 1006：底层连接异常，大概率需重试；但注意它和 onerror 可能同时触发，优先以 onclose 为准
不要依赖 event.reason 做逻辑分支 —— 它是可选字段，Chrome/Firefox 实现不一致，服务端未设置时就是空字符串

如何安全地做关闭后清理与重连

核心原则：所有关闭相关操作必须基于连接当前状态，而不是仅靠事件触发时机。

WebSocket 8.18.2

WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。

下载

关闭前先检查：if (socket && socket.readyState === WebSocket.OPEN) { socket.close(); }
在 onclose 里只做清理（如清除定时器、清空消息队列），**不调用 close()**
重连逻辑应统一入口，比如封装成 reconnect() 函数，并加防抖（避免闪断时高频触发）
如果使用心跳机制，应在 onclose 后暂停心跳，等重连成功后再恢复，否则可能堆积未发送的心跳包