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).

Note: This feature is available in Web Workers.

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.

The principle of the Broadcast Channel API

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

Specification Status Comment
HTML Living Standard
The definition of 'The Broadcast Channel API' in that specification.
Living Standard Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 54Edge ? Firefox Full support 38IE No support NoOpera Full support 41Safari No support NoWebView Android Full support 54Chrome Android Full support 54Edge Mobile ? Firefox Android ? Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 6.0
BroadcastChannel() constructorChrome Full support 54Edge ? Firefox Full support 38IE No support NoOpera Full support 41Safari No support NoWebView Android Full support 54Chrome Android Full support 54Edge Mobile ? Firefox Android ? Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 6.0
nameChrome Full support 54Edge ? Firefox Full support 38IE No support NoOpera Full support 41Safari No support NoWebView Android Full support 54Chrome Android Full support 54Edge Mobile ? Firefox Android ? Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 6.0
onmessageChrome Full support 54Edge ? Firefox Full support 38IE No support NoOpera Full support 41Safari No support NoWebView Android Full support 54Chrome Android Full support 54Edge Mobile ? Firefox Android ? Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 6.0
onmessageerrorChrome Full support 60Edge ? Firefox Full support 57IE No support NoOpera Full support 47Safari No support NoWebView Android Full support 60Chrome Android Full support 60Edge Mobile ? Firefox Android ? Opera Android Full support 47Safari iOS No support NoSamsung Internet Android No support No
closeChrome Full support 54Edge ? Firefox Full support 38IE No support NoOpera Full support 41Safari No support NoWebView Android Full support 54Chrome Android Full support 54Edge Mobile ? Firefox Android ? Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 6.0
postMessageChrome Full support 54Edge ? Firefox Full support 38IE No support NoOpera Full support 41Safari No support NoWebView Android Full support 54Chrome Android Full support 54Edge Mobile ? Firefox Android ? Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

See also

Document Tags and Contributors

Last updated by: Konrud,