freecoding.school100% FREE · NO SIGNUP
Await StationISSUE #16 of 26

broadcast channel · cross-tab messaging

PromissaVSRace Condition Rex
Promissa saysBroadcastChannel sends messages between tabs/windows of the same origin.

const bc = new BroadcastChannel("name") lets all same-origin tabs talk: bc.postMessage(data) in one fires bc.onmessage in the others. Perfect for syncing state — log out in one tab, all tabs react; update a theme everywhere at once. No server involved; it's pure browser-to-browser within your origin.

Power-ups you unlock

Race Condition Rex attacks — common mistakes

Boss battleSketch syncing a theme change across tabs with BroadcastChannel.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre>const bc = new BroadcastChannel('app');
bc.onmessage = e => applyTheme(e.data.theme);
// in another tab:
bc.postMessage({ theme: 'dark' });</pre></body></html>
▶ Open the interactive comic issue
‹ Server-Sent Events · EventSourceMessage Channel · Structured Cloning ›