【3分钟速览】前端广播式通讯：Broadcast Channel

Broadcast Channel 是什么？

在前端，咱们常常会用postMessage来实现页面间的通讯，但这种方式更像是点对点的通讯。对于一些须要广播（让全部页面知道）的消息，用postMessage不是很是天然。Broadcast Channel 就是用来弥补这个缺陷的。

顾名思义，Broadcast Channel 会建立一个全部同源页面均可以共享的（广播）频道，所以其中某一个页面发送的消息能够被其余页面监听到。

下面就来速览一下它的使用方法。

如何使用？

Broadcast Channel 的 API 很是简单易用。

建立

首先咱们会使用构造函数建立一个实例：

const bc = new BroadcastChannel('alienzhou');
复制代码

能够接受一个DOMString做为 name，用以标识这个 channel。在其余页面，能够经过传入相同的 name 来使用同一个广播频道。用 MDN 上的话来解释就是：

There is one single channel with this name for all browsing contexts with the same origin.

该 name 值能够经过实例的.name属性得到

console.log(bc.name);
// alienzhou
复制代码

监听消息

Broadcast Channel 建立完成后，就能够在页面监听广播的消息：

bc.onmessage = function(e) {
    console.log('receive:', e.data);
};
复制代码

对于错误也能够绑定监听：

bc.onmessageerror = function(e) {
    console.warn('error:', e);
};
复制代码

除了为.onmessage赋值这种方式，也可使用addEventListener来添加'message'监听。

发送消息

Broadcast Channel 实例也有一个对应的postMessage用于发送消息：

bc.postMessage('hello')
复制代码

关闭

能够看到，上述短短几行代码就能够实现多个页面间的广播通讯，很是方便。而有时咱们但愿取消当前页面的广播监听：

• 一种方式是取消或者修改相应的'message'事件监听
• 另外一种简单的方式就是使用 Broadcast Channel 实例为咱们提供的close方法。

bc.close();
复制代码

二者是有区别的：

取消'message'监听只是让页面不对广播消息进行响应，Broadcast Channel 仍然存在；而调用close方法这会切断与 Broadcast Channel 的链接，浏览器才可以尝试回收该对象，由于此时浏览器才会知道用户已经不须要使用广播频道了。

在关闭后调用postMessage会出现以下报错

若是以后又再须要广播，则能够从新建立一个相同 name 的 Broadcast Channel。

Demo 效果

能够戳这里查看在线 Demo >>

下面是 Broadcast Channel Demo 的演示效果：

兼容性如何？

Broadcast Channel 是一个很是好用的多页面消息同步 API，然而兼容性却不是很乐观。

好在咱们还有些其余方案能够做为补充（或者做为polyfill），其余的前端跨页面通讯能够参考个人另外一篇文章《前端跨页面通讯的方法》。

对文章感兴趣的同窗欢迎关注 个人博客 >> https://github.com/alienzhou/blog