JavaScript BroadcastChannel API Guide

The BroadcastChannel API in JavaScript provides a simple, direct mechanism for sharing data across different browser contexts belonging to the same origin. This article explains what the BroadcastChannel API is, how it enables one-to-many communication between open tabs, windows, iframes, and Web Workers, and how to implement it with practical code examples.

What is the BroadcastChannel API?

The BroadcastChannel API allows basic messaging between different execution contexts—such as tabs, windows, frames, or workers—running on the same origin (same protocol, domain, and port). Unlike the standard window.postMessage() method, which requires a direct reference to a specific target window, the BroadcastChannel API operates on a publish-subscribe broadcast model. Any context that creates or joins a channel with a specific name automatically receives any messages sent to that channel.

Setting Up and Using a BroadcastChannel

Communicating between contexts requires three primary steps: joining a channel, posting messages, and listening for incoming messages.

1. Creating or Joining a Channel

To start, instantiate a new BroadcastChannel object and pass a string representing the channel’s name. Multiple tabs using the same name will be connected automatically.

const authChannel = new BroadcastChannel('auth_status');

2. Sending Messages

To broadcast data to all other listeners on the channel, call the postMessage() method on the channel instance. You can pass primitives, objects, arrays, and any data type supported by the structured clone algorithm.

function notifyUserLogout() {
  authChannel.postMessage({
    action: 'LOGOUT',
    timestamp: Date.now()
  });
}

Note: The context sending the message will not receive its own broadcast.

3. Receiving Messages

To handle incoming messages from other contexts, attach a listener using the onmessage property or the addEventListener method.

authChannel.onmessage = (event) => {
  const { action, timestamp } = event.data;

  if (action === 'LOGOUT') {
    // Redirect to login page or update the UI
    window.location.href = '/login';
  }
};

You can also handle transmission errors with the onmessageerror event handler, which triggers if a message cannot be deserialized.

authChannel.onmessageerror = (event) => {
  console.error('Failed to deserialize message:', event);
};

4. Closing the Channel

When communication is no longer needed—such as when a component unmounts or a page unloads—close the connection to free up system resources.

authChannel.close();

Key Use Cases

Limitations