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

一时失言乱红尘 2022-01-19 23:49 347阅读 0赞

## 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'`监听。

### 关闭 ###

可以看到，上述短短几行代码就可以实现多个页面间的广播通信，非常方便。而有时我们希望取消当前页面的广播监听：

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

bc.close();
    复制代码

两者是有区别的：

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

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

如果之后又再需要广播，则可以重新创建一个相同 name 的 Broadcast Channel。

## Demo 效果 ##

[可以戳这里查看在线 Demo >>][Demo]

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

## 兼容性如何？ ##

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

> 好在我们还有些其他方案可以作为补充（或者作为polyfill），其他的前端跨页面通信可以参考我的另一篇文章[《前端跨页面通信的方法》][Link 1]。

> 对文章感兴趣的同学欢迎关注 [我的博客 >> https://github.com/alienzhou/blog][_ https_github.com_alienzhou_blog]

[Demo]: https://link.juejin.im?target=https%3A%2F%2Falienzhou.github.io%2Fbroadcast-channel%2F
[Link 1]: https://juejin.im/post/5ca04406f265da30ac219ccc
[_ https_github.com_alienzhou_blog]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Falienzhou%2Fblog

发表评论取消回复

表情：

评论列表（有 0 条评论，347人围观）

还没有评论，来说两句吧...

相关阅读

相关 Broadcast variabies-广播变量

Broadcast variabies-广播变量：只能读不能改，在每一个executor 注意：广播变量不能过大，把小表广播出去，是解决数据倾斜很好的方法： im

太过爱你忘了你带给我的痛/ 2024年02月19日 15:07/ 0 赞/ 64 阅读

相关 Broadcast广播

注册BroadcastReceiver有两种方法：在AndroidManifest.xml文件中进行注册；在应用程序的代码中进行注册（推荐）。第一种方法，应用程序退出，系统

朴灿烈づ我的快乐病毒、/ 2024年02月17日 22:24/ 0 赞/ 25 阅读

相关 android中BroadCast广播

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。[点击跳转到教程][Link 1] 广播分一般广播和有序广播，广播接收者注册的话分静态注册

梦里梦外;/ 2023年01月03日 12:47/ 0 赞/ 238 阅读

相关 10分钟速览 C++20 新增特性

> [https://zhuanlan.zhihu.com/p/137646370][https_zhuanlan.zhihu.com_p_137646370] [http

电玩女神/ 2022年11月26日 01:56/ 0 赞/ 313 阅读

相关 Android广播—broadcast

1.广播Broadcast 在 Android 里面有各种各样的广播，比如电池的使用状态，电话的接收和短信的接收都会产生一个广播，应用程序开发者也可以监听这些广播并做出程序

墨蓝/ 2022年09月10日 14:27/ 0 赞/ 263 阅读

相关【Android】Broadcast广播机制总结

> 原文链接： [Android总结篇系列：Android广播机制][Android_Android] 1. Android广播机制概述 Android广播分为两个方面

Myth丶恋晨/ 2022年07月14日 23:58/ 0 赞/ 229 阅读

相关 Flink Broadcast 广播变量

Broadcast 广播变量：一句话解释，可以理解为是一个公共的共享变量，我们可以把一个dataset 数据集广播出去，然后不同的任务在节点上都能够获取到，这个数据在每个节点上

末蓝、/ 2022年05月28日 05:16/ 0 赞/ 296 阅读

相关 Android 广播机制---BroadCast

[Android 广播机制---BroadCast][Android _---BroadCast] [http://www.cnblogs.com/Terr

Bertha 。/ 2022年04月10日 09:52/ 0 赞/ 348 阅读

相关 Android Broadcast广播机制分析

> 基于Android 6.0的源码剖析，分析android广播的发送与接收流程。 framework/base/services/core/java/com/an

╰半橙微兮°/ 2022年03月30日 08:14/ 0 赞/ 561 阅读

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

Broadcast Channel 是什么？在前端，我们经常会用`postMessage`来实现页面间的通信，但这种方式更像是点对点的通信。对于一些需要广播（让所有页面

一时失言乱红尘/ 2022年01月19日 23:49/ 0 赞/ 348 阅读