useWebSocket是Vue3项目中最省心可靠的选择，内置重连、心跳、状态同步和自动清理，只需传URL和回调；手动封装易踩readyState异常、重连泄漏、心跳误判、卸载未清理等坑。
直接用 useWebSocket 函数封装 WebSocket，不是“够用就行”，而是当前 Vue3 项目中最省心、最可靠的选择——它已内置重连、心跳、状态同步和自动清理，你只需传 URL 和回调，其余交给 VueUse。
为什么不用自己写 new WebSocket() 封装类？
自己手写类看似可控，实际踩坑密集：
-
onopen触发后立刻发消息，但readyState可能仍是CONNECTING，导致send报错"Failed to execute 'send' on 'WebSocket': Still in CONNECTING state" - 手动实现重连时，若未清除旧定时器，
reconnectTimer会越积越多，内存泄漏+重复连接 - 心跳逻辑若没区分“发包”和“收包超时”，容易把服务端延迟误判为断连
- 组件卸载时忘记
ws.close()或取消监听，残留连接持续触发onmessage，引发 React/Vue 的状态更新错误
useWebSocket 的最小可用配置怎么写？
不依赖任何自定义类或全局单例，开箱即用：
import { useWebSocket } from '@vueuse/core'
const { data, status, send, close } = useWebSocket('wss://api.example.com/ws', {
// 自动重连：5 次，初始延迟 1s，上限 10s
autoReconnect: {
retries: 5,
delay: 1000,
maxDelay: 10000,
},
// 心跳：每 5s 发一次 ping，3s 内没收到 pong 就触发重连
heartbeat: {
message: 'ping',
interval: 5000,
pongTimeout: 3000,
},
// 连接成功后立即发送认证 token（常见于鉴权场景）
onConnected: (ws) => {
ws.send(JSON.stringify({ type: 'auth', token: localStorage.getItem('token') }))
}
})
注意：data 是响应式 ref，值为 MessageEvent 对象，需手动 JSON.parse(e.data)；如需自动解析，可加一层 computed 转换。
如何在多个组件间共享同一个 WebSocket 连接？
靠 useWebSocket 本身做不到——它每次调用都新建连接。真正共享连接，必须配合单例 + 状态管理：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 不要在每个组件里反复调用
useWebSocket(url) - 创建一个
websocket-manager.ts，内部用Map缓存不同url对应的连接实例 - 对外暴露
getSocket(url)，首次调用才初始化，后续复用已有实例 - 连接状态、消息广播、离线队列等逻辑，全部收敛到这个 manager 里，而非分散在组件中
简单说：函数封装解决“单连接可用性”，单例管理解决“多组件一致性”。二者不是替代关系，而是分层协作。
发送带 ID 的请求并匹配响应，该怎么做？
这是业务中最常被忽略的点：原生 WebSocket 不支持 request-response 模型，onmessage 是全局广播，无法天然绑定请求上下文。
解决方案是加一层“请求 ID 映射”：
// 发送时生成唯一 id，并存入 pending map
const requestId = Date.now().toString(36) + Math.random().toString(36).substr(2, 5)
pendingRequests.set(requestId, resolve)
ws.send(JSON.stringify({
id: requestId,
type: 'get-user',
payload: { userId: 123 }
}))
// 收到消息后，按 id 匹配并 resolve
onMessage((e) => {
const msg = JSON.parse(e.data)
if (msg.id && pendingRequests.has(msg.id)) {
pendingRequests.get(msg.id)(msg.payload)
pendingRequests.delete(msg.id)
}
})
这个逻辑不能塞进 useWebSocket 的回调里硬编码——它属于业务协议层，应在 manager 或业务 hook 中统一处理。否则每个页面都要重复写 ID 生成、map 管理、超时清理，很快失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
