jeena/home-assistant.github.io
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Site updated at 2015-10-29 07:09:11 UTC

Browse source
This commit is contained in:
Paulus Schoutsen 2015-10-29 00:09:11 -07:00
parent 7412a60701
commit b260f2881e
362 changed files with 42053 additions and 256343 deletions
Download patch file Download diff file Expand all files Collapse all files

91
blog/2015/02/24/streaming-updates/index.html
View file

@ -5,8 +5,6 @@
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@ -32,7 +30,6 @@
<link rel='icon' type='image/png' href='/images/favicon-192x192.png' sizes='192x192' />
</head>
<body >
<header>
@ -54,10 +51,10 @@
<a href="/getting-started/">Getting started</a>
<ul>
<li><a href='/getting-started/'>Installing Home Assistant</a></li>
<li><a href='/getting-started/configuration.html'>Configuration basics</a></li>
<li><a href='/getting-started/devices.html'>Adding devices</a></li>
<li><a href='/getting-started/presence-detection.html'>Presence detection</a></li>
<li><a href='/getting-started/automation.html'>Automation</a></li>
<li><a href='/getting-started/configuration/'>Configuration basics</a></li>
<li><a href='/getting-started/devices/'>Adding devices</a></li>
<li><a href='/getting-started/presence-detection/'>Presence detection</a></li>
<li><a href='/getting-started/automation/'>Automation</a></li>
<li><a href='/cookbook'>Configuration cookbook</a></li>
</ul>
</li>
@ -65,26 +62,24 @@
<li>
<a href="/developers/">Developers</a>
<ul>
<li><a href="/developers/architecture.html">Architecture</a></li>
<li><a href="/developers/frontend.html">Frontend development</a></li>
<li><a href="/developers/creating_components.html">
<li><a href="/developers/architecture/">Architecture</a></li>
<li><a href="/developers/frontend/">Frontend development</a></li>
<li><a href="/developers/creating_components/">
Creating components
</a></li>
<li><a href="/developers/add_new_platform.html">
<li><a href="/developers/add_new_platform/">
Adding platform support
</a></li>
<li><a href="/developers/api.html">API</a></li>
<li><a href="/developers/credits.html">Credits</a></li>
<li><a href="/developers/api/">API</a></li>
<li><a href="/developers/credits/">Credits</a></li>
</ul>
</li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/help/">Need help?</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
@ -98,6 +93,7 @@
<article class="post">
<header>
<h1 class="title indent">Streaming updates</h1>
@ -105,28 +101,10 @@
<div class="meta clearfix">
<time datetime="2015-02-24T22:41:27-08:00" pubdate data-updated="true"><i class="icon-calendar"></i> February 24, 2015</time>
<span class="byline author vcard"><i class='icon-user'></i> Paulus Schoutsen</span>
<time datetime="2015-02-24T22:41:27-08:00" pubdate data-updated="true"><i class="icon-calendar"></i> February 24, 2015</time>
<span class="byline author vcard"><i class='icon-user'></i> Paulus Schoutsen</span>
<span><i class='icon-time'></i> 1 minute reading time</span>
<span>
<span>
<i class="icon-tags"></i>
<ul class="tags unstyled">
@ -136,7 +114,6 @@
</ul>
</span>
<a class='comments'
href="#disqus_thread"
@ -147,38 +124,29 @@
</header>
<p>Home Assistant has learned a new trick to get the latest information from the server: streaming updates. No longer will the frontend poll every 30 seconds for updates but instead it will keep a connection open and get the latest changes pushed as soon as they happen.</p>
<p>A new toggle has been added ot the sidebar to turn streaming updates on and off. This preference will be saved on a per-browser basis using local storage. The toggle will also indicate when there is an error setting up a stream after which it will fall back to use polling.</p>
<p class='img'><img src='/images/screenshots/streaming-updates.png' /></p>
<p class="img"><img src="/images/screenshots/streaming-updates.png" /></p>
<a name="read-more"></a>
<p>Streaming updates has been implemented using the HTML5 <code>EventSource</code> tag. Implementation is pretty straight forward as all the reconnection logic will be handled by the event source tag. The <a href="https://github.com/balloob/home-assistant/blob/master/homeassistant/components/api.py#L90">server-side code</a> is 50 lines and the <a href="https://github.com/balloob/home-assistant-js/blob/master/src/actions/stream.js">client-side code</a> is 80 lines of code.</p>
<p>All events that happen on the server will now also be sent to the browser. This turns any browser running the UI into a fully functioning <a href="https://home-assistant.io/developers/architecture.html#multiple-connected-instances">slave instance</a> of Home Assistant. This opens up new possibilities for Home Assistant components that live completely client-side.</p>
<p>All events that happen on the server will now also be sent to the browser. This turns any browser running the UI into a fully functioning <a href="https://home-assistant.io/developers/architecture/#multiple-connected-instances">slave instance</a> of Home Assistant. This opens up new possibilities for Home Assistant components that live completely client-side.</p>
<p>Implementing EventSource was not without challenges. Here are some of the issues that had to be solved:</p>
<p>A connection can go stale in Chrome without any event handler being called. This happens when a device goes into standby. For computers this is rare but for phones this occurs quite often. This has been solved by sending a regular ping from the server. The frontend will assume the connection has gone stale when it hasn&rsquo;t heard any communication for a while. Sending a ping will also help the server detect broken connections and clean them up.</p>
<p>A connection can go stale in Chrome without any event handler being called. This happens when a device goes into standby. For computers this is rare but for phones this occurs quite often. This has been solved by sending a regular ping from the server. The frontend will assume the connection has gone stale when it hasn’t heard any communication for a while. Sending a ping will also help the server detect broken connections and clean them up.</p>
<p>Another issue that I encountered is that Safari and Firefox would not fire the <code>open</code> event when the connection has been opened but when the first message has been received. To work around this the server will now fire a ping when the connection gets opened.</p>
</article>
<section id="disqus">
<h3 class="indent title">Comments</h3>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript></div>
</section>
@ -190,7 +158,6 @@
<section class="sharing aside-module grid__item one-whole lap-one-half">
<h1 class="title delta">Share this post</h1>
@ -272,7 +239,6 @@
</div>
</aside>
</div>
@ -283,30 +249,23 @@
<div class="grid">
<div class="grid__item">
<p class="copyright">
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a>, <a href='http://jekyllrb.com/'>Jekyll</a> and the <a href='https://github.com/coogie/oscailte'>Oscalite theme</a>. Hosted by <a href='https://pages.github.com/'>GitHub</a> and served by <a href='https://cloudflare.com'>CloudFlare</a>.</span>
<span class="credit">Powered by <a href='http://jekyllrb.com/'>Jekyll</a> and the <a href='https://github.com/coogie/oscailte'>Oscalite theme</a>. Hosted by <a href='https://pages.github.com/'>GitHub</a> and served by <a href='https://cloudflare.com'>CloudFlare</a>.</span>
</p>
</div>
</div>
</div>
</footer>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<script>
<script>
var _gaq=[['_setAccount','UA-57927901-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<script>
var disqus_shortname = 'home-assistant';
@ -323,13 +282,5 @@
}());
</script>
</body>
</html>