全局状态处理 WebSocket 实时数据需封装连接管理器并接入 Pinia/Vuex，通过消息分类路由、SWR 缓存补位及错误状态同步，实现可响应、可追踪、可复用的状态流。
全局状态处理 WebSocket 实时数据，核心在于把“被动接收”转化为“可响应、可追踪、可复用”的状态流。不是简单地在组件里监听 onmessage，而是让消息进入统一的状态管道，再由视图按需订阅和渲染。
用状态管理器承接 WebSocket 消息流
直接在每个页面写 ws.onmessage 容易重复、难维护、状态散落。推荐将 WebSocket 封装为一个独立的连接管理器（如 WSManager），并让它与 Vuex（Vue2）或 Pinia（Vue3）打通：
- WSManager 在 onmessage 中解析数据后，不直接更新 DOM，而是调用 store.dispatch('notify/appendMessage', payload)
- store 内定义 modules（如 notify、alarm、chartData），各自维护结构化状态，并支持时间戳去重、按类型过滤、本地缓存等逻辑
- 组件通过 mapState 或 useStore() 订阅对应字段，触发响应式更新，图表、弹窗、列表自动重绘
结合 SWR 实现“缓存 + 推送”双保障
对需要强一致性的数据（如用户信息、订单状态），仅靠 WebSocket 推送可能丢失连接期间的变更。SWR 可补位：
WebSocket 8.18.2
下载
WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。
- 页面初始化时用 useSWR('/api/user') 获取全量快照，展示可靠初始态
- WebSocket 连接建立后，监听 USER_UPDATE 类型消息，收到即调用 mutate('/api/user', newUser, { revalidate: false })
- 这样既避免轮询开销，又保证 UI 始终反映最新且完整的业务状态
消息分类路由与组件级响应
不是所有消息都该全局广播。按 type 字段做轻量路由，提升性能和可维护性：
- 定义清晰的消息协议：{ type: 'ALERT_POPUP', payload: { title, content, level } }
- 在全局消息处理器中 switch(type)，只向关心该类消息的模块或组件派发（例如 alertStore.commit('show', payload)）
- 告警弹窗组件 watch alertStore.state.activeAlert，有值则 mount，关闭后 clear，不干扰其他模块
错误与重连状态也应纳入全局状态
连接断开、重试中、认证失败等非业务消息，本身也是关键状态：
- 在 WSManager 的 onclose/onerror 中同步更新 store.state.ws.status = 'reconnecting'
- UI 层可据此显示“重连中…”提示，禁用发送按钮，或降级为轮询模式
- 状态集中后，调试、埋点、自动化测试都更可控
