theread.me/site/broadcastchannel-api/index.html

222 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BroadcastChannel API</title>
<meta name="description" content="BroadcastChannel APIis a new API used to communicate between same-origin tabs opened by the same user.">
<link href="https://fonts.googleapis.com/css?family=Secular+One|Nunito|Mononoki" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css">
<link rel="canonical" href="http://localhost:4000/broadcastchannel-api/">
<link rel="alternate" type="application/rss+xml" title="mahdi" href="http://localhost:4000/feed.xml" />
<!--<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>-->
<script>
var channel = new BroadcastChannel('egg');
channel.addEventListener('message', message => {
alert('Got a message from the other tab:\n' + message.data);
});
</script>
</head>
<body>
<header class="site-header">
<h1>
<a class='site-title' href='/'>
mahdi
</a>
</h1>
<nav>
<p>
<a href="/snippets">snippets</a>
<a href="/art">pictures</a>
</p>
<!--<p class='categories'>-->
<!---->
<!---->
<!--<a href="">art</a>-->
<!---->
<!---->
<!---->
<!---->
<!--</p>-->
<p>
<a href='mailto:mdibaiee@pm.me'>email</a>
<a href='https://git.mahdi.blog/mahdi'>git</a>
<a href='https://www.librarything.com/profile/mdibaiee'>librarything</a>
<a href="http://localhost:4000/feed.xml">feed</a>
</p>
</nav>
</header>
<div class="page-content">
<div class="wrapper">
<h1 class="page-heading"></h1>
<div class='post lang-en'>
<div class="post-header">
<h1 class="post-title"><p>BroadcastChannel API</p>
</h1>
<p class="post-meta">
<span>Apr 2, 2015</span>
<span>Reading time: 4 minutes</span>
</p>
</div>
<article class="post-content">
<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API">BroadcastChannel API</a>
is a new API used to communicate between same-origin tabs opened by the same user.</p>
<h1 id="why">Why</h1>
<p>Lets say you open two GitHub tabs, the <a href="https://github.com/rust-lang/rust">rust repository</a> and <a href="https://github.com/stars">your stars</a> page. You decide to star the awesome rust repository, but then you have to
refresh your stars page to see your new star. Thats sad. There must be a way for GitHub to refresh
your stars page in case you star something in another tab, right?</p>
<p><img src="/img/broadcast-channels.jpg" alt="Broadcast Channels, SATISFIED" /></p>
<h1 id="show-me-something">Show me something!</h1>
<p>Okay, open another page of my blog in a new tab. Now open up your console and enter this:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">channel</span><span class="p">.</span><span class="nx">postMessage</span><span class="p">(</span><span class="dl">'</span><span class="s1">Anybody hears me?</span><span class="dl">'</span><span class="p">);</span></code></pre></figure>
<p>Boom.</p>
<p>Ive put this code in my <code class="language-plaintext highlighter-rouge">&lt;head&gt;</code>, pretty simple:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">channel</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">BroadcastChannel</span><span class="p">(</span><span class="dl">'</span><span class="s1">egg</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">channel</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">message</span><span class="dl">'</span><span class="p">,</span> <span class="nx">message</span> <span class="o">=&gt;</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">Got a message from the other tab:</span><span class="se">\n</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">message</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
<span class="c1">// Egg</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">header</span><span class="dl">'</span><span class="p">).</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">channel</span><span class="dl">'</span><span class="p">);</span>
<span class="p">});</span></code></pre></figure>
<h1 id="how">How</h1>
<p>BroadcastChannels are pretty easy, here Im going over the small details.</p>
<h2 id="creating-channels">Creating channels</h2>
<p>BroadcastChannels are constructed with a single argument, their name. Browsing contexts should use
this name to communicate over a specified channel. Theres no limit to how many channels you can create.</p>
<p>In the first sentence of article I said its used to communicate between tabs, but its actually “browsing contexts”.
<a href="http://www.w3.org/TR/html5/browsers.html#browsing-context">Browsing contexts</a> are any environments owning a <code class="language-plaintext highlighter-rouge">Document</code>, e.g. tabs, windows, iframes, etc.</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">channel</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">BroadcastChannel</span><span class="p">(</span><span class="dl">'</span><span class="s1">star</span><span class="dl">'</span><span class="p">);</span></code></pre></figure>
<p>Channels have only one property, <code class="language-plaintext highlighter-rouge">name</code>.</p>
<h2 id="methods">Methods</h2>
<p>Channels have two methods:</p>
<h3 id="postmessagedata-anything">#postMessage(data: Anything)</h3>
<p>This is the method used to broadcast a message to everyone subscribed to this channel. <code class="language-plaintext highlighter-rouge">data</code> can be any kind of Object.</p>
<h3 id="close">#close()</h3>
<p>This method is used to leave a channel, in case you dont want to hear from the channel anymore.</p>
<p>Try leaving <code class="language-plaintext highlighter-rouge">channel</code> from my blog pages, and posting messages with others.</p>
<h2 id="events">Events</h2>
<p>Channels inherit from <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget"><code class="language-plaintext highlighter-rouge">EventTarget</code></a>, so you can use <code class="language-plaintext highlighter-rouge">addEventListener</code>, <code class="language-plaintext highlighter-rouge">removeEventListener</code> and <code class="language-plaintext highlighter-rouge">dispatchEvent</code> methods.</p>
<p>Channels have only one event:</p>
<h3 id="message">message</h3>
<p>The event object passed to this event is a <a href="https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent"><code class="language-plaintext highlighter-rouge">MessageEvent</code></a> with the <code class="language-plaintext highlighter-rouge">data</code> property set to the actual message sent using <code class="language-plaintext highlighter-rouge">postMessage</code>.</p>
<hr />
<h1 id="another-example">Another example</h1>
<p>Lets Fix GitHub
—————-</p>
<p>Okay, lets try something cool, I promise you will love it. Open a browser with <a href="http://caniuse.com/#feat=broadcastchannel">BroadcastChannel support</a> and Install <a href="http://www.greasespot.net/">GreaseMonkey</a>.</p>
<p>You have to add two scripts, one for repository pages, and one for the stars page.</p>
<p>Click “New User Script”, and fill the inputs like this:</p>
<p><img src="/img/greasemonkey-new-user-script.png" alt="GreaseMonkey New User Script" /></p>
<p><img src="/img/greasemonkey-github-stars.png" alt="GreaseMonkey New Script" /></p>
<p>In the Script Editor, enter this:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// join the "Stars" channel</span>
<span class="kd">var</span> <span class="nx">channel</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">BroadcastChannel</span><span class="p">(</span><span class="dl">'</span><span class="s1">Stars</span><span class="dl">'</span><span class="p">);</span>
<span class="c1">// reload the page when someone from a github.com tab broadcasts a message</span>
<span class="nx">channel</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">message</span><span class="dl">'</span><span class="p">,</span> <span class="nx">message</span> <span class="o">=&gt;</span> <span class="p">{</span>
<span class="nx">location</span><span class="p">.</span><span class="nx">reload</span><span class="p">();</span>
<span class="p">});</span></code></pre></figure>
<p>Now create another script and fill the form like this:</p>
<p><img src="/img/greasemonkey-github-repositories.png" alt="GreaseMonkey New Script" /></p>
<p>Use this code:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// join the "Stars" channel</span>
<span class="kd">var</span> <span class="nx">channel</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">BroadcastChannel</span><span class="p">(</span><span class="dl">'</span><span class="s1">Stars</span><span class="dl">'</span><span class="p">);</span>
<span class="c1">// once the star/unstar forms are submitted, broadcast a message to</span>
<span class="c1">// all github.com tabs</span>
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.starring-container form</span><span class="dl">'</span><span class="p">).</span><span class="nx">submit</span><span class="p">(</span><span class="nx">e</span> <span class="o">=&gt;</span> <span class="p">{</span>
<span class="nx">channel</span><span class="p">.</span><span class="nx">postMessage</span><span class="p">(</span><span class="dl">'</span><span class="s1">refresh</span><span class="dl">'</span><span class="p">);</span>
<span class="p">});</span></code></pre></figure>
<p>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.</p>
<hr />
<p>Thats it, I really like this API as its best of both worlds, simple and useful.</p>
<p>There are a lot of things which can be done with help of BroadcastChannels, I would love to hear your feedback on this API.</p>
</article>
<div class="share-page">
Share in
<a href="https://twitter.com/intent/tweet?text=BroadcastChannel API&url=http://localhost:4000/broadcastchannel-api/&via=&related=" rel="nofollow" target="_blank" title="Share on Twitter">Twitter</a>
<a href="https://facebook.com/sharer.php?u=http://localhost:4000/broadcastchannel-api/" rel="nofollow" target="_blank" title="Share on Facebook">Facebook</a>
<a href="https://plus.google.com/share?url=http://localhost:4000/broadcastchannel-api/" rel="nofollow" target="_blank" title="Share on Google+">Google+</a>
</div>
<div id="commento"></div>
<script defer
src="//commento.mahdi.blog/js/commento.js">
</script>
<script src="/js/heading-links.js"></script>
</div>
</div>
</div>
</body>
</html>