HTML5跨标签页实时同步需避免单页面WebSocket共享，可行方案有BroadcastChannel（现代浏览器轻量广播）和SharedWorker（真共享连接，Safari需降级兜底），服务端须按clientId精准路由并带版本号防覆盖，客户端更新须绑定本页上下文。

在HTML5中实现跨标签页的实时数据同步显示，不能靠单个页面内的WebSocket实例直接共享——因为每个标签页是独立的JavaScript上下文，window.ws这类全局变量无法互通。真正可行的方式是让所有标签页通过一个“统一出口”连接服务器，并借助浏览器原生机制协调状态与路由，确保数据准确分发到对应页面。

用BroadcastChannel做轻量级状态广播

适合现代浏览器（Chrome 54+、Firefox 58+、Edge 79+、Safari 15.4+），无需服务端改造，主要用于连接生命周期通知：

• 首个打开的标签页检测 localStorage 中无有效 owner，就创建 WebSocket 并标记自己为主控页，同时向 BroadcastChannel 发送 {type: 'connected', clientId: 'xxx'}
• 其他页面监听该频道，收到消息后不再新建连接，只注册本地消息处理器（如更新本页 DOM）
• 主控页关闭前发送 {type: 'disconnect'}；其余页面检测到后，触发新一轮 owner 竞选（基于时间戳写入 localStorage）

用SharedWorker统一代理WebSocket连接

这是最接近“真共享”的方案，所有同源标签页共用同一个 Worker 实例，WebSocket 仅由它维护：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 页面通过 navigator.serviceWorker.ready 或直接 new SharedWorker('worker.js') 连接
• Worker 内部创建并保活 WebSocket，负责重连、心跳、消息分发；各页面通过 port.postMessage() 通信
• 每页首次通信时带上唯一 clientId，Worker 收到服务端消息后按 clientId 转发，避免交叉污染
• 注意 Safari 支持较晚（iOS 16.4+/macOS 13.3+），需降级到 BroadcastChannel + 页面自建逻辑兜底

服务端配合：消息带上下文标识

无论前端用哪种协调方式，服务端都必须支持多端隔离，否则 A 标签页的操作会错误触发 B 标签页的 UI 更新：

立即学习“前端免费学习笔记（深入）”；

• 每个页面建立连接时生成唯一 clientId（推荐 crypto.randomUUID()），首次通信即注册到服务端会话表
• 服务端转发消息时，不盲目群发，而是按业务规则匹配目标 clientId 列表（例如：同一用户的所有标签页、或仅当前活跃页）
• 对状态类消息（如“节点拖动位置”），建议附带版本号或 timestamp，前端可比对是否为最新状态，避免旧消息覆盖新状态

客户端数据更新要绑定页面上下文

即使连接共享，DOM 操作仍必须限定在当前标签页内：

• 收到消息后，先校验 payload 中的 clientId 是否与本页一致，再执行渲染逻辑
• 避免直接操作全局状态（如 sharedStore.value = xxx），改用页面私有 store 或 useState/useReducer 等局部状态管理
• 批量更新 DOM，比如使用 document.createDocumentFragment() 或 requestIdleCallback() 控制渲染节奏，防止卡顿