Get the number of users that are online using SignalR

In a recent experiment, I was looking for a way to retrieve the number of online users in an ASP.NET application. There are a number of techniques that can be applied, such as incrementing based on ASP.NET session state, or using Google Analytics to keep track of active users. I wanted to build an example that did not require ASP.NET session state, was accurate, and updated in real-time.

This isn't as easy as it sounds! I tried using various different approaches, but accuracy proved problematic as each approach had it's own disadvantages. Fortunately, SignalR came to the rescue!

Using SignalR to get real-time user count

If you aren't already familiar with SignalR, it is an awesome library that allows ASP.NET developers to add real-time web functionality to their applications. For more detail about the library, check out the SignalR website. The beauty of SignalR is that it uses a fallback mechanism to connect the browser to the server. A SignalR connection starts as HTTP, and is then promoted to a WebSocket connection if it is available. This means that if the browser doesn't support WebSockets, it will fallback to the next available transport mechanism. This guarantees that you will get results, regardless of the browser.

SignalR has some pretty nifty methods that are able to keep track of every time that a user connects, disconnects or reconnects to a web page. By overriding these methods, you can hook in and keep a count of the number of users online.

Get started by adding the SignalR library to your application. Use the Nuget package for convenience.

Once you have added the SignalR library to your application, you will need to create the class that contains the SignalR hub. When this method is called, it will update all listeners with the new updated count of users that are online. This method can be called from anywhere in the application and every time that an associated event occurs.

In the code above, each time that a user connects/disconnects to the web page, the SignalR hub will identify them by the unique Client Id. This Client Id is then added to a list of users, which we can easily retrieve the count of.

In order for the SignalR library to work in your application, you will need to update the Global.asax file in the project to map to the SignalR hub.

Next, update the page that you would like to display the user count. You will need to reference the SignalR clientside JavaScript and start the connection to the hub.

Once all of the code is in place, you should have a real-time, accurate count of the users that are using your application. An easy way to test this is to fire up a number of browsers and watch the user count increase and decrease as you close and open windows.

If you would like to take a look at the source code used in this example, please check out the repo on Github. If you haven't used SignalR before, go and check it out! It's a great library that provides a really easy way to add real-time functionality to your site.