BroadcastChannel

What is BroadcastChannel?

BroadcastChannel is a browser API that provides a simple publish/subscribe message bus scoped to the same origin. Any tab, iframe, or worker that creates a channel with the same name automatically joins the same group. When one member calls postMessage, every other member receives the message via its onmessage handler.

It is conceptually similar to localStorage’s storage event, but with important differences:

Feature	BroadcastChannel	`storage` event
Message content	Any structured-cloneable value	String only (storage value)
Works in workers	Yes (Shared/Service Workers)	No
Fires in the sending tab	No	No
Requires localStorage write	No — direct	Yes

Creating and using a channel

// Create (or join) a channel by name
const ch = new BroadcastChannel('my-channel');

// Listen for messages
ch.onmessage = (event) => {
  console.log('Got:', event.data);
};

// Send a message to all other members
ch.postMessage({ type: 'UPDATE', payload: 42 });

// When done, release resources
ch.close();

The name is the only identifier — two pages on the same origin using new BroadcastChannel('chat') are automatically peers. There is no server or registration step.

Event-listener style

You can also use addEventListener instead of the onmessage assignment. This lets you attach multiple listeners:

const ch = new BroadcastChannel('notifications');

ch.addEventListener('message', (e) => {
  console.log('Handler 1:', e.data);
});

ch.addEventListener('message', (e) => {
  console.log('Handler 2:', e.data);
});

Closing a channel

Call ch.close() when you no longer need to receive messages. The channel is not shared state — closing in one tab has no effect on other tabs. If you forget to close it, the browser may keep an event-listener reference alive.

const ch = new BroadcastChannel('demo:temp');
// ... use it ...
ch.close(); // releases internal resources

Runnable: post and receive on the same channel

The demo below creates a channel, attaches a listener, posts a message, and closes after receipt. Because sender and receiver are in the same page the message echoes back — in a real app the listener lives in a separate tab.

Browser Storage

const ch = new BroadcastChannel('demo:bc-lesson');

ch.onmessage = (e) => {
  console.log('onmessage fired:', JSON.stringify(e.data));
  ch.close();
  console.log('Channel closed.');
};

ch.postMessage({ type: 'HELLO', from: 'lesson', ts: Date.now() });
console.log('postMessage called.');
// NOTE: In a real app the listener runs in a SECOND tab.
// Same-page echo works here only because the event loop
// dispatches the message back to this context.