BroadcastChannel API in JavaScript

The BroadcastChannel API allows multiple browser tabs, windows, or iframes from the same origin to communicate with each other directly — no server, no storage polling, and no WebSocket needed.

💡 What it does

Imagine you have your app open in two tabs:

• When you log out in one tab, the other should also log out.
• When you update a theme, all tabs should update together.

BroadcastChannel gives you a simple way to broadcast messages between all open contexts on the same origin.

⚙️ Basic usage

// Create a new channel (same name must be used everywhere) const channel = new BroadcastChannel("app-channel"); // Send a message channel.postMessage({ type: "LOGOUT" }); // Receive messages channel.onmessage = (event) => { console.log("Message from another tab:", event.data); }; // Close the channel when done channel.close(); 

✅ Works between:

• Browser tabs
• Windows (opened with window.open)
• Iframes on the same origin
• Web Workers

🧠 Mental Model

Think of it like a walkie-talkie channel:

• Everyone listening to "app-channel" hears all messages.
• Anyone can speak (broadcast).
• Messages don’t persist — if a tab is closed, it stops listening.

🧩 Real-world examples

1. Multi-tab logout sync

// auth.js const authChannel = new BroadcastChannel("auth"); export function logout() { localStorage.removeItem("token"); authChannel.postMessage({ type: "LOGOUT" }); window.location.reload(); } // elsewhere authChannel.onmessage = (event) => { if (event.data.type === "LOGOUT") { window.location.reload(); } }; 

→ Log out in one tab → all other tabs instantly reload.

2. Sync dark/light theme across tabs

const themeChannel = new BroadcastChannel("theme"); function setTheme(theme) { document.documentElement.dataset.theme = theme; localStorage.setItem("theme", theme); themeChannel.postMessage({ theme }); } themeChannel.onmessage = (event) => { document.documentElement.dataset.theme = event.data.theme; }; 

→ Change theme in one tab → others switch immediately.

⚡ Performance and limits

• Messages are asynchronous, delivered via the event loop.
• Messages are cloned (structured clone algorithm) — you can send objects, arrays, etc.
• Works only on same-origin contexts.
• Not persisted: if you reload, old messages are gone.
• Doesn’t cross browser profiles or incognito sessions.

🧰 Compared to alternatives

🧱 Using in React (example)

import { useEffect } from "react"; export default function ThemeSync() { useEffect(() => { const channel = new BroadcastChannel("theme"); channel.onmessage = (event) => { document.documentElement.dataset.theme = event.data.theme; }; return () => channel.close(); }, []); const setTheme = (theme: "light" | "dark") => { document.documentElement.dataset.theme = theme; localStorage.setItem("theme", theme); new BroadcastChannel("theme").postMessage({ theme }); }; return ( <div> <button onClick={() => setTheme("light")}>Light</button> <button onClick={() => setTheme("dark")}>Dark</button> </div> ); } 

🧪 Browser support

✅ Chrome, Firefox, Edge, Safari (modern versions).

❌ Not supported in IE.

Fallback: use localStorage’s storage event or a Service Worker.

🧩 Clean-up tips

• Always call channel.close() when your component unmounts.
• Avoid creating new channels repeatedly (reuse one per module when possible).
• In SSR frameworks like Next.js, guard it with if (typeof window !== "undefined").

✅ Summary

✨ BroadcastChannel = simple, fast, native multi-tab messaging — no servers, no hacks.

Originally published on Bitlyst.