组件间通讯复杂时，可以考虑Broadcast Channel API

前言

当我们需要在同一个源的浏览器的不同窗口实现数据通讯时，有很多种方式。
假如页面使用的是vue或者react框架，不同的窗口页面应该是各种组件组成的。组件间的通信，大家都知道，子组件传递数据给父组件，常用的方法是用事件回调进行处理。父组件传递数据给子组件，常用的方法是通过props来传递给子组件。

不过，假如碰到兄弟组件的数据传递或者爷孙之间的数据传递等等。还按照上面的方式的话，是特别麻烦的。

刚好，Broadcast Channel API 可以实现同 源 下浏览器不同窗口，Tab 页，frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。这个广播频道API就完美解决了上面那些问题。

Broadcast Channel 接口

创建或者加入某个频道

BroadcastChannel 接口非常简单。通过创建一个 BroadcastChannel 对象，一个客户端就加入了某个指定的频道。只需要向 构造函数 传入一个参数：频道名称。如果这是首次连接到该广播频道，相应资源会自动被创建。
如下：

// 连接到广播频道
var bc = new BroadcastChannel('test_channel');

发送消息

创建一个频道之后，就可以向需要数据的窗口发送信息。
发送信息很简单，就调用BroadcastChannel对象上的message事件即可。发送的内容可以是任意的数据类型。可以对象，数组，字符串等等。需要什么传什么。只要接收那边对应着拿就行。

如下：

// 发送简单消息的示例
bc.postMessage('This is a test message.');

接收信息

发送完信息之后，就在需要接收数据的地方进行接收信息就行。

当消息被发送之后，所有连接到该频道的 BroadcastChannel 对象上都会触发 message 事件。该事件没有默认的行为，但是可以使用 onmessage 事件处理程序来定义一个函数来处理消息。

如下：

// 简单示例，用于将事件打印到控制台
bc.onmessage = function (ev) { console.log(ev); }

或者：

// 简单示例，用于将事件打印到控制台
bc.addEventListener('message', (ev) => {
  console.log(ev);
});

断开频道或者关闭频道

不需要用到时，我们就可以关闭它。
通过调用 BroadcastChannel 对象的 close() 方法，可以离开频道。这将断开该对象和其关联的频道之间的联系，并允许它被垃圾回收。

如下：

// 断开频道连接
bc.close()

Broadcast Channel对象

构造函数 BroadcastChannel()

创建一个链接到命名频道的对象。

实例属性

只有一个频道名称：BroadcastChannel.name

实例方法

1. close()

关闭频道

var str = channel.close();

// 连接到指定频道
var bc = new BroadcastChannel('test_channel');

// 其他操作 (如：postMessage, …)

// 当完成后，断开与频道的连接
bc.close();

2. postMessage()

该频道下发一条信息。

var str = channel.postMessage(object);

事件

message

当频道收到一条消息时，会在关联的 BroadcastChannel 对象上触发 message 事件。

如下：

addEventListener('message', (event) => { })
onmessage = (event) => { }

messageerror

当频道收到一条无法反序列化的消息时会在 BroadcastChannel 对象上触发 messageerror 事件。

如下就是监听messageerror事件的例子：

const bc = new BroadcastChannel('example-channel');

bc.addEventListener('message', (event) => {
  received.textContent = event.data;
});

bc.addEventListener('messageerror', (event) => {
  console.error(event);
});

使用 onmessage 和 onmessageerror 事件处理程序来实现相同效果：

const bc = new BroadcastChannel('example-channel');

bc.onmessage = (event) => {
  received.textContent = event.data;
};

bc.onmessageerror = (event) => {
  console.log(event);
};

总结

以上就是关于Broadcast Channel API的详细用法。

Broadcast Channel API 是一个非常简单的 API，内部包含了跨上下文通讯的接口。它可用于检测同源网站环境中其他浏览器选项卡下的用户操作，例如当用户登录到帐户时。没有定义消息传输协议，故不同上下文中的不同文档需要自己实现它：规范没有对此提出协议或要求。