使用BroadcastChannel进行跨窗口通信的实例详解-牛翰网

注意事项

BroadcastChannel 只能在同一源（same-origin）下使用，这意味着所有参与通信的页面必须在相同的域名和端口下运行。
BroadcastChannel 适合用于简单的消息传递，如果你的应用需要更复杂的通信机制，比如需要在不同域名间通信或者需要持久化的连接，那么可以考虑使用 WebSocket 或 Service Worker 等其他技术。

什么是 BroadcastChannel？

BroadcastChannel 是一个 Web API，允许你在同一浏览器环境下的不同页面或脚本之间创建一个共享频道，所有加入该频道的脚本都可以发送和接收消息。这种通信方式适合在需要多个窗口、标签页或 iframe 之间同步数据或状态的场景中使用。

如何使用 BroadcastChannel

1. 创建一个 BroadcastChannel 实例

首先，你需要创建一个 BroadcastChannel 实例，并为其指定一个频道名称：

const channel = new BroadcastChannel('my_channel');

这个 my_channel 就是频道的名称，所有想要在这个频道中通信的脚本，都需要使用相同的频道名称。

2. 发送消息

创建频道后，你可以使用 postMessage 方法向频道发送消息：

channel.postMessage('Hello, world!');

任何加入同一频道的脚本都能接收到这条消息。

3. 接收消息

要接收频道中的消息，你需要为 onmessage 事件添加一个处理函数：

channel.onmessage = function(event) {
    console.log('Received:', event.data);
};

当频道中有消息发布时，这个事件处理函数就会被调用，event.data 包含了发送的消息内容。

4. 关闭频道

当你不再需要继续通信时，可以关闭频道：

channel.close();

关闭频道可以释放资源，但并不会通知其他加入该频道的脚本。

实例演示

假设我们有两个标签页，分别为 Tab A 和 Tab B。我们希望它们之间能够通过 BroadcastChannel 进行通信。以下是具体的实现方式。

Tab A 的代码

<!DOCTYPE html>
<html>
<head>
    <title>Tab A</title>
</head>
<body>
    <h1>Tab A</h1>
    <script>
        const channel = new BroadcastChannel('my_channel');

        // 发送消息
        channel.postMessage('Hello from Tab A!');

        // 接收消息
        channel.onmessage = function(event) {
            console.log('Tab A received:', event.data);
        };
    </script>
</body>
</html>

Tab B 的代码

<!DOCTYPE html>
<html>
<head>
    <title>Tab B</title>
</head>
<body>
    <h1>Tab B</h1>
    <script>
        const channel = new BroadcastChannel('my_channel');

        // 发送消息
        channel.postMessage('Hello from Tab B!');

        // 接收消息
        channel.onmessage = function(event) {
            console.log('Tab B received:', event.data);
        };
    </script>
</body>
</html>