BroadcastChannel同步器 - 同源跨标签页通信

BroadcastChannel API 是一个浏览器原生接口，允许同源的不同浏览上下文（标签页、窗口、iframe、Web Worker）之间进行实时消息广播通信。它基于发布/订阅模式，任何订阅了同一频道的上下文都可以接收消息。

核心特点：发送者不会收到自己发送的消息，这与 WebSocket 的广播模式类似。API 简单易用，仅需创建频道、发送消息、监听消息三步即可完成通信。

BroadcastChannel API 在主流现代浏览器中得到广泛支持：

• ✅ Chrome 54+（2016年起）
• ✅ Firefox 38+（2015年起）
• ✅ Edge 79+
• ✅ Safari 15.4+（2022年起，较晚支持）
• ✅ Opera 41+
• ⚠️ 覆盖全球约96%+用户，对于老旧浏览器可考虑使用localStorage事件作为降级方案

同源要求：BroadcastChannel 严格遵循同源策略。只有协议、域名、端口完全相同的上下文才能通过同一频道通信。

隔离说明：

• 普通模式与隐私/无痕模式完全隔离
• 不同浏览器存储分区（如Chrome的不同Profile）之间隔离
• 跨域iframe无法与父页面通过BroadcastChannel通信

数据安全：数据仅在客户端内存中传输，不经过服务器。使用结构化克隆算法，函数和DOM节点无法传递，天然防止XSS攻击向量通过消息传播。

• 🎨 主题同步：一个标签页切换暗色/亮色主题，所有标签页实时同步
• 🔐 登录状态广播：用户在一个标签页登录/登出，其他标签页自动更新UI
• 🛒 购物车同步：多标签页浏览时保持购物车数据一致
• 💬 跨标签页聊天：同一应用的不同标签页之间即时消息
• 📊 实时数据面板：多个监控面板标签页同步刷新
• 🔔 全局通知：应用级事件通知所有打开的标签页
• 🎵 音乐播放控制：在一个标签页控制音乐，其他标签页显示播放状态

Q：为什么我发送的消息自己看不到？
A：这是 BroadcastChannel 的设计特性——发送者不会收到自己广播的消息。你需要在另一个标签页中打开同一页面才能看到接收效果。

Q：如何检测其他标签页是否还在线？
A：BroadcastChannel 本身不提供标签页存活检测。需要自行实现心跳机制（如本工具所做的），定期广播心跳消息，超时未收到则认为离线。

Q：能发送多大数据？
A：理论上可以发送较大的数据（受结构化克隆算法和内存限制），但建议保持在几百KB以内以保证性能。大文件应使用 IndexedDB + 通知机制。

Q：关闭标签页时需要做什么？
A：建议在 beforeunload 事件中发送告别消息并调用 channel.close()，让其他标签页及时感知到离线。

Q：能否跨域通信？
A：不能。跨域通信需要使用 postMessage API 配合 iframe 或其他方案。