<!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>Let’s 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. That’s 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>I’ve put this code in my <code class="language-plaintext highlighter-rouge"><head></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">=></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 I’m 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. There’s no limit to how many channels you can create.</p> <p>In the first sentence of article I said it’s used to communicate between tabs, but it’s 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 don’t 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>Let’s Fix GitHub —————-</p> <p>Okay, let’s 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">=></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">=></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>That’s it, I really like this API as it’s 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>