This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.
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 with 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 argument, a very simple one like a DOMString
text message, for example:
// Example of sending of a very simple message bc.postMessage("This is a test message.");
There is no need for the message to be just a DOMString
, any kind of object can be send. As the API doesn't associated any semantic to the messages, 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.
// Exemple 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 |
---|---|---|
WHATWG HTML Living Standard The definition of 'The Broadcast Channel API' in that specification. |
Living Standard | Initial definition. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | Not supported | 38 (38) | Not supported | Not supported | Not supported |
Available in workers | Not supported | 38 (38) | Not supported | Not supported | Not supported |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | Not supported | Not supported | 38.0 (38) | Not supported | Not supported | Not supported |
Available in workers | Not supported | Not supported | 38.0 (38) | Not supported | Not supported | Not supported |
See also
BroadcastChannel
, the interface implementing it.