Pinia 结合 WebSocket 实时更新全局状态的关键是将消息流接入响应式管道并由组件自动订阅消费；需封装单例连接管理器、结构化分发消息、按业务域拆分 Store、强化去重/降级/缓存等健壮性机制。
Pinia 结合 WebSocket 实时更新全局状态数据，关键不是“连上 WebSocket”，而是让消息流进 Pinia 的响应式状态管道，并由组件自动订阅、安全消费。整个过程要解决连接生命周期管理、消息结构化分发、状态一致性保障和防重/兜底等实际问题。
封装 WebSocket 为单例连接管理器
不要在组件 setup 或 onMounted 中直接 new WebSocket，否则容易重复连接、销毁失联或内存泄漏。应单独创建一个 wsManager.ts 模块，内部维护唯一实例，并暴露统一的 connect/disconnect/send 方法：
- 使用
let ws: WebSocket | null = null+ 判断逻辑确保单例 - 连接成功后存入 Pinia store（如
websocketStore.status = 'OPEN'），便于全局响应式感知 - 监听
onopen/onerror/onclose，主动同步状态并触发降级策略（如断线重试、fallback 轮询） - 页面卸载前（
beforeunload）调用ws.close()，避免服务端空发
消息解析后派发到 Pinia Store 模块
WebSocket 的 onmessage 回调里不做业务渲染，只做标准化路由：解析 JSON → 校验 type 字段 → 分发到对应 store 的 action：
WebSocket 8.18.2
下载
WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。
- 按业务域拆分 Pinia modules，例如
useNotifyStore()处理弹窗通知，useChartStore()管理图表数据，useMapStore()同步地图标记 - 每个 store 的 action 接收 payload，执行结构化更新：
this.list.push(payload)、this.byId[payload.id] = payload、或带时间戳去重逻辑 - 支持本地缓存补位：对关键数据（如订单状态），store 可结合 SWR 思路，在收到推送前先返回 stale 缓存，再用新数据覆盖
组件通过 store 订阅状态，驱动响应式渲染
业务组件不直接操作 WebSocket，而是像读取普通响应式数据一样使用 store：
- 使用
const notifyStore = useNotifyStore()，然后v-for="item in notifyStore.queue"渲染弹窗列表 - Leaflet 地图组件监听
mapStore.markers，自动增删 L.Marker 实例 - 借助
computed或$subscribe做副作用：比如当chartStore.data.length > 0时触发 ECharts resize - 避免响应式陷阱：对象用
reactive，原始值用ref；深层嵌套更新建议用patch或 replace 整个引用
补充健壮性机制
仅靠推送还不够，真实场景需防御网络抖动、重复投递、离线丢失等问题：
-
消息去重：前端维护
const seenIds = new Set<string>()，收到消息先查 ID 再处理，定时清理（如每 5 分钟seenIds.clear()） -
连接状态联动：store 中
status改变时，可控制 UI 显示「重连中…」或禁用发送按钮 -
发送队列：当
ws.readyState !== 1时，把待发消息暂存sendQueue: string[]，连接恢复后批量 flush - 错误隔离：某类消息解析失败（如字段缺失）不应阻塞后续消息，加 try/catch 并记录 warn 日志
