thereadme/theread.me
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

BroadcastChannels: better

Browse Source
This commit is contained in:
Mahdi Dibaiee 2015-06-06 13:39:18 +04:30
parent fcea0a2476
commit c79a1b7d4e
1 changed files with 63 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
_posts/2015-04-02-broadcast-channel.md
View File

@ -16,7 +16,69 @@ your stars page in case you star something in another tab, right?
![Broadcast Channels, SATISFIED](/img/broadcast-channels.jpg) ![Broadcast Channels, SATISFIED](/img/broadcast-channels.jpg)
#Let's Fix GitHub #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`.
---
#Another example
##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/). 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. You have to add two scripts, one for repository pages, and one for the stars page.
@ -59,63 +121,6 @@ $('.starring-container form').submit(e => {
Save, refresh your pages and Voila! You can now Star/Unstar any repository while your stars page 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. 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. That's it, I really like this API as it's best of both worlds, simple and useful.