Broadcast Channel API

The Broadcast Channel API allows simple communication between browsing contexts (that is windows, tabs, frames, or iframes) with the same origin (usually pages from the same site).

Broadcast channels are named and bound to a specific origin.

By creating a BroadcastChannel object, which is listening to the underlying channel, you are able to receive any message that has been posted to it. An interesting point is that you no longer have to maintain a reference to iframes or workers that you wish to communicate with. They can simply “subscribe” to particular channels by constructing a BroadcastChannel, and have full-duplex (bi-directional) communication between all of them.

Broadcast Channel interface

Creating or joining a channel

The BroadcastChannel interface is very simple. A client joins a specific broadcast channel by creating a BroadcastChannel object. The constructor takes one single parameter, the name of the channel, used to identify it. If it is the first to connect to a broadcast channel, the underlying resource is created.

// Connection to a broadcast channel
var bc = new BroadcastChannel('test_channel');

Sending a message

Posting a message is now trivial. It is enough to call the postMessage() method on the BroadcastChannel object. This method takes any object as an argument. A very simple example would be a DOMString text message:

// Example of sending of a very simple message
bc.postMessage('This is a test message.');

Any kind of object can be sent, not just a DOMString. The API doesn't associate any semantic to the messages, so it is up to the participant to the channel to know what kind of messages to expect and what to do with them.

Receiving a message

When a message is posted, a message event will be dispatched to each BroadcastChannel object connected to this channel. There is no action by default, but a new function can be implemented using the onmessage event handler.

// Example of a simple event handler that only
// logs the event to the console
bc.onmessage = function (ev) { console.log(ev); }

Disconnecting a channel

To leave a channel, it is required to call the close() method on the object. This disconnects the link between the object and the underlying channel and allows garbage collection to happen.

// Disconnect the channel
bc.close()

Conclusion

The Broadcast Channel API is a very simple API and the self-contained interface allows cross-context communication. It can be used to detect user actions in other tabs within a same site origin environment, like when the user logs into an account. The messaging protocol is not defined and the different documents in the different contexts need to implement it themselves: there is no negotiation, nor requirement from the specification.

Specifications

Browser compatibilityUpdate compatibility data on GitHub

See also

• BroadcastChannel, the interface implementing it.