Monitoring Long Operation Progress via SignalR

codeproject

There are many cases when you want to start a long operation and watch its progress. In my Chpokk project (a C# and VB.NET IDE), you can see it when you create a project (primarily when adding NuGet packages, which can be long), compiling, executing, and automated testing. The problem is, we need to push the progress notifications from the server to the client, which is the opposite to what we are doing most of the time.

Let's Use SignalR to Make Our Life Easier

In most tutorials, SignalR is used to call the clients in response to some client's call. Like in a chat application, a client sends a message, the server broadcasts it to all clients.

Our case is different. We want a long running process to fire notifications. We could use the Hub class for that, but it is much more convenient to handle the original request (that started our process) via an Endpoint/Controller/whatever our main Web framework uses.

So, the Hub class is out, and we'll have to use the HubContext class.

Let's See the Code

To send a message to the client, we still need a Hub class, but it can be empty. We also need the ConnectionId value in order to send the message to the right client. The message itself can be sent in one line:

GlobalHost.ConnectionManager.GetHubContext<LogHub>()
                                  .Clients.Client(connectionId)
                                  .log(message);

Here "log(message)" is a method defined on the client (more on this later).

In order to make this work, we have to tell the server the value of connectionId. We can capture it at any time after the connection is established:

var connectionId = $.connection.hub.id;

Later, we send it to the server along with the data required for our long running process:

$.post(url, {ConnectionId: connectionId, ...});

The $.post request starts the long running process on a separate thread and returns immediately.

Now that the server sends us messages, we need to handle them somehow (e.g. display them). Remember the log method we're calling on the server? We need to implement it on the client, which is standard for SignalR applications:

$.connection.logHub.client.log = function(message){...};

We're Done, Let's Celebrate!

While the implementation turned out to be very simple, I'm still happy that I forced myself to write this post (after being silent for about a year). I think logging a long running process is quite a common task for the apps that do something more interesting than CRUD, and having a post like this for a reminder is quite handy.

As always, you can get the sample code (a fully functional application) on GitHub. The actual code is a little bit different from what I write here, since I wanted it to be a bit structured. But the general idea is the same. Also, please check it in action in my online .Net code editor -- tell me what you think!