BroadcastChannel 是浏览器原生同源多上下文轻量级广播通信 API，支持毫秒级双向通信，需通过消息格式约定与 sender 标识实现双向交互，不保证有序与送达，适用于状态同步等弱一致性场景。
BroadcastChannel 是浏览器原生提供的、用于同源下多个浏览上下文（如标签页、iframe、Worker）之间进行轻量级消息广播的 API，它天然支持秒级甚至毫秒级的双向通信，无需轮询或长连接，使用简单且兼容性良好（Chrome 54+、Firefox 38+、Edge 79+、Safari 15.4+）。
创建和使用 BroadcastChannel 实例
每个 Channel 都通过唯一名称标识，同名 Channel 的所有实例自动组成一个通信组。只要同源，不同标签页中创建同名 Channel 即可互通：
- 在页面中新建 Channel：
const bc = new BroadcastChannel('my-channel'); - 监听消息：用
bc.addEventListener('message', e => console.log(e.data)) - 发送消息：调用
bc.postMessage(data)，data 可为任意结构化克隆对象（字符串、数字、数组、普通对象等，不支持函数、undefined、DOM 节点） - 关闭通道时建议调用
bc.close()，避免内存泄漏（尤其在单页应用路由切换时）
实现双向通信的关键逻辑
BroadcastChannel 本身是广播模型（一对多），要实现“双向”，需约定消息格式并携带 sender 标识（如随机 ID 或 tabId），接收方据此识别来源并决定是否响应：
- 发送方主动发请求消息：
bc.postMessage({ type: 'request', id: Date.now(), from: 'tab-123', payload: { action: 'get-status' } }) - 接收方判断是否需响应（例如只允许一个主控页响应），再回传：
bc.postMessage({ type: 'response', to: 'tab-123', data: { online: true } }) - 各端维护自己的唯一标识（可用
crypto.randomUUID()或Math.random().toString(36).substr(2, 9)），并在首次加载时广播上线事件
注意跨标签页状态同步的边界与限制
BroadcastChannel 不保证消息送达顺序，也不提供确认机制，因此不适合强一致性场景；但它足够胜任状态通知、指令广播、缓存失效等弱一致性需求：
立即学习“Java免费学习笔记（深入）”；
- 消息无序但实时：通常延迟在几毫秒到几十毫秒，极少超过 100ms
- 不跨域：仅限完全同源（协议 + 域名 + 端口），
http://a.com和https://a.com视为不同源 - 页面卸载前可发送最后一条消息（监听
beforeunload），但无法保证对方一定能收到 - 移动端 Safari 对 BroadcastChannel 支持较晚（iOS 15.4+），旧版本需降级为 localStorage + storage 事件模拟
补充：localStorage + storage 事件作为兼容方案
当需支持 Safari 15.4 之前版本时，可用 localStorage 模拟广播：
- 写入带时间戳和 channel 名的消息：
localStorage.setItem('bc-my-channel', JSON.stringify({ ts: Date.now(), data: ... })) - 监听
window.addEventListener('storage', e => { if (e.key === 'bc-my-channel') {...} }) - 注意：storage 事件不会触发当前文档，只通知其他同源窗口，且有 1~2 秒延迟，适合对实时性要求不高的场景
