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() 方法手动关闭频道,以便释放资源。

你可能感兴趣的:(javascript,javascript,前端)