Exploring the Broadcast Channel API for cross-tab communication | MDN Blog

Exploring the Broadcast Channel API for cross-tab communication | MDN Blog

The Broadcast Channel API introduces a mechanism for different contexts within the same origin to communicate with each other.
It operates on the principle of creating a single, shared channel that multiple contexts can join and leave at any time.

Once joined, these contexts can send and receive messages through the channel, enabling seamless data exchange and event propagation.
This mechanism eliminates the need for complex server-side communication.

Since messages are broadcast to all listening contexts (which may include multiple visitors) on the same origin, you should be careful not to send sensitive information via this method, as there is no built-in encryption or authentication.
For example, visitors would see all updates broadcast to the contexts they are currently viewing.
Here’s a quick look at how you use the API:

Creating or joining a channel:

const bc = new BroadcastChannel("test_channel");

Sending a message:

bc.postMessage("This is a test message");

Receiving a message (see BroadcastChannel: message event for details):

bc.onmessage = (event) => {
  console.log(event.data);
  
};