BroadcastChannel — Cross-Tab Messaging

TL;DR

Explanation

BroadcastChannel(name) creates a named channel. Messages posted with channel.postMessage(data) are received by all other pages on the same origin subscribed to the same channel name — not the sender itself. Data is structured-cloned (supports objects, ArrayBuffers, not functions). Use cases: tab synchronisation (logout across all tabs), shared state updates, cross-tab notifications. Close with channel.close() when done. Compared to Service Worker messaging: simpler, no SW required. Compared to localStorage events: more reliable, supports rich data types.

Common Misconception

Why It Matters

Common Mistakes

• Not calling channel.close() — channels persist as long as the page lives.
• Expecting the sender to receive its own messages — it doesn't.
• Using BroadcastChannel across different origins — blocked by same-origin policy.

Code Examples

// localStorage events — limited to string values:
localStorage.setItem('logout', Date.now());
window.addEventListener('storage', e => {
    if (e.key === 'logout') logout();
});

const channel = new BroadcastChannel('auth');

// Send logout to all other tabs:
channel.postMessage({ type: 'logout', timestamp: Date.now() });

// Receive:
channel.onmessage = ({ data }) => {
    if (data.type === 'logout') logout();
};

// Cleanup:
channel.close();

References

• ↗ https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel

Tags

Related Terms