From c79a1b7d4ee6b85cd03a5ecd4fe5f8b994fa97d7 Mon Sep 17 00:00:00 2001 From: Mahdi Dibaiee Date: Sat, 6 Jun 2015 13:39:18 +0430 Subject: [PATCH] BroadcastChannels: better --- _posts/2015-04-02-broadcast-channel.md | 121 +++++++++++++------------ 1 file changed, 63 insertions(+), 58 deletions(-) diff --git a/_posts/2015-04-02-broadcast-channel.md b/_posts/2015-04-02-broadcast-channel.md index 54e014c..eed003c 100644 --- a/_posts/2015-04-02-broadcast-channel.md +++ b/_posts/2015-04-02-broadcast-channel.md @@ -16,7 +16,69 @@ your stars page in case you star something in another tab, right? ![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 ``, 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/). 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 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 ``, 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.