Building a Real-Time Notification System with SignalR in .NET 10

What You'll Build

In this tutorial, you'll create a real-time notification system using SignalR in .NET 10. This system will enable your application to push notifications to clients instantly. Here's a quick look at the final outcome:

• A simple web application where clients can receive real-time notifications.
• Notifications will appear instantly without needing to refresh the page.
• The system will be scalable and can handle multiple clients simultaneously.

Why This Matters

Real-time notifications are crucial for enhancing user experience in modern web applications. They allow applications to push updates to users as soon as they occur, rather than waiting for the user to refresh the page or poll the server for updates. This is particularly useful in scenarios like:

• Chat applications: Users can receive messages in real-time.
• Stock market apps: Users can get instant updates on stock prices.
• Collaboration tools: Team members can see updates as they happen.

Developers building applications that require real-time communication will benefit from understanding how to implement SignalR in .NET 10, as it provides a simple and effective way to add real-time functionality to your applications.

Architecture Overview

The architecture of a real-time notification system with SignalR is straightforward. Here's a simple diagram to illustrate:

+-------------+       +---------------+       +-------------+
|   Client 1  | <-->  |   SignalR Hub  | <--> |  Client N   |
+-------------+       +---------------+       +-------------+

• Clients: These are the users' browsers or applications that connect to the SignalR Hub.
• SignalR Hub: This is the central point through which all messages are sent and received. It manages the connections and broadcasts messages to all connected clients.

Step-by-Step Implementation

Let's dive into building the real-time notification system. We'll go through the process step-by-step, starting from setting up a new .NET 10 project to implementing the SignalR hub and client-side code.

Step 1: Create a New .NET 10 Web Application

First, we need to create a new ASP.NET Core web application. Open your terminal or command prompt and run the following command:

dotnet new webapp -n RealTimeNotifications

This command creates a new ASP.NET Core Razor Pages application named RealTimeNotifications. Navigate into the newly created project directory:

cd RealTimeNotifications

Step 2: Add SignalR to the Project

Next, we need to add SignalR to our project. This can be done by installing the SignalR package via NuGet. Run the following command:

dotnet add package Microsoft.AspNetCore.SignalR

This command installs the SignalR package, which allows us to set up a hub and manage real-time connections.

Step 3: Set Up the SignalR Hub

Now, let's create the SignalR Hub. The hub is responsible for handling client connections and broadcasting messages. Create a new file named NotificationHub.cs in the Hubs directory (create this directory if it doesn't exist):

// Hubs/NotificationHub.cs
using Microsoft.AspNetCore.SignalR;

namespace RealTimeNotifications.Hubs
{
    public class NotificationHub : Hub
    {
        public async Task SendNotification(string message)
        {
            await Clients.All.SendAsync("ReceiveNotification", message);
        }
    }
}

In this code:

• We define a NotificationHub class that inherits from Hub.
• The SendNotification method is used to send messages to all connected clients using Clients.All.SendAsync.

Next, register the SignalR services and map the hub in the Program.cs file:

// Program.cs
using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;
using RealTimeNotifications.Hubs;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();
app.MapHub<NotificationHub>("/notificationHub");

app.Run();

In this setup:

• We added SignalR services to the service collection using builder.Services.AddSignalR().
• We mapped the NotificationHub to the /notificationHub endpoint using app.MapHub<NotificationHub>("/notificationHub").

This sets up the server-side components of our real-time notification system. In the next steps, we'll implement the client-side code to connect to this hub and receive notifications.

Step 4: Implement the Client-Side Code

With the server-side setup complete, let's move on to the client side. We need to connect to the SignalR hub and handle incoming notifications. Open the Pages/Index.cshtml file and add the following HTML and JavaScript:

@page
@model IndexModel
@{
    ViewData["Title"] = "Home Page";
}

<h1>Real-Time Notifications</h1>
<ul id="notificationsList"></ul>

@section Scripts {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/7.0.0/signalr.min.js"></script>
    <script>
        const connection = new signalR.HubConnectionBuilder()
            .withUrl("/notificationHub")
            .build();

        connection.on("ReceiveNotification", function (message) {
            const li = document.createElement("li");
            li.textContent = message;
            document.getElementById("notificationsList").appendChild(li);
        });

        connection.start().catch(function (err) {
            return console.error(err.toString());
        });
    </script>
}

In this code:

• We include SignalR's JavaScript client library via a CDN.
• We establish a connection to the /notificationHub.
• We handle the ReceiveNotification event to display incoming messages in a list.

Step 5: Testing the Notification System

To test the system, run your application using the following command:

dotnet run

Visit https://localhost:5001 in multiple browser tabs. You can simulate sending notifications by using a tool like Postman or by adding a simple form to the page to send messages via the hub.

Common Mistakes

1. Incorrect Hub Mapping: Ensure that the hub is correctly mapped in Program.cs. A common mistake is a typo in the endpoint URL.
2. JavaScript Errors: Double-check the script references and ensure the SignalR client library is correctly loaded.
3. HTTPS Issues: SignalR requires HTTPS in production. If you encounter connection errors, verify your SSL setup.

How I Would Use This

Real-time notifications are essential for applications that need to provide immediate feedback or updates to users. I would use this setup for:

• Chat Applications: Ensuring messages are delivered instantly.
• Live Event Updates: Broadcasting updates during live events or streams.
• Monitoring Dashboards: Providing real-time system metrics or alerts.

However, I would avoid using SignalR for applications where real-time updates are not critical, as it introduces additional complexity and resource usage.

In production, consider:

• Scaling: Use a backplane like Redis for scaling across multiple servers.
• Security: Implement authentication and authorization for hub connections.
• Cost: Be aware of server and bandwidth costs, especially with high-frequency updates.

Lessons Learned

• Connection Management: Handling connection drops and reconnections is crucial for a robust user experience.
• Performance: SignalR can handle many connections, but performance tuning is necessary for high-load scenarios.
• Compatibility: Ensure client devices and browsers support WebSockets, as SignalR falls back to other protocols which might not be as efficient.

Next Steps

• Authentication: Learn how to secure your SignalR hubs with authentication and authorization.
• Scaling: Explore using a backplane like Redis for scaling SignalR across multiple servers.
• Advanced Features: Dive into advanced SignalR features like group messaging and connection management.

Sources

• SignalR Documentation
• ASP.NET Core Documentation
• SignalR GitHub Repository