Creating a progress bar in ASP.NET using SignalR

Introducing SignalR

Whenever you need to create an interactive widget on a website you often end up writing a lot of code in having the widget updated through asynchronous calls between client and server. Moreover in most cases the widget will pull for updates while it would be much more efficient in having the server push updates to its clients. This is where SignalR comes in: a signaling library for ASP.NET which does all the heavy lifting for you, making it dead easy to push data from server to client(s).

The best way to get started with SignalR is by looking at Hubs which are a higher level implementation of a persisted connection. Check out the quick start example and see how easy it is. Note that in order to support certain browsers you will need to include json2.js in your application.

Why create a progress bar using SignalR?

In our production department we have several (web based) collaboration tools amongst which a deployment tool for .NET based websites. The tool allows front-end developers to work against a shared development environment (not having to run websites on their local machines) and deploy websites to a staging environment which is accessible to our clients for previewing and acceptance testing.

Since deploying larger websites can take up to several minutes we needed to provide the user with feedback, preferably by means of a progress bar. We also needed to make sure that during website deployment the deployment could not be reinitiated and finally we thought it would be really cool if we could prompt the progress bar to other (concurrent) users as well.

And although this could also be accomplished with Ajax/JSON, it is just so much easier using SignalR!

Let’s see this in action: the screenshots below represent 3 different browser windows showing 2 simultaneous deployments. When a user visits the deployment page of a website a progress bar is prompted if the website is currently being deployed. The overview page which lists all the websites is updated as well (a rotating progress loader is shown instead of the deploy button)

Deploying a first website

Deploying a second website

Overview which lists all websites and their deployment status

A look at the source code

The deployment tool is an ASP.NET MVC 3 web application so installing SignalR is a breeze with NuGet and the first thing I did after installing the package was adding the progress bar to the view which initiates the deployment.

Client-side code in the Deployment view

In the head section I added references to the scripts required for SignalR and the JQuery UI progress bar as well as some JS code which initializes the Hub and handles the progress updates. Instead of having the form post back to the server, the submit button triggers a client side click event which will call a method on the hub (in this case run). Note that Jquery itself also needs referenced (in a shared layout).

That’s pretty much it when it comes to client side code and as you can see below the actual implementation of the hub is written in plain old C#

DeployManager: server-side implementation of the hub

All it takes is creating a class which derives from SignalR.Hubs.Hub and by doing so the run method that is executed in the client-side script will trigger the run method on this class, which is all handled by SignalR.

The actual deployment logic is implemented in the WebAppManager class, so the run method just creates a new worker thread and passes in the deployment info. The worker thread instantiates a WebAppManager and subscribes to the progress event which will bubble progress events back to the DeployManager. Finally, the DeployManager will update the progress to all its clients (also handled by SignalR) which causes the updateProgress method on all clients to fire. Isn’t that just awesome?

Finally, the view which lists all websites can be easily updated by adding some familiar client-side script.

Client-side code in the App Management view

Whenever a progress update is received the script will check to see whether a website’s deploy icon (and alt/title text) needs to be switched back and forth.

And apart from the actual progress calculation, basically that is all there is to it!