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