BroadcastChannel 如何使用

BroadcastChannel 是一个用于在不同的浏览器窗口或标签页之间进行通信的接口。它允许你发送消息并在其他窗口或标签页上监听这些消息。以下是 BroadcastChannel 的基本使用方法：

创建BroadcastChannel：
首先，你需要在发送消息和接收消息的窗口或标签页中创建一个 BroadcastChannel 实例。可以使用相同的频道名称来连接这些实例。例如，在一个窗口中创建频道：

const channel = new BroadcastChannel('myChannel');

这里创建了一个名为 myChannel的频道。

发送消息：
要发送消息，可以使用 postMessage() 方法。例如，在上述窗口中发送消息：

channel.postMessage('Hello, other windows!');

这会将消息 ‘Hello, other windows!’ 发送到所有连接到 ‘myChannel’ 频道的其他窗口或标签页。

监听消息：
在其他窗口或标签页中，你也需要创建相同的 BroadcastChannel 实例，并使用 addEventListener() 方法来监听消息。例如，在另一个窗口中：

const channel = new BroadcastChannel('myChannel');

channel.addEventListener('message', event => {
  console.log('Received message:', event.data);
});

这里创建了另一个 ‘myChannel’ 频道实例，并在收到消息时打印消息内容。

当你在分别的窗口或标签页中发送消息时，BroadcastChannel 会负责将消息传递给所有连接到相同频道的实例。这样，不同窗口之间就能够进行通信。

需要注意的是，BroadcastChannel 只能在相同的源（origin）下工作。也就是说，只有在来自相同协议、主机和端口的网页之间才能发送和接收消息。

在不需要使用 BroadcastChannel 实例时，通过 close() 方法手动关闭频道，以便释放资源。