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.

Homegrown Analytics Project and Article Series

The project is feature complete and will increment the version with updates. The details page includes the version change log. This project is designed and organized to allow easy integration with existing projects. The KenHaggerty. Com. SingleUser NuGet package segregates the user logic. SQL scripts to create the schema, tables, and default data are included in the package. Details, screenshots, and related articles can be found at ASP.NET Core 5.0 - Homegrown Analytics Project.

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.

// 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)

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

Startup > Configure:
app.UseEndpoints(endpoints =>
    if (EnableSignalR)
Hubs > OnlineCountHub.cs:
public class OnlineCountHub : Hub
    private static int Count = 0;
    public override Task OnConnectedAsync()
        Clients.All.SendAsync("updateCount", Count);
        return Task.CompletedTask;
    public override Task OnDisconnectedAsync(Exception exception)
        Clients.All.SendAsync("updateCount", Count);
        return Task.CompletedTask;

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

  "destination": "wwwroot/lib/signalr",
  "files": [
  "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.

@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 (
* Licensed under the MIT License.
* SignalR Online User Count - Version 1.0.1
* Depends on signalr.js

let onlineCount = document.querySelector('');
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);
    .then(function () {
        console.log('OnlineCount Connected');
    .catch(function (error) {

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>
Analytics Index Page.
Analytics Index Page Mobile.
Ken Haggerty
Created 01/06/21
Updated 01/06/21 06:04 GMT

Log In or Reset Quota to read more.

Article Tags:

Analytics JavaScript
Successfully completed. Thank you for contributing.
Contribute to enjoy content without advertisments.
Something went wrong. Please try again.



Not accepting new comments.

Submit your comment. Comments are moderated.

User Image.
DisplayedName - Member Since ?