不同标签页、iframe或者worker之间的广播通信——BroadcastChannel

BroadcastChannel 是一个 Web API，用于在同一来源（origin）下的不同浏览器上下文（如不同的浏览器标签页、iframe 或者 worker）之间进行简单的消息传递。它允许你创建一个广播频道，通过该频道可以发送和接收消息。

BroadcastChannel 的用途

1. 跨标签页通信：
   • 在同源情况下，你可以使用 BroadcastChannel 在同一浏览器的不同标签页之间进行通信。例如，当用户在一个标签页中进行某些操作时，可以通知其他标签页进行相应的更新。
2. 跨 iframe 通信：
   • 在同源情况下，你可以使用 BroadcastChannel 在同一浏览器的不同 iframe 之间进行通信。这对于嵌入式应用程序或多窗口应用程序非常有用。
3. 跨 worker 通信：
   • 在同源情况下，你可以使用 BroadcastChannel 在主线程和 Web Worker 之间进行通信，或者在不同的 Web Worker 之间进行通信。

BroadcastChannel 的基本用法

创建和使用 BroadcastChannel

1. 创建频道：
   • 使用 new BroadcastChannel(channelName) 创建一个新的广播频道。
   • 同源，同一频道名都可以接收到
2. 发送消息：
   • 使用 channel.postMessage(message) 发送消息到频道。
3. 接收消息：
   • 使用 channel.onmessage 事件处理程序接收来自频道的消息。

// 创建一个名为 "example_channel" 的广播频道
const channel = new BroadcastChannel('example_channel');

// 发送消息到频道
channel.postMessage('Hello, World!');

// 接收来自频道的消息
channel.onmessage = (event) => {
  console.log('Received message:', event.data);
};

总结

BroadcastChannel 是一个强大的 API，用于在同一浏览器的不同浏览上下文之间进行消息传递。它可以用于跨标签页、跨 iframe 和跨 worker 的通信。在实际项目中，你可以使用 BroadcastChannel 实现不同上下文之间的同步和协作，提高应用的用户体验和交互性。