1. 描述
同源 的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间可以通过 BroadcastChannel 相互通信。
2. 构造函数
通过 BroadcastChannel 类传入的参数创建实例，传入的参数将指定通道名称，在同源环境下该通道可以相互通信，一个名称只对应一个通道。
// 将创建的实例挂载到window上，可以在浏览器全局访问该方法
// channelName即为指定的通道名称, 为字符串类型
window.broadcastChannel = new BroadcastChannel(channelName);
3. 通道名称
创建后的BroadcastChannel实例可以通过name属性来访问创建的通道名称。
// broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
console.log(broadcastChannel.name);
4. 方法使用
postMessage发送信息，以 message 事件的形式发送给每一个绑定到同一个通道名称的广播频道。
// broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
// message为Object类型的消息
broadcastChannel.postMessage(message);
onmessage监听通道信息，当频道收到信息时，将触发message事件，在事件的data属性中获取同一通道发送的信息数据。
// broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
// 可以通过增加监听事件，在event.data中获取到监听的广播信息。
broadcastChannel.addEventListener('message', (event) => {
console.log(event.data);
});
// broadcastChannel.onmessage = (event) => {};
close关闭通道通信，让其被垃圾回收（必要的步骤，浏览器浏览器没有其他方式知道频道不再被需要）。
// broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
// 当完成后，断开与频道的连接
broadcastChannel.close();
messageerror一条无法反序列化的消息时将会触发该事件。
// broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
// 可以通过增加监听事件，在event.data中获取到监听的无法反序列化的广播信息。
broadcastChannel.addEventListener('messageerror', (event) => {
console.log(event.data);
});
// broadcastChannel.onmessageerror = (event) => {};
5. 题外话
在vue项目使用时，可以在根组件上通过BroadcastChannel创建的对象监听message和播报postMessage同源同信道的广播信息，组件销毁时通过close关闭通信并垃圾回收。项目内部通过eventBus、父子事件触发、注入方式等其他方式处理信息传递和监听，这样收口在一处，形成逻辑闭环。