BroadCast Channel

BroadCast Channel 可以帮我们创建一个用于广播的通信频道。当监听同一频道的某个页面通过它发送消息时就会被其他所有页面收到。

// 使用构造函数创建一个实例，可以接受一个DOMString作为频道的name标识。在其他页面，可以通过传入相同的name来使用同一个广播频道。
const bc = new BroadcastChannel("broadcast");

// 监听消息
// 除了为.onmessage赋值这种方式，也可以使用addEventListener来添加"message"监听。
bc.onmessage = (e) => {
    console.log(e.data);
};

// 错误也可以绑定监听
bc.onmessageerror = (e) => {
    console.warn("error:", e);
};

// 发送消息
bc.postMessage("hello world");

// 关闭

/**
 * 一种方式是取消或者修改相应的"message"事件监听，让页面不对广播消息进行响应。
 * 另一种简单的方式就是使用close方法，调用close方法会切断与Broadcast Channel的连接。
**/

bc.close(); // 关闭后将无法调用postMessage，如果之后又再需要广播，则可以重新创建一个相同 name 的 Broadcast Channel