ASP.NET Core 5.0 - Online User Count with SignalR

This article will describe the implementation of a feature based on a couple of examples I found which count online users with SignalR. I will assume you have downloaded the ASP.NET Core 5.0 - Homegrown Analytics Project or created a new ASP.NET Core 5.0 Razor Pages project. See Tutorial: Get started with Razor Pages in ASP.NET Core.

I use Google Analytics' Active Users feature mainly to detect if any users are online before I take the site offline for updates. I implemented and deployed an online user feature based on a couple of examples I found which count online users with SignalR. The project has an option to enable SignalR and the online user feature. The Startup class has static properties for options.

Startup.cs:

// Enables SignalR for online user count.
public static bool EnableSignalR { get; } = true;

True adds the SignalR service, included in Microsoft. AspNetCore. App, to the services collection.

Startup > ConfigureServices:

if (EnableSignalR)
    services.AddSignalR();

Maps the "/onlinecount" endpoint to the SignalR hub named OnlineCountHub.

Startup > Configure:

app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    if (EnableSignalR)
        endpoints.MapHub<OnlineCountHub>("/onlinecount");
});

Hubs > OnlineCountHub.cs:

public class OnlineCountHub : Hub
{
    private static int Count = 0;
    public override Task OnConnectedAsync()
    {
        Count++;
        base.OnConnectedAsync();
        Clients.All.SendAsync("updateCount", Count);
        return Task.CompletedTask;
    }
    public override Task OnDisconnectedAsync(Exception exception)
    {
        Count--;
        base.OnDisconnectedAsync(exception);
        Clients.All.SendAsync("updateCount", Count);
        return Task.CompletedTask;
    }
}

The project implements libman.json and installs the signalr.js client-side library.

libman.json:

{
  "destination": "wwwroot/lib/signalr",
  "files": [
    "dist/browser/signalr.js",
    "dist/browser/signalr.js.map",
    "dist/browser/signalr.min.js",
    "dist/browser/signalr.min.js.map"
  ],
  "library": "@microsoft/signalr@5.0.1",
  "provider": "unpkg"
}

The project employs the Startup. EnableSignalR property to conditionally load the library and onlinecount.js in the layout.

_Layout.cshtml:

@if (Startup.EnableSignalR)
{
    <script src="~/lib/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/onlinecount.js"></script>
}

The onlinecount.js script builds a connection to the "/onlinecount" endpoint.

wwwroot > js > onlinecount.js:

/*!
* Copyright © 2021 Ken Haggerty (https://kenhaggerty.com)
* Licensed under the MIT License.
* SignalR Online User Count - Version 1.0.1
* Depends on signalr.js
*/

let onlineCount = document.querySelector('span.online-count');
let updateCountCallback = function (message) {
    if (!message) return;
    console.log('updateCount = ' + message);
    if (onlineCount) onlineCount.innerText = message;
};

function onConnectionError(error) {
    if (error && error.message) console.error(error.message);
}

let countConnection = new signalR.HubConnectionBuilder().withUrl('/onlinecount').build();
countConnection.on('updateCount', updateCountCallback);
countConnection.onclose(onConnectionError);
countConnection.start()
    .then(function () {
        console.log('OnlineCount Connected');
    })
    .catch(function (error) {
        console.error(error.message);
    });

The project employs the Startup. EnableSignalR property to conditionally load a span with a online-count class which displays the current online user count.

wwwroot > js > onlinecount.js:

@if (Startup.EnableSignalR)
{
    <div class="d-inline-flex">
        <h5 class="d-inline mr-2">Online(<span class="online-count"></span>)</h5>
    </div>
}