BroadcastChannel

2025年01月19日

柏拉文

越努力，越幸运

一、认识

---

BroadcastChannel API 创建一个频道，所有同源的标签页可以通过频道发送和接收消息。

BroadcastChannel API 是一种在相同源的不同浏览器上下文之间实现简单高效通信 的方法。这意味着它可以在同一网站的多个标签页或窗口之间发送消息。这是由 HTML5 规范引入的，用于改进 Web Workers 中的通信方法。

在这个例子中，一个标签页通过定期发送新的消息来模拟用户活动的增加，这个消息 在所有监听该频道的上下文中传递。另一个或多个标签页将监听这个频道来接收和响 应这些更新。 注意事项: • 频道内的通信 仅在同源浏览器上下文(具有相同的协议、域名和端口号)之间有 效，也就是说，不同的网站之间的通信是不被允许的，以保护每个网站的安全性。 • 频道中的通信是 单向的，你可以通过频道向所有连接

二、实现

---

2.1 发布消息

const channel = new BroadcastChannel('my_channel');

// 发送消息
channel.postMessage({ text: 'Hello, Tabs!' });

2.2 接收消息

const channel = new BroadcastChannel('my_channel');

// 发送消息
channel.onmessage = (event) => {
    console.log('Received message:', event.data);
};