WebSocket连接失败时onerror不触发，是因为多数失败发生在HTTP握手阶段（如400/401/404），此时仅触发onclose（code常为1006），需结合event.code和reason判断；同步错误（DNS失败、URL错误）则根本不会进入onerror，须用try/catch捕获。
WebSocket连接失败时，onerror 不触发？别急着改重连逻辑
多数人遇到连接失败第一反应是“重连没起作用”，但实际常因 WebSocket 实例在 new WebSocket(url) 阶段就抛出异常（比如 DNS 解析失败、CORS 拒绝、URL 格式错误），根本没走到 onerror 回调。此时 onopen、onerror、onclose 全部不会执行。
实操建议：
- 用
try/catch包裹new WebSocket(url)，捕获同步错误 - 检查
url是否含协议（必须是wss://或ws://），避免写成http:// - 若用代理或 Nginx 转发，确认已透传
Upgrade和Connection头，否则服务端直接返回 400 或 502，前端只看到failed: Error in connection establishment
心跳包用 ping/pong 还是自定义 heartbeat 消息？
浏览器 WebSocket API 不暴露底层 ping/pong 帧控制权，ws.readyState === WebSocket.OPEN 仅表示连接建立成功，不保证链路活跃——中间 NAT、防火墙可能静默丢弃空闲连接。所以必须自己发心跳。
实操建议：
- 服务端支持标准
ping/pong时，前端无需手动发；但绝大多数 Web 服务（如 Express + ws、Spring Boot）默认不自动响应ping，需显式监听ping事件并调用ws.pong() - 更通用的做法：约定 JSON 心跳消息，如
{ "type": "heartbeat" }，由前后端共同维护定时器（建议 25s 发一次，超时 45s 断连） - 注意：心跳发送前务必检查
ws.readyState === WebSocket.OPEN，否则会触发onerror或静默失败
重连策略里，setTimeout 和 setInterval 混用容易内存泄漏
常见写法是“断开后 setTimeout 重连，连上后 clearTimeout”，但如果重连过程中用户刷新页面、或组件卸载（React/Vue），未清除的定时器仍会执行，导致新建 WebSocket 实例后又触发旧重连逻辑，出现多个并发连接。
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
实操建议：
- 所有定时器 ID 存入实例变量（如
this.reconnectTimer），每次新建连接前先clearTimeout(this.reconnectTimer) - 使用指数退避：首次延迟 1s，失败后 2s、4s、8s…上限设为 30s，避免雪崩式重连请求
- 提供
destroy()方法，统一清理定时器、移除事件监听、调用ws.close()，并在组件useEffect的 cleanup 或beforeUnmount中调用
React 中封装 Hook 时，useRef 存 WebSocket 实例比 useState 更安全
useState 触发更新会引发组件重渲染，而 WebSocket 是可变对象，若把它放进 state，每次 setState 都可能生成新引用，导致依赖它的 effect 重复执行；更严重的是，ws.onmessage 回调里如果调用了 setState，可能因闭包捕获旧状态引发竞态。
实操建议：
- 用
const wsRef = useRef(null)存储实例，确保整个生命周期内唯一引用 - 事件回调（
onopen、onmessage）中需通过wsRef.current访问，避免闭包陷阱 - 发送消息统一走封装方法（如
send(data)），内部判断wsRef.current?.readyState === WebSocket.OPEN，不直接暴露ws.send
真正难的不是实现心跳或重连，而是让它们在页面切换、网络抖动、服务重启、多标签页共存等真实场景下不互相干扰——每个定时器是否被正确清理，每次 send 是否有连接兜底，每条消息是否带了唯一 traceId 便于后端对账，这些细节才决定封装库能不能进生产环境。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
