theread.me/_posts/2015-04-02-broadcast-channel.md

---
layout: post
title:  "BroadcastChannel API"
date:   2015-04-02 17:13:46
permalink: broadcastchannel-api
categories: api
---

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

#Why
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?

![Broadcast Channels, SATISFIED](/img/broadcast-channels.jpg)

#Let's Fix GitHub
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/).

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:

![GreaseMonkey New User Script](/img/greasemonkey-new-user-script.png)

![GreaseMonkey New Script](/img/greasemonkey-github-stars.png)

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:

![GreaseMonkey New Script](/img/greasemonkey-github-repositories.png)

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.

##I'm too lazy to try cool things, show me something!
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 %}

#How
BroadcastChannels are pretty easy, here I'm going over the small details.

##Creating channels
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.

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.

{% highlight javascript %}
var channel = new BroadcastChannel('star');
{% endhighlight %}

Channels have only one property, `name`.

##Methods
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.

##Events
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:

###message
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`.

---

That's it, I really like this API as it's best of both worlds, simple and useful.

There are a lot of things which can be done with help of BroadcastChannels, I would love to hear your feedback on this API.
New Post: BroadcastChannel API 2015-05-03 06:54:54 +00:00			`---`
			`layout: post`
			`title: "BroadcastChannel API"`
			`date: 2015-04-02 17:13:46`
			`permalink: broadcastchannel-api`
			`categories: api`
			`---`

			`[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.`

no ? 2015-05-03 06:55:55 +00:00			`#Why`
New Post: BroadcastChannel API 2015-05-03 06:54:54 +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?`

			`![Broadcast Channels, SATISFIED](/img/broadcast-channels.jpg)`

			`#Let's Fix GitHub`
			`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/).`

			`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:`

GreaseMonkey New User Script button image 2015-05-03 07:04:07 +00:00			`![GreaseMonkey New User Script](/img/greasemonkey-new-user-script.png)`

New Post: BroadcastChannel API 2015-05-03 06:54:54 +00:00			`![GreaseMonkey New Script](/img/greasemonkey-github-stars.png)`

			`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:`

			`![GreaseMonkey New Script](/img/greasemonkey-github-repositories.png)`

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

			`##I'm too lazy to try cool things, show me something!`
			`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 %}`

			`#How`
			`BroadcastChannels are pretty easy, here I'm going over the small details.`

			`##Creating channels`
			`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.`

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

			`{% highlight javascript %}`
			`var channel = new BroadcastChannel('star');`
			`{% endhighlight %}`

			Channels have only one property, `name`.

			`##Methods`
			`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.

			`##Events`
			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:`

			`###message`
			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`.

			`---`

			`That's it, I really like this API as it's best of both worlds, simple and useful.`

			`There are a lot of things which can be done with help of BroadcastChannels, I would love to hear your feedback on this API.`