Broadcast Channel API

The Broadcast Channel API allows basic communication between browsing contexts (that is, windows, tabs, frames, or iframes) and workers on the same origin.

Note: This feature is available in Web Workers.

By creating a BroadcastChannel object, you can receive any messages that are posted to it. You don't have to maintain a reference to the frames or workers you wish to communicate with: they can β€œsubscribe” to a particular channel by constructing their own BroadcastChannel with the same name, and have bi-directional communication between all of them.

The principle of the Broadcast Channel API

Broadcast Channel interface

Creating or joining a channel

A client joins a broadcast channel by creating a BroadcastChannel object. Its constructor takes one single parameter: the name of the channel. If it is the first to connect to that broadcast channel name, the underlying channel is created.

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

Sending a message

It is enough to call the postMessage() method on the created BroadcastChannel object, which takes any object as an argument. An example string 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 semantics to messages, so it is up to the code 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 is dispatched to each BroadcastChannel object connected to this channel. A function can be run for this event with the onmessage event handler:

// A handler that only logs the event to the console:
bc.onmessage = function (ev) { console.log(ev); }

Disconnecting a channel

To leave a channel, call the close() method on the object. This disconnects the object from the underlying channel, allowing garbage collection.

// Disconnect the channel
bc.close();

Conclusion

The Broadcast Channel API's self-contained interface allows cross-context communication. It can be used to detect user actions in other tabs within a same origin, like when the user logs in or out.

The messaging protocol is not defined and the different browsing 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

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
BroadcastChannelChrome Full support 54Edge Full support ≀79Firefox Full support 38IE No support NoOpera Full support 41Safari No support NoWebView Android Full support 54Chrome Android Full support 54Firefox Android ? Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 6.0
BroadcastChannel() constructorChrome Full support 54Edge Full support ≀79Firefox Full support 38IE No support NoOpera Full support 41Safari No support NoWebView Android Full support 54Chrome Android Full support 54Firefox Android ? Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 6.0
closeChrome Full support 54Edge Full support ≀79Firefox Full support 38IE No support NoOpera Full support 41Safari No support NoWebView Android Full support 54Chrome Android Full support 54Firefox Android ? Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 6.0
message eventChrome Full support 54Edge Full support ≀79Firefox Full support 38IE No support NoOpera Full support 41Safari No support NoWebView Android Full support 54Chrome Android Full support 54Firefox Android ? Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 6.0
messageerror eventChrome Full support 60Edge Full support ≀79Firefox Full support 57IE No support NoOpera Full support 47Safari No support NoWebView Android Full support 60Chrome Android Full support 60Firefox Android ? Opera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 8.0
nameChrome Full support 54Edge Full support ≀79Firefox Full support 38IE No support NoOpera Full support 41Safari No support NoWebView Android Full support 54Chrome Android Full support 54Firefox Android ? Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 6.0
onmessageChrome Full support 54Edge Full support ≀79Firefox Full support 38IE No support NoOpera Full support 41Safari No support NoWebView Android Full support 54Chrome Android Full support 54Firefox Android ? Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 6.0
onmessageerrorChrome Full support 60Edge Full support ≀79Firefox Full support 57IE No support NoOpera Full support 47Safari No support NoWebView Android Full support 60Chrome Android Full support 60Firefox Android ? Opera Android Full support 44Safari iOS No support NoSamsung Internet Android Full support 8.0
postMessageChrome Full support 54Edge Full support ≀79Firefox Full support 38IE No support NoOpera Full support 41Safari No support NoWebView Android Full support 54Chrome Android Full support 54Firefox 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