Synchronizing webpages across devices with SignalR – Part 1

After your done with this post, explore the others in this series:
Part 1 – Synchronizing webpages across devices with SignalR
Part 2 – Architecture for a SignalR Synchronized Webpage Application
Part 3 – Publish Subscribe using SignalR
Part 4 – Front End Code Review

I wrote a front end to my home automation system using a newer set of technologies.  The goal of my new interface is to make it really easy to control the lights in my house with a large number of devices.  The result is that I came up with a solution that allows me to use smart phones, tablets, and pcs.   Making a application that looks good on multiple devices was pretty easy, I used the jQuery Mobile libraries to implement a simple interface.  The challenging part of this solution is that when I have a tablet sitting in my kitchen that shows the current status of the devices, it quickly became outdated when I turned on a light using a different device, like my phone or my computer.  This was an interesting problem to solve.  While the solution is not instantaneous, it is eventually consistent, in terms of seconds.  Below is an example of showing three different browser windows that are running as if they were separate devices.  The video looks best if you view it in HD.


I was able to use a combination of the following libraries, KnockoutJS and SignalR, to add the synchronization of the pages.  The solution did not require using KnockoutJS but the code was greatly simplified using knockout.  The solution is really pretty simple. Each time the use turns a light on or off.  A message is sent to the webserver using SignalR, the command is then sent to my house to a machine that can control the lights, and at the same time an echo of the command is sent to the other user interfaces on all devices.  Then knockout models are updated which updates the jquery mobile user interface.  In the rare occurrence that the home automation system cannot change the status of the lights, a command is sent back to the webserver and the status of the light on all the devices is then reverted.

The next post in this series will dig into the architecture of how this solution is constructed.

Follow me on RSS and Twitter

About Eric Hexter

I am the CTO for QuarterSpot. I (co)Founded MvcContrib, Should, Solution Factory, and Pstrami open source projects. I have co-authored MVC 2 in Action, MVC3 in Action, and MVC 4 in Action. I co-founded online events like mvcConf, aspConf, and Community for MVC. I am also a Microsoft MVP in ASP.Net.
This entry was posted in Asp.Net MVC, azure, CodeProject, jQuery, jquery mobile, knockoutJs, signalR. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Fábio Uechi

    Have you built your home automation system? Can you explain how do you control the lights and other electronic devices?

  • Eric Hexter

    I am going to post more about this next week.

  • Quinton Viljoen

    Is the source code up anywhere yet? Had a look on github, didn’t find it there

    • Its in github, let me post the link when I get back to my computer.

  •  Fantastic analyze, I just approved this onto a co-worker who was doing a little purchasing around on that. And he really purchased me lunchtime because I discovered it for him grin So let me rephrase that.

  • The solution did not require using KnockoutJS but the code was greatly simplified using knockout.

    • erichexter

      totally right. a front end template engine is not required, but when combined with signalR the amount of code you need to maintain really drops down to the bare essentials.