Vue3集成WebSocket需手动管理生命周期、防重复绑定、校验readyState、实现重连与错误抑制，并统一JSON解析和类型校验，避免内存泄漏与消息丢失。
Vue3 集成 WebSocket 不需要第三方库也能跑通，但直接用原生 WebSocket 容易掉坑——比如组件卸载后连接没关、onmessage 重复绑定、readyState 判断失效、重连逻辑缺失。核心不是“能不能连上”，而是“连得稳、断得清、收得准”。
原生 WebSocket 在 setup 中必须手动管理生命周期
Vue3 的 onUnmounted 是唯一可靠的清理时机，但很多人只在 onMounted 里创建实例，忘了关连接或解绑事件。
- 每次
new WebSocket(url)都会新建 TCP 连接，不.close()就会堆积 socket 句柄（尤其在路由频繁切换时） -
socket.onmessage = () => {}是赋值操作，多次执行会覆盖前一个；而socket.addEventListener('message', ...)是追加，不手动removeEventListener会导致重复触发 -
socket.readyState有 0–3 四种状态，send前只判断=== WebSocket.OPEN不够，还要防undefined或连接中（CONNECTING）状态
正确做法是：在 ref 里存实例，在 onUnmounted 里检查 socket.value?.close()，且所有事件监听统一用 addEventListener + 保存 handler 引用以便移除。
useWebSocket hook 必须封装重连与错误抑制
生产环境里，网络抖动、服务重启、NAT 超时都会导致 onclose 触发，但默认不会自动重连——你得自己写逻辑，而且不能无限制重试。
立即学习“前端免费学习笔记（深入）”；
- 重连间隔建议从 1s 开始指数退避（1s → 2s → 4s → 8s），避免雪崩式重连请求打爆服务端
-
onerror事件不可靠，很多底层错误（如 DNS 失败、TLS 握手失败）根本不会触发它，真正能捕获异常的是onclose的event.code和event.reason - 首次连接失败时，
socket实例可能已销毁，再次new WebSocket前要清空旧引用，否则onopen可能绑定到已失效对象
示例关键片段：
const connect = () => {
if (socket.value?.readyState === WebSocket.OPEN) return;
socket.value = new WebSocket(url);
socket.value.onopen = () => { /* ... */ };
socket.value.onclose = (e) => {
if (e.code !== 1000) { // 1000 是正常关闭
setTimeout(connect, retryDelay.value);
retryDelay.value = Math.min(retryDelay.value * 2, 30000);
}
};
};
消息收发必须做 JSON 安全解析与类型校验
socket.send() 只接受 string 或 ArrayBuffer，而 event.data 默认是 string，但服务端可能发二进制帧（如 protobuf），或返回非 JSON 字符串（如纯文本心跳包）。
- 不做
try/catch包裹JSON.parse(event.data)，一次非法数据就会让整个onmessage流程中断，后续消息收不到 - 服务端若未规范返回结构（例如漏了
type字段），前端直接解构赋值会报Cannot destructure property 'xxx' of undefined - 大消息（>1MB）可能被浏览器分片发送，
event.data会是Blob类型，需用event.data.text()或event.data.arrayBuffer()显式读取
推荐收消息时统一处理：
socket.value.onmessage = (event) => {
let data;
try {
data = typeof event.data === 'string'
? JSON.parse(event.data)
: event.data; // 留给二进制处理分支
} catch (e) {
console.warn('Invalid JSON from WebSocket:', event.data);
return;
}
if (data && typeof data === 'object' && 'type' in data) {
messages.value.push(data);
}
};
不要在 Pinia store 里直接 new WebSocket
Pinia 是状态容器，不是连接管理器。把 WebSocket 实例挂在 store 里，看似方便全局访问，实则埋下严重隐患：
- store 是单例，多个组件同时使用会共享同一 socket，但每个组件有自己的生命周期，谁该负责
close？ - 服务端推送的通用消息（如系统通知）可以放 store，但业务相关连接（如聊天室、协作白板）必须按需建立、按需关闭
- store 里无法访问
onMounted/onUnmounted，也就无法做连接清理，容易内存泄漏
正确分工：hook（如 useWebSocket）管连接与通信，store 只存消息列表、连接状态等派生数据；组件内调用 hook，再把 messages 或 isConnected 传给 store 的 action 同步。
最常被忽略的一点：WebSocket 地址协议必须匹配当前页面协议。HTTP 页面用 ws://，HTTPS 页面必须用 wss://，否则现代浏览器直接拒绝连接，控制台只报 “Error in connection establishment”，不提示协议不匹配。
