在现代 Web 开发中，我们经常需要在不同的页面之间进行通信，比如实现单页应用中的组件间通信、多窗口间的数据共享等。传统的方式是使用 localStorage、cookie 等技术进行通信，但这些方法都有局限性，其中最大的问题是无法实时更新，只能靠轮询实现。
幸运的是，ECMAScript 2020 中引入了 Broadcast Channel API，解决了这个问题。本文将详细介绍 Broadcast Channel API 的使用方法和原理，并提供示例代码帮助读者快速上手。
原理简介
BroadcastChannel 是一个用于跨页面（也可以是跨窗口、跨标签等）通信的接口，其基本原理是在不同的页面之间建立一个持久化的通信管道，来实现实时的数据传输。
对于每个 BroadcastChannel 实例，我们可以理解为创建了一个 “频道”（channel），所有订阅该频道的页面都可以互相通信。当一个页面向频道发布消息时，所有订阅该频道的页面都将收到该消息。
使用方法
创建一个频道
首先，我们需要在一个页面中创建一个频道：
const channel = new BroadcastChannel('channel-name');在这个例子中，我们使用 channel-name 作为频道名，所有订阅该频道的页面都应该使用同样的频道名来进行订阅。
发布消息
在发布消息时，我们只需要调用 channel.postMessage() 方法即可。该方法接受一个任意类型的数据作为参数：
channel.postMessage('Hello, world!');订阅频道并接收消息
要订阅频道并接收消息，我们需要在一个页面中创建一个与发布者同样的频道，并使用 channel.onmessage 属性来监听消息：
const channel = new BroadcastChannel('channel-name');
channel.onmessage = function(event) {
console.log('Received message:', event.data);
};在这个例子中，我们定义了一个匿名函数来接收消息，当有新消息时该函数将自动被调用。event 对象包含消息的一些元数据信息，我们使用 event.data 来获取消息本身。
我们可以在任意数量的页面中创建频道、发布消息和订阅消息，它们将自动建立连接并实现实时通信。
关闭频道
当我们不再需要某个频道时，可以调用 channel.close() 方法来关闭频道：
channel.close();
示例代码
下面是一个完整的示例代码，它可以在多个页面中进行测试。当一个页面发布消息时，其他所有页面将实时收到该消息。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------- ---------------
-------
------
------------- ------- ------------
------- ---- ---- -- -------- ---- -- ------- -- ---------
--------- ----------------------
------- ------------------------------------
----
---------------
--- -----------------
--------
----- ----- - ---------------------------------
----- ------------- - ------------------------------------------
----- ------ - ----------------------------------
----- ------- - --- ---------------------------------
--------------------------------------- ---------- -
----- ----- - -------------------
-- ------- -
---------------------------
----------- - ---
-
---
----------------- - --------------- -
---------------- -- -------------------------
--
---------
-------
-------结论
使用 Broadcast Channel API 可以轻松实现跨页面通信，它比传统方式更简单、更实时。在实际的开发中，我们可以使用它来实现单页应用的组件间通信、多窗口间的数据共享等。同时，由于 Broadcast Channel API 是标准的 Web API，所以它可以在大多数现代浏览器中使用，不需要额外的插件或库的支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672cdd49ddd3a70eb6d965a2