2015-05-03 06:54:54 +00:00
---
layout: post
title: "BroadcastChannel API"
date: 2015-04-02 17:13:46
2016-11-02 15:31:37 +00:00
permalink: broadcastchannel-api/
2016-11-09 12:27:01 +00:00
categories: programming
2017-10-20 17:47:29 +00:00
author: Mahdi
2015-05-03 06:54:54 +00:00
---
[BroadcastChannel API ](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API )
is a new API used to communicate between same-origin tabs opened by the same user.
2016-11-02 15:01:42 +00:00
Why
===
2022-07-27 08:48:57 +00:00
Let's say you open two GitHub tabs, the [rust
repository](https://github.com/rust-lang/rust) and [your
stars](https://github.com/stars) page. You decide to star the awesome rust
repository, but then you have to refresh your stars page to see your new star.
That's sad. There must be a way for GitHub to refresh your stars page in case
you star something in another tab, right?
2015-05-03 06:54:54 +00:00
2016-11-02 15:01:42 +00:00
Show me something!
==================
2015-05-03 06:54:54 +00:00
Okay, open another page of my blog in a new tab. Now open up your console and enter this:
{% highlight javascript %}
channel.postMessage('Anybody hears me?');
{% endhighlight %}
Boom.
I've put this code in my `<head>` , pretty simple:
{% highlight javascript %}
var channel = new BroadcastChannel('egg');
channel.addEventListener('message', message => {
alert('Got a message from the other tab:\n' + message.data);
// Egg
document.querySelector('header').classList.add('channel');
});
{% endhighlight %}
2015-06-06 09:09:18 +00:00
2016-11-02 15:01:42 +00:00
How
===
2015-05-03 06:54:54 +00:00
BroadcastChannels are pretty easy, here I'm going over the small details.
2016-11-02 15:01:42 +00:00
Creating channels
-----------------
2022-07-27 08:48:57 +00:00
BroadcastChannels are constructed with a single argument, their name. Browsing
contexts should use this name to communicate over a specified channel. There's
no limit to how many channels you can create.
2015-05-03 06:54:54 +00:00
2022-07-27 08:48:57 +00:00
In the first sentence of article I said it's used to communicate between tabs,
but it's actually "browsing contexts". [Browsing
contexts](http://www.w3.org/TR/html5/browsers.html#browsing-context) are any
environments owning a `Document` , e.g. tabs, windows, iframes, etc.
2015-05-03 06:54:54 +00:00
{% highlight javascript %}
var channel = new BroadcastChannel('star');
{% endhighlight %}
Channels have only one property, `name` .
2016-11-02 15:01:42 +00:00
Methods
-------
2015-05-03 06:54:54 +00:00
Channels have two methods:
### #postMessage(data: Anything)
This is the method used to broadcast a message to everyone subscribed to this channel. `data` can be any kind of Object.
### #close()
This method is used to leave a channel, in case you don't want to hear from the channel anymore.
Try leaving `channel` from my blog pages, and posting messages with others.
2016-11-02 15:01:42 +00:00
Events
------
2015-05-03 06:54:54 +00:00
Channels inherit from [`EventTarget` ](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget ), so you can use `addEventListener` , `removeEventListener` and `dispatchEvent` methods.
Channels have only one event:
2016-11-02 15:01:42 +00:00
### message
2022-07-27 08:48:57 +00:00
The event object passed to this event is a
[`MessageEvent` ](https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent )
with the `data` property set to the actual message sent using `postMessage` .
2015-05-03 06:54:54 +00:00
---
2016-11-02 15:01:42 +00:00
Another example
===============
Let's Fix GitHub
----------------
2015-06-06 09:09:18 +00:00
2022-07-27 08:48:57 +00:00
Okay, let's try something cool, I promise you will love it. Open a browser with
[BroadcastChannel support ](http://caniuse.com/#feat=broadcastchannel ) and
Install [GreaseMonkey ](http://www.greasespot.net/ ).
2015-06-06 09:09:18 +00:00
You have to add two scripts, one for repository pages, and one for the stars page.
Click "New User Script", and fill the inputs like this:
In the Script Editor, enter this:
{% highlight javascript %}
// join the "Stars" channel
var channel = new BroadcastChannel('Stars');
// reload the page when someone from a github.com tab broadcasts a message
channel.addEventListener('message', message => {
location.reload();
});
{% endhighlight %}
Now create another script and fill the form like this:
Use this code:
{% highlight javascript %}
// join the "Stars" channel
var channel = new BroadcastChannel('Stars');
// once the star/unstar forms are submitted, broadcast a message to
// all github.com tabs
$('.starring-container form').submit(e => {
channel.postMessage('refresh');
});
{% endhighlight %}
Save, refresh your pages and Voila! You can now Star/Unstar any repository while your stars page
is open, and your stars page will refresh immediately.
---
2015-05-03 06:54:54 +00:00
That's it, I really like this API as it's best of both worlds, simple and useful.
2022-07-27 08:48:57 +00:00
There are a lot of things which can be done with help of BroadcastChannels, I
would love to hear your feedback on this API.
