SignalR Real-Time Dashboards with .NET and React

Why SignalR?

SignalR abstracts WebSockets, Server-Sent Events, and Long Polling into a single API. It automatically picks the best transport for the client.

Hub Definition

public class DashboardHub : Hub
{
    public async Task SubscribeToMetrics(string region)
    {
        await Groups.AddToGroupAsync(Context.ConnectionId, region);
    }
}

// Push from background service:
await hubContext.Clients.Group(region)
    .SendAsync("MetricUpdate", new { Cpu = 42, Memory = 68 });

React Client

const connection = new signalR.HubConnectionBuilder()
    .withUrl('/hubs/dashboard')
    .withAutomaticReconnect()
    .build();

connection.on('MetricUpdate', (data) => setMetrics(data));
await connection.start();

Scaling with Redis Backplane

For multi-instance deployments, add the Redis backplane so all instances share the same SignalR message bus:

builder.Services.AddSignalR().AddStackExchangeRedis(redisConn);