Lesson 14 of 40 Web Development Intermediate 45 min

SignalR Real-time Applications

In this lesson, you will learn how SignalR enables real-time communication in .NET applications, from chat and notifications to dashboards and collaborative features.

← Back to Visual Studio 2026 Tutorial Home

What you will learn

How a SignalR hub is created and configured
How strongly typed hubs improve code safety
How JavaScript clients connect to hubs
How Azure SignalR supports larger deployments
How to follow a practical real-time development workflow

Why this matters: Many modern apps need immediate updates without manual refreshes, such as chat systems, alerts, trading screens, dashboards, and collaboration tools.

Part 1: Hub setup

A SignalR hub is the central endpoint that clients connect to for sending and receiving messages. A hub can manage connections, groups, and server-to-client communication.

public class DashboardHub : Hub
{
    public override async Task OnConnectedAsync()
    {
        await Groups.AddToGroupAsync(Context.ConnectionId, "admins");
        await base.OnConnectedAsync();
    }
}
    

Groups are useful when you want to broadcast different messages to different audiences instead of sending everything to every client.

Part 2: Strongly typed hubs

Strongly typed hubs help you avoid string-based mistakes by defining a client contract in an interface. This improves readability and gives better compile-time feedback.

public interface IDashboardClient
{
    Task ReceiveMetric(MetricUpdate update);
}

public class DashboardHub : Hub
{
    public async Task BroadcastMetric(MetricUpdate m) =>
        await Clients.All.ReceiveMetric(m);
}
    

Benefit: Strongly typed hubs make refactoring safer and reduce runtime errors caused by mismatched message names.

Part 3: JavaScript clients

Browser-based clients can connect to SignalR using the JavaScript client library. This allows you to push updates into dashboards, charts, or live interface elements.

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

connection.on("ReceiveMetric", update => updateChart(update));
await connection.start();
    

Automatic reconnect is useful because real-time connections may drop temporarily due to network interruptions.

Part 4: Scaling with Azure SignalR

For larger production systems with many simultaneous connections, Azure SignalR Service can offload connection management and simplify scaling.

builder.Services.AddSignalR()
    .AddAzureSignalR("Endpoint=https://...;AccessKey=...;");
    

This is especially useful when your application runs across multiple servers or needs to support a large real-time audience.

When to use SignalR features

Feature	Best used for
Basic hub	Sending and receiving real-time messages
Groups	Broadcasting updates to selected users or roles
Strongly typed hub	Improving compile-time safety and maintainability
JavaScript client	Browser-based live updates
Azure SignalR	Scaling to larger production workloads

A practical SignalR workflow

Step 1: Define the hub and message flow

Step 2: Create client message handlers clearly

Step 3: Use groups when targeting specific audiences

Step 4: Test reconnection and error scenarios

Step 5: Keep message payloads focused and efficient

Step 6: Scale out with Azure SignalR when needed

Best practices

Keep messages small and meaningful
Use strongly typed contracts where practical
Handle disconnects and reconnects gracefully
Use groups to avoid unnecessary broadcasting
Protect hubs with authorization where needed
Test under realistic connection loads

Summary

In this lesson, you learned how SignalR supports real-time .NET applications through hubs, typed contracts, JavaScript clients, and Azure scale-out support.

In the next lesson, you will move into Azure deployment workflows in Visual Studio 2026.