Lesson 14 of 40
Web Development
Intermediate
40 min
SignalR Real-time Applications
Build live dashboards, chat apps, and collaborative tools with SignalR in .NET 10, including Azure SignalR Service for scale-out.
Part 1: Hub Setup
public class DashboardHub : Hub
{
public override async Task OnConnectedAsync()
{
await Groups.AddToGroupAsync(Context.ConnectionId, "admins");
await base.OnConnectedAsync();
}
}
{
public override async Task OnConnectedAsync()
{
await Groups.AddToGroupAsync(Context.ConnectionId, "admins");
await base.OnConnectedAsync();
}
}
Part 2: Strongly Typed Hubs
public interface IDashboardClient
{
Task ReceiveMetric(MetricUpdate update);
}
public class DashboardHub : Hub<IDashboardClient>
{
public async Task BroadcastMetric(MetricUpdate m) =>
await Clients.All.ReceiveMetric(m);
}
{
Task ReceiveMetric(MetricUpdate update);
}
public class DashboardHub : Hub<IDashboardClient>
{
public async Task BroadcastMetric(MetricUpdate m) =>
await Clients.All.ReceiveMetric(m);
}
Part 3: JavaScript Client
const connection = new HubConnectionBuilder()
.withUrl("/hubs/dashboard")
.withAutomaticReconnect()
.build();
connection.on("ReceiveMetric", update => updateChart(update));
await connection.start();
.withUrl("/hubs/dashboard")
.withAutomaticReconnect()
.build();
connection.on("ReceiveMetric", update => updateChart(update));
await connection.start();
Part 4: Azure SignalR Scale-Out
For production apps with many connections, use Azure SignalR Service:
builder.Services.AddSignalR()
.AddAzureSignalR("Endpoint=https://...;AccessKey=...;");
Azure SignalR handles connection management, allowing stateless API servers..AddAzureSignalR("Endpoint=https://...;AccessKey=...;");
