BroadcastChannel API

HTML5 Broadcast Channel API Overview

The Broadcast Channel API allows browser contexts from the same origin to communicate with each other. It enables messages to be shared between multiple tabs, windows, iframes, and workers without using a server, WebSocket, or localStorage polling.

This API is useful for synchronizing application state across open tabs, sending logout events, updating themes, refreshing user preferences, sharing notifications, and coordinating data changes in modern web applications.

Broadcast Channel API Example

// HTML5 Broadcast Channel API

const channel = new BroadcastChannel("app-channel");

channel.postMessage(
  {
    type: "THEME_CHANGED",
    theme: "dark"
  }
);

channel.addEventListener("message", (event) => {
  console.log("Message received:", event.data);

  if (event.data.type === "THEME_CHANGED") {
    document.documentElement.dataset.theme = event.data.theme;
  }
});

This example creates a shared communication channel named app-channel. When one tab sends a theme update, other open tabs from the same origin can receive the message and update their UI.

How Broadcast Channel Works

Every browser context that opens a BroadcastChannel with the same channel name can send and receive messages. Messages are delivered to other listening contexts from the same origin.

Broadcast Channel Methods and Events

Broadcast Channel API Use Cases

Broadcast Channel is ideal when multiple browser tabs or windows need to stay synchronized without constantly reading from storage or contacting a backend service.

Logout Across Tabs Example

// Broadcast logout event to all tabs

const authChannel = new BroadcastChannel("auth");

function logout() {
  localStorage.removeItem("token");

  authChannel.postMessage(
    { type: "LOGOUT" }
  );

  window.location.href = "/login";
}

authChannel.addEventListener("message", (event) => {
  if (event.data.type === "LOGOUT") {
    localStorage.removeItem("token");
    window.location.href = "/login";
  }
});

When the user logs out in one tab, the logout message is broadcast to other tabs so all active sessions can respond immediately.

Broadcast Channel Best Practices

• Use clear and unique channel names for each feature.
• Send structured messages with a type property.
• Validate message data before using it.
• Close channels using close() when they are no longer needed.
• Avoid sending sensitive information through broadcast messages.
• Use Broadcast Channel only for same-origin communication.
• Provide fallback logic when browser support is unavailable.
• Keep message payloads small and focused.

Common Broadcast Channel Mistakes

• Assuming messages work across different domains.
• Sending sensitive tokens or private data through messages.
• Using vague channel names that conflict with other features.
• Not validating the message type before handling data.
• Forgetting to close unused channels.
• Sending large objects unnecessarily.
• Depending on Broadcast Channel without a fallback.
• Using it when a simple component state update would be enough.

Key Takeaways

• The Broadcast Channel API enables same-origin communication between tabs, windows, iframes, and workers.
• Use new BroadcastChannel("name") to create or join a channel.
• Use postMessage() to send data across active browser contexts.
• Listen for the message event to receive updates.
• Broadcast Channel is useful for logout sync, theme sync, cart updates, and notifications.
• Always validate messages, avoid sensitive data, and close channels when finished.