The SiteMonitR Sample

The newest sample from the Azure Evangelism Team (WAET) is a real-time, browser-based web site monitor. The SiteMonitR front-end is blocked out and styled using Twitter Bootstrap, and Knockout.js was used to provide MVVM functionality. A cloud service pings sites on an interval (10 seconds by default, configurable in the worker’s settings) and notifies the web client of the sites’ up-or-down statuses via server-side SignalR conversations. Those conversations are then bubbled up to the browser using client-side SignalR conversations. The client also fires off SignalR calls to the cloud service to manage the storage functionality for the URL’s to be monitored. If you’ve been looking for a practical way to use SignalR with Azure, this sample could shed some light on what’s possible.

Architectural Overview

The diagram below walks through the various method calls exposed by the SiteMonitR SignalR Hub. This Hub is accessed by both the HTML5 client application and by the Cloud Service’s Worker Role code. Since SignalR supports both JavaScript and Native .NET client connectivity (as well as a series of other platforms and operating systems), both ends of the application can communicate with one another in an asynchronous fashion.

SiteMonitR Architectural Diagram

Each tier makes a simple request, then some work happens. Once the work is complete, the caller can call events that are handled by the opposite end of the communication. As the Cloud Service observes sites go up and down, it sends a message to the web site via the Hub indicating the site’s status. The moment the messages are received, the Hub turns around and fires events that are handled on the HTML5 layer via the SignalR jQuery plug-in. Given the new signatures and additional methods added in SignalR 0.5.3, the functionality is not only identical in how it behaves, the syntax to make it happen in both native .NET code and JavaScript are almost identical, as well. The result is a simple GUI offering a real-time view into any number of web sites' statuses all right within a web browser. Since the GUI is written using Twitter Bootstrap and HTML5 conventions, it degrades gracefully, performing great on mobile devices.

Where You Can Get SiteMonitR

As with all the other samples released by the WAET, the SiteMonitR source code is available for download on the MSDN Code Gallery site. You can view or clone the source code in the GitHub.com repository we set up for the SiteMonitR source. Should you find any changes or improvements you’d like to see, feel free to submit a pull request, too. Finally, if you find anything wrong with the sample submit an issue via GitHub’s issue tab, and we’ll do what we can to fix the issues reported. The GitHub.com repository contains a Getting Started document that walks you through the whole process – with screen shots – of setting up the SiteMonitR live in your very own Azure subscription (if you don’t have one, get a free 90-day trial here).

Demonstration Video

Finally, the video below walks you through the process of downloading, configuring, and deploying the SiteMonitR to Azure. In less than 10 minutes you’ll see the entire process, have your very own web site monitoring solution running in the cloud, and you’ll be confident you’ll be the first to know when any of your sites crash since you’ll see their statuses change in real-time. If the video doesn't load properly for you, feel free to head on over to the Channel 9 post containing the video.

Updates

A few days after the SiteMonitR sample was released, Matias Wolowski added in some awesome functionality. Specifically, he added in the ability for users to add PhantomJS scripts that can be executed dynamically when sites statuses are received. Check out his fork of the SiteMonitR repository on GitHub.com. I'll be reviewing the code changes over the next few days to determine if the changes are low-impact enough that they can be pulled into the main repository, but the changes Matias made are awesome and demonstrate how any of the Azure Evangelism Team's samples can be extended by the community. Great work, Matias!