⚡ Building a Real-Time Dashboard in .NET 8 Using SignalR

Real-time dashboards bring life to your web apps — data changes instantly, and users never need to refresh the page.

In .NET 8, this is easier than ever with SignalR, which lets your server push updates directly to connected clients using WebSockets.

🧩 What Is SignalR?

SignalR is a framework that enables bi-directional communication between server and client.
It automatically chooses the best available transport — WebSockets, Server-Sent Events, or Long Polling — depending on browser and server capabilities.

When used in dashboards, SignalR can instantly update:

• IoT data feeds
• Stock prices
• Employee attendance or production stats
• System monitoring metrics

⚙️ Step 1. Install the Packages

Add SignalR support to your .NET 8 project:

dotnet add package Microsoft.AspNetCore.SignalR
dotnet add package Microsoft.AspNetCore.SignalR.Core

🧠 Step 2. Create the SignalR Hub

Create a new class named DashboardHub.cs inside your Hubs folder:

using Microsoft.AspNetCore.SignalR;

public class DashboardHub : Hub
{
    public async Task SendUpdate(string user, string message)
    {
        await Clients.All.SendAsync("ReceiveUpdate", user, message);
    }
}

This hub acts as the bridge between the server and connected browsers.

🌐 Step 3. Configure the Hub in Program.cs

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSignalR();

var app = builder.Build();
app.MapHub<DashboardHub>("/dashboardHub");

app.UseStaticFiles();
app.MapFallbackToFile("index.html");
app.Run();

🧱 Step 4. Front-End Setup (HTML + JavaScript)

Create an index.html file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js"></script>

<div id="messages"></div>

<script>
const connection = new signalR.HubConnectionBuilder()
    .withUrl("/dashboardHub")
    .build();

connection.on("ReceiveUpdate", (user, message) => {
    const div = document.createElement("div");
    div.textContent = `${user}: ${message}`;
    document.getElementById("messages").appendChild(div);
});

connection.start().catch(err => console.error(err));
</script>

This example connects to the SignalR hub and displays messages received from the server in real time.

🚀 Step 5. Sending Updates from Backend

public class DashboardService
{
    private readonly IHubContext<DashboardHub> _hub;

    public DashboardService(IHubContext<DashboardHub> hub)
    {
        _hub = hub;
    }

    public async Task NotifyAsync(string message)
    {
        await _hub.Clients.All.SendAsync("ReceiveUpdate", "System", message);
    }
}

🧠 Common Issue: SignalR Works Only a Few Times?

If you notice that SignalR seems to work only a few times — for example, updates stop after 8–10 AJAX requests — don’t worry, it’s not a SignalR limitation.

Here’s what’s really happening 👇

🔹 Cause 1: Re-Creating the Connection Inside AJAX Calls

If your page starts a new SignalR connection during every AJAX request, you’ll quickly hit a connection limit.

✅ Fix: Create the connection once on page load:

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/dashboardHub")
    .build();
connection.start();

🔹 Cause 2: Server Throttling or Timeout

On free tiers or shared hosting (like Azure Free App Service), you may hit connection or idle timeouts.

✅ Fix:

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/dashboardHub")
    .withAutomaticReconnect()
    .build();

🔹 Cause 3: Mixing AJAX Polling and SignalR

If you use both AJAX and SignalR, rate-limit your polling.
SignalR is meant to replace AJAX for real-time events.

🧩 Quick Summary

🧱 Next Step

Integrate a chart.js or blazor component to visualize these updates live.
You’ll then have a complete production-ready real-time dashboard.