直接在组件内 new WebSocket 不可行，因卸载中断、onmessage 覆盖、重连失控、心跳缺失；健壮封装需实例持久化、状态响应式、可控重连、心跳保活、安全分发。
直接在组件里 new WebSocket 是行不通的——连接会随组件卸载而中断、多个组件同时使用会覆盖 onmessage、重连逻辑失控、心跳缺失导致静默断连。真正可复用的封装，必须抽离出独立生命周期、统一状态管理、自动清理，并暴露简洁接口。
核心设计原则
无论 React 还是 Vue，一个健壮的 WebSocket Hook 都要解决五个关键问题：
- 实例持久化：用 useRef（React）或 ref（Vue）持有 socket 实例，避免重复创建和渲染干扰
- 状态响应式：连接状态（connecting/open/closed）、错误信息、最后活跃时间需可被组件消费
- 自动重连可控：区分手动关闭与异常断开；采用指数退避策略（如 1s → 2s → 4s），并设最大重试次数（建议 5–10 次）
- 心跳保活：定时发 ping，服务端回 pong；超时未响应则主动 close 并触发重连
- 消息分发安全：支持按类型注册 handler（如 on('order', cb)），允许多次调用不覆盖，内部维护 handler 列表
React 中 useWebSocket Hook 写法要点
不能只靠 useState + useEffect，必须结合 useRef 和 useCallback：
React 组件生成器
下载
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
- 用 useRef 存 socket 实例和重连定时器，确保跨渲染一致
- 用 useCallback 包裹 send / close 方法，防止子组件重复绑定或闭包过期
- onclose 回调里检查 isManualClose.current 标志，仅非手动断开才启动重连
- send 前必须判断
wsRef.current?.readyState === WebSocket.OPEN，别依赖缓存的状态变量 - 组件卸载时，在 useEffect 清理函数中 clearTimeout + removeEventListener + close()
Vue 3 中 useWebSocket Composable 写法要点
遵循 Composition API 规范，返回响应式状态与操作方法：
- 用 ref 管理 isConnected、reconnectCount、status 等简单状态
- 用 reactive 维护 handlers 对象（{ open: [], message: [], error: [] }），支持多监听器注册
- 心跳用 setInterval 启动，保存 timer ID 到 ref，onUnmounted 时 clearInterval
- onMessage 中过滤掉 ping/pong 心跳帧，再分发给所有 message handler
- 提供 on(type, cb) 方法，内部 push 到 handlers.message，解耦业务逻辑
统一对外接口规范
生产环境 SDK 应只暴露四个最小必要方法，隐藏重连、心跳、序列化等细节：
- connect()：返回 Promise，成功 resolve(socket)，失败 reject(error)
- send(data)：自动 JSON.stringify，校验 readyState，失败静默或 warn（不 throw）
- on(type, handler)：按消息 type 订阅，支持多次调用，内部去重或追加
- close()：清除所有定时器、移除事件监听、调用 socket.close()、重置内部状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
