BroadcastChannel 如何实现多个标签页通信？适合哪些场景？

简化版

BroadcastChannel 可以让同源的多个标签页、iframe、Worker 之间广播消息，适合登录状态同步、主题切换、购物车更新、跨标签页通知等场景。它只能同源通信，消息不持久，页面关闭就收不到，因此关键状态仍要有服务端或持久存储兜底。

详细版

使用方式：

创建同名 channel。
一个页面调用 postMessage。
其他同源上下文监听 message。
不用时调用 close。

适合：

一个标签页退出登录，其他标签页同步退出。
用户切换深色模式，多标签页同步。
购物车数量、草稿状态变化提醒。
避免同一账号多标签页重复弹通知。

注意点：

只支持同源。
消息不会持久化。
不能替代服务端实时通信。
要处理重复和乱序。

完整版教学

一、多标签页为什么需要通信

用户经常同时打开一个网站的多个标签页。一个标签页退出登录，另一个标签页如果仍显示已登录，就会造成状态不一致；一个标签页切换主题，另一个标签页不变，也会显得割裂。BroadcastChannel 就是为同源上下文之间的轻量广播而生。

它比 localStorage 的 storage 事件更直接，也比 Service Worker 消息更轻量。只要同源并使用同一个频道名，就能互相收到广播。

Tab A 退出登录
  → channel.postMessage({ type: 'LOGOUT' })
  → Tab B / Tab C 收到消息并清理状态

二、基本用法很简单

创建一个频道，监听消息，发送消息即可。频道名相同的同源页面会收到消息。通常发送方自己不会收到自己发出的消息，所以本页面状态也要自己更新。

const channel = new BroadcastChannel('app-state')

channel.onmessage = (event) => {
  if (event.data.type === 'LOGOUT') {
    logoutLocal()
  }
}

channel.postMessage({ type: 'LOGOUT', at: Date.now() })

页面卸载或不再需要时调用 channel.close()，避免无用监听残留。

三、它和 localStorage 事件有什么区别

localStorage 的 storage 事件也能做多标签页同步：一个标签页写 storage，其他标签页收到事件。但它本质是借存储触发通知，会污染存储，也不适合高频消息。BroadcastChannel 是专门消息通道，语义更清晰。

方案	优点	缺点
BroadcastChannel	语义清晰、可传对象	不持久，兼容性需确认
storage 事件	兼容较广	依赖存储写入，语义绕
SharedWorker	可集中管理连接	实现复杂
服务端 WebSocket	可跨设备	成本更高

四、消息不持久，所以要有状态兜底

BroadcastChannel 只广播当前在线上下文。Tab B 如果还没打开，Tab A 发出的消息它收不到。用户刷新页面后，历史消息也不会重放。因此它适合同步“正在打开的页面”，不适合作为状态事实来源。

例如退出登录可以同时清理 cookie/session，BroadcastChannel 只是让已打开页面立刻响应。新打开页面仍应通过服务端 session 判断是否登录，而不是依赖之前是否收到过 LOGOUT 消息。

五、要处理重复和乱序

虽然 BroadcastChannel 很轻量，但业务层仍可能出现重复消息或顺序问题。比如多个标签页同时刷新购物车数量，消息到达顺序可能和后端最终状态不一致。最好用版本号、时间戳或直接重新拉取权威状态。

数字例子：Tab A 广播购物车数量 3，Tab B 随后广播数量 4。如果 Tab C 先收到 4 后收到 3，直接覆盖会显示旧数量。带版本号后只接受较新版本即可。

if (msg.type === 'CART_UPDATED' && msg.version > cartVersion) {
  cartVersion = msg.version
  cartCount = msg.count
}

六、不要用它替代跨设备实时同步

BroadcastChannel 只在同一浏览器同源上下文间通信。用户手机和电脑之间、不同浏览器之间、不同域名之间都不通。如果要做跨设备同步，仍然需要服务端、WebSocket、轮询或推送。

它最好的定位是“本机多页面即时协调”。比如避免重复刷新 token、同步退出登录、减少多标签页重复弹窗。把边界说清楚，才不会误用。

记忆钩子：BroadcastChannel 是“同源多标签页微信群”，在线的人能收到，没进群的人不会补消息。

七、常见误区与追问

误区：BroadcastChannel 可以跨域通信。 它只允许同源上下文通信，跨域要用 postMessage 等方案。
误区：消息会被持久保存。 它不是队列，页面没打开或已关闭就收不到历史消息。
误区：收到广播就一定是最终状态。 最终事实仍应来自服务端或持久存储，广播只是通知。
追问：退出登录怎么同步多个标签页？ 清理服务端会话或本地凭据后广播 LOGOUT，其他页收到后更新 UI。
追问：购物车数量乱序怎么办？ 消息带版本号，或收到通知后重新请求服务端最新数量。
追问：和 postMessage 有什么不同？ postMessage 面向指定窗口通信，BroadcastChannel 面向同源频道广播。

八、加强记忆

BroadcastChannel 用“同源、广播、非持久、状态兜底”来记。它很适合多标签页之间同步登录、主题、购物车和通知，但不是跨设备实时系统，也不是权威存储。关键状态仍要靠服务端或缓存，广播只负责让已打开页面快点知道。

简化版

详细版