WebSocket需分两层实现全局状态管理：一是SharedWorker统一维护单例连接并跨页面共享，二是单例Store响应式同步消息数据；避免多连接、状态割裂及直接挂载实例等常见陷阱。
WebSocket 本身不是状态管理工具，但它承载的实时数据需要被多个组件一致、高效地消费。真正实现“全局状态管理 + 实例共享”，必须分两层解决：一是 WebSocket 连接的**单例复用**，二是消息数据的**响应式状态同步**。直接在每个组件里 new WebSocket 或调用 useWebSocket，会导致多连接、状态割裂、重连逻辑重复等问题。
用 SharedWorker 统一维护 WebSocket 实例
这是目前最可靠、兼容性好、真正实现“单连接跨页面/组件共享”的方案。它把 WebSocket 从 UI 线程中抽离，由一个独立的 SharedWorker 全权管理：
- 所有同源页面（含不同 tab、iframe）通过
new SharedWorker('ws-manager.js')获取同一个 Worker 实例 - Worker 内部只创建一次
new WebSocket(url)，并负责连接、重连、心跳、消息广播 - 各页面通过
worker.port.postMessage()发送指令（如 send、subscribe），Worker 收到后统一转发；收到服务端消息时，主动port.postMessage()广播给所有活跃页面 - Worker 监听
connect/disconnect事件，统计活跃端口数，最后一页关闭时自动关闭 WebSocket，避免资源泄漏
用单例 Store 管理 WebSocket 数据状态
SharedWorker 负责连接和通信，但组件需要的是可响应、可订阅的数据。这时需配合一个全局状态容器（如基于 class 的单例 Store）：
- 定义一个
WebSocketStore类，内部用 Map 或 reactive 对象缓存各类业务数据（如chatMessages、onlineUsers） - Worker 通过
postMessage将原始消息推送到页面主线程，页面端统一由 Store 的handleMessage()方法解析、归类、更新状态 - Store 提供
subscribe(topic, cb)和getState(topic)接口，组件按需监听特定数据流，避免全量响应 - Store 可结合 Vue 的
ref/ React 的useReducer或 Zustand 等库，让状态变更自动触发视图更新
避免常见陷阱
很多项目试图靠 hook 或 context “共享” WebSocket，结果仍出现连接冗余或状态不一致，关键在于没厘清职责边界：
立即学习“Java免费学习笔记（深入）”；
- 不要在多个组件里各自调用 useWebSocket——VueUse 或类似 hook 每次调用都新建连接，违背单实例目标
- 不要把 WebSocket 实例直接挂到 window 或全局变量——无法自动清理、无生命周期管理、跨 iframe 失效
- 不要在 Store 里直接保存 WebSocket 实例——WebSocket 是不可序列化对象，且绑定执行上下文，无法跨线程共享
-
消息路由必须带标识——页面发送请求时附带
requestId或pageId，Worker 广播时带上来源，组件才能区分“这是谁发的”“这是我的响应”
轻量替代方案：单页内共享（无 SharedWorker）
若只在单个 SPA 内部共享（不跨 tab），可用更轻量方式：
- 写一个全局 WebSocket 工厂函数，首次调用时创建实例并缓存，后续返回同一引用
- 搭配状态库（如 Pinia / Zustand）创建专用 store，暴露
sendMessage、onMessage、connected等 API - 在 store 初始化时建立连接，并在
onUnmounted或useEffect cleanup中取消监听，但不主动 close（留给 store 统一管理） - 注意：此方案无法解决多 tab 场景，且页面刷新后连接丢失，需配合 localStorage 恢复会话状态
