diff --git a/source/_posts/2015-02-07-looking-at-the-past.markdown b/source/_posts/2015-02-07-looking-at-the-past.markdown index 99f2f7d6333..3fd1acf8101 100644 --- a/source/_posts/2015-02-07-looking-at-the-past.markdown +++ b/source/_posts/2015-02-07-looking-at-the-past.markdown @@ -5,7 +5,7 @@ description: "Introducing history tracking for Home Assistant." date: 2015-02-08 9:01:23 -0800 date_formatted: "February 8, 2015" comments: true -categories: component +categories: component frontend --- Ever since the launch of Home Assistant you have been able to track the state of your house. But the view has always been limited to what the current state is. Not what it was. Today we are going to change that by introducing two brand new components: diff --git a/source/_posts/2015-02-24-streaming-updates.markdown b/source/_posts/2015-02-24-streaming-updates.markdown new file mode 100644 index 00000000000..8385fc10999 --- /dev/null +++ b/source/_posts/2015-02-24-streaming-updates.markdown @@ -0,0 +1,27 @@ +--- +layout: post +title: "Streaming updates" +description: "The frontend will now get the latest changes pushed while open." +date: 2015-02-24 22:41:27 -0800 +date_formatted: February 24, 2015 +comments: true +categories: frontend +--- + +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. + +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. + +

+ + + +Streaming updates has been implemented using the HTML5 `EventSource` tag. Implementation is pretty straight forward as all the reconnection logic will be handled by the event source tag. The [server-side code](https://github.com/balloob/home-assistant/blob/master/homeassistant/components/api.py#L90) is 50 lines and the [client-side code](https://github.com/balloob/home-assistant-js/blob/master/src/actions/stream.js) is 80 lines of code. + +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 [slave instance](https://home-assistant.io/developers/architecture.html#multiple-connected-instances) of Home Assistant. This opens up new possibilities for Home Assistant components that live completely client-side. + +Implementing EventSource was not without challenges. Here are some of the issues that had to be solved: + +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. + +Another issue that I encountered is that Safari and Firefox would not fire the `open` 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. diff --git a/source/images/screenshots/streaming-updates.png b/source/images/screenshots/streaming-updates.png new file mode 100644 index 00000000000..71252a9843e Binary files /dev/null and b/source/images/screenshots/streaming-updates.png differ