无需登录 数据私有 本地保存

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

12
0
0
0
BroadcastChannel 同步器
已连接
1 个标签页
发送消息
本标签页: -
打开多个标签页并加入同一频道,即可看到实时通信效果。
在线标签页
1 在线
本标签页
心跳检测中,离线超时:12秒
消息日志 0
暂无消息,发送第一条消息吧
BroadcastChannel 知识点 & 常见问题

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

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

特性BroadcastChannellocalStorage 事件SharedWorker
通信方向双向广播单向通知(写→其他)双向
数据量较大(结构化克隆)仅字符串任意
实时性⚡ 即时同步触发但有延迟感⚡ 即时
发送者接收❌ 不接收自己❌ 不触发自己✅ 可接收
复杂度⭐ 简单⭐ 简单⭐⭐⭐ 复杂
适用场景实时同步、聊天、状态广播简单状态同步复杂共享状态

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 或其他方案。