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

Bmob 发布于2019-08-26 13:40 / 3033人阅读

摘要：是什么在前端，我们经常会用来实现页面间的通信，但这种方式更像是点对点的通信。而有时我们希望取消当前页面的广播监听一种方式是取消或者修改相应的事件监听另一种简单的方式就是使用实例为我们提供的方法。

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 >>

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

兼容性如何？

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

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

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

混合云服务器托管 php给时间加3分钟 linux广播通信 30分钟云服务器 Broadcast

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109302.html

面试官：前端跨页面通信，你知道哪些方法？

摘要：一同源页面间的跨页面通信以下各种方式的在线可以戳这里浏览器的同源策略在下述的一些跨页面通信方法中依然存在限制。因此，我们先来看看，在满足同源策略的情况下，都有哪些技术可以用来实现跨页面通信。引言在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个独立的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些独立的Tab页面之间同步页面的数...

DataPipeline 2019-08-26 13:40 评论0 收藏0
Laravel5.1 事件广播(Event Broadcasting)

摘要：本文会用简单的代码展示一个事件广播的过程。定义一个被广播的事件根据文档的说明，想让事件被广播，必须让类实现一个接口，并且实现一个方法。返回一个数组，包含了事件发送到的频道。触发事件打开另一个页面。事件广播简介 Laravel 5.1 之中新加入了事件广播的功能，作用是把服务器中触发的事件通过websocket服务通知客户端，也就是浏览器，客户端js根据接受到的事件，做出相应动作...

yiliang 2019-06-27 11:16 评论0 收藏0
Broadcast 使用详解

摘要：静态注册广播的方法动态注册广播在中动态注册广播，通常格式如下动态注册广播动态注册监听灭屏点亮屏幕的广播在广播中动态注册广播请注意一定要使用，防止为空，引起空指针异常。绑定模式此模式通过绑定组件等调用启动此服务随绑定组件的消亡而解除绑定。 showImg(https://segmentfault.com/img/remote/1460000019975019?w=157&h=54); 极...

Y3G 2019-08-19 10:19 评论0 收藏0
基于 Redis驱动的 Laravel 事件广播

摘要：一前言之前在项目中需要使用的事件广播，而且项目打算使用作为驱动，但发现网上的资料大部分都是驱动的，只能自己摸索着搭建了一下服务。一、前言之前在项目中需要使用laravel的事件广播，而且项目打算使用redis作为驱动，但发现网上的资料大部分都是Pusher驱动的，只能自己摸索着搭建了一下服务。现在将这个过程记录一下，希望能帮到其他人。二、项目的环境事件广播需要用到redis,n...

fantix 2019-06-28 18:35 评论0 收藏0
PHP 程序员也能做的 Java 开发 30分钟使用 netty 轻松打造一个高性能 websock

摘要：唯一的知识点就是的基础使用。可以简单的理解下面的代码就构建了一个服务器。握手完成之后的消息传递则在中处理。实际情况下，不可能那么多人同时说话广播，而是说话的人少，接受广播的人多。硬广一波 SF 官方首页推荐《PHP进阶之路》（你又多久没有投资自己了？先看后买）我们下面则将一些实际场景都添加进去，比如用户身份的验证，游客只能浏览不能发言，多房间（频道）的聊天。该博客非常适合 Java...

kviccn 2019-08-15 10:44 评论0 收藏0