ASP.NET Core Complete Course: Module 9 – Mastering Real-Time Communication with SignalR for Dynamic Web Applications

 

Welcome to Module 9 of our ASP.NET Core Complete Course: Beginner to Advanced Guide for Modern Web Development. In this module, we dive deep into Real-Time Communication with SignalR, a powerful library for building interactive, real-time web applications in ASP.NET Core. This comprehensive, SEO-friendly guide covers What is SignalR?, Building a Real-Time Chat Application, Broadcasting Messages to Clients, and Scaling SignalR with Azure.

Packed with practical examples, detailed explanations, real-world scenarios, pros and cons, alternatives, and best practices for security, performance, and error handling, this blog post will equip you with the skills to create dynamic, real-time applications. Whether you're a beginner or an advanced developer, this module will help you master SignalR in ASP.NET Core. Let’s get started!

---

Table of Contents

1. Introduction to Real-Time Communication with SignalR

2. What is SignalR?

   • Core Concepts of SignalR

   • Pros, Cons, and Alternatives

3. Building a Real-Time Chat Application

   • Setting Up a SignalR Project

   • Example: Implementing a Chat Application

4. Broadcasting Messages to Clients

   • Understanding Broadcasting

   • Pros, Cons, and Alternatives

   • Example: Broadcasting Messages

5. Scaling SignalR with Azure

   • Why Scale SignalR?

   • Pros, Cons, and Alternatives

   • Example: Scaling with Azure SignalR Service

6. Best Practices for SignalR

   • Security Best Practices

   • Performance Best Practices

   • Error Handling Best Practices

7. Real-Life Example: Building a Collaborative Task Management System

8. Conclusion

9. FAQs

---

Introduction to Real-Time Communication with SignalR

Real-time communication enables instant data exchange between clients and servers, creating dynamic, interactive web applications. Examples include chat apps, live dashboards, and collaborative tools. ASP.NET Core SignalR is a library that simplifies building real-time applications by abstracting the complexities of protocols like WebSockets.

In Module 9, we’ll explore:

• What is SignalR?: Understanding SignalR’s architecture and capabilities.

• Building a Real-Time Chat Application: Creating an interactive chat system.

• Broadcasting Messages to Clients: Sending updates to all or specific clients.

• Scaling SignalR with Azure: Handling high traffic with Azure SignalR Service.

This blog post includes detailed explanations, practical examples, pros and cons, alternatives, and best practices for security, performance, and error handling. We’ll also build a real-life collaborative task management system to demonstrate SignalR’s power in action.

Why is this important?

• Real-Time Interaction: Enhances user experience with instant updates.

• Scalability: Supports high-traffic applications with Azure.

• Flexibility: Works with various clients (web, mobile, desktop).

• Simplicity: Abstracts low-level protocol details (e.g., WebSockets, Server-Sent Events).

• Security: Provides built-in support for authentication and authorization.

Let’s dive into each topic with detailed explanations and real-world examples.

---

What is SignalR?

Core Concepts of SignalR

ASP.NET Core SignalR is an open-source library that enables real-time, bidirectional communication between clients and servers. It uses WebSockets as the primary transport protocol, with fallbacks to Server-Sent Events or Long Polling for older browsers.

Key Components

• Hubs: Server-side components that handle client connections and messages. Clients call hub methods, and hubs invoke client methods.

• Connections: Persistent connections between clients and the server, identified by a connection ID.

• Groups: Logical groupings of connections for broadcasting messages to specific clients.

• Transports: WebSockets (default), Server-Sent Events, or Long Polling.

• Clients: Web browsers, mobile apps, or desktop applications that connect to SignalR hubs.

How SignalR Works

1. A client connects to a SignalR hub via a WebSocket or fallback protocol.

2. The hub processes client messages and invokes methods on connected clients.

3. Clients receive real-time updates without polling the server.

Pros, Cons, and Alternatives

Pros

• Simplicity: Abstracts complex real-time communication protocols.

• Cross-Platform: Supports web, mobile, and desktop clients.

• Scalable: Integrates with Azure for large-scale deployments.

• Flexible: Works with authentication and authorization.

• Reliable: Automatically handles connection management and reconnections.

Cons

• Learning Curve: Requires understanding of hubs, groups, and transports.

• Resource Intensive: WebSockets can consume server resources in high-traffic scenarios.

• Dependency: Relies on client-side JavaScript for web clients.

• Complexity in Scaling: Requires additional setup for distributed systems.

Alternatives

• WebSockets (Raw): For low-level control, but requires manual implementation.

• Server-Sent Events (SSE): For simpler, server-to-client streaming.

• gRPC: For high-performance, bidirectional communication.

• Socket.IO: A JavaScript-based alternative for Node.js applications.

• Pusher: A cloud-based real-time messaging service.

---

Building a Real-Time Chat Application

Setting Up a SignalR Project

To build a SignalR application:

1. Create an ASP.NET Core project.

2. Install the Microsoft.AspNetCore.SignalR.Client NuGet package for server-side hubs.

3. Add client-side SignalR JavaScript library for web clients.

4. Configure SignalR hubs and middleware.

Example: Implementing a Chat Application

Let’s create a real-time chat application where users can send and receive messages instantly.

Step 1: Create a New MVC Project

dotnet new mvc -o SignalRChatApp
cd SignalRChatApp

Step 2: Install SignalR Packages

dotnet add package Microsoft.AspNetCore.SignalR

Step 3: Create a SignalR HubCreate Hubs/ChatHub.cs:

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRChatApp.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            try
            {
                await Clients.All.SendAsync("ReceiveMessage", user, message);
            }
            catch (Exception ex)
            {
                // Log error (simplified for demo)
                Console.WriteLine($"Error in SendMessage: {ex.Message}");
                throw;
            }
        }
    }
}

Step 4: Configure SignalRUpdate Program.cs:

using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using SignalRChatApp.Hubs;

var builder = WebApplication.CreateBuilder(args);

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

var app = builder.Build();

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

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");
app.MapHub<ChatHub>("/chatHub");

app.Run();

Step 5: Create the Chat UIUpdate Views/Home/Index.cshtml:

<h1>Real-Time Chat</h1>
<div>
    <input type="text" id="userInput" placeholder="Your name" />
    <input type="text" id="messageInput" placeholder="Type a message" />
    <button onclick="sendMessage()">Send</button>
</div>
<div>
    <ul id="messagesList"></ul>
</div>

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

        connection.on("ReceiveMessage", (user, message) => {
            const li = document.createElement("li");
            li.textContent = `${user}: ${message}`;
            document.getElementById("messagesList").appendChild(li);
        });

        connection.start().catch(err => console.error("Connection failed: ", err));

        async function sendMessage() {
            const user = document.getElementById("userInput").value;
            const message = document.getElementById("messageInput").value;
            if (user && message) {
                try {
                    await connection.invoke("SendMessage", user, message);
                    document.getElementById("messageInput").value = "";
                } catch (err) {
                    console.error("Send failed: ", err);
                }
            }
        }
    </script>
}

Step 6: Test the Chat ApplicationRun the application with dotnet run. Open multiple browser tabs at /, enter a username and message, and send messages. Messages appear instantly in all tabs.

Output:

Real-Time Chat
[User1]: Hello, everyone!
[User2]: Hi, User1!

This example demonstrates a basic chat application using SignalR, with client-side JavaScript and error handling for connection issues.

---

Broadcasting Messages to Clients

Understanding Broadcasting

Broadcasting in SignalR involves sending messages to all connected clients, specific clients, or groups. SignalR provides methods like:

• Clients.All: Sends to all connected clients.

• Clients.Client(connectionId): Sends to a specific client.

• Clients.Group(groupName): Sends to a group of clients.

Pros, Cons, and Alternatives for Broadcasting

Pros

• Real-Time Updates: Instantly notifies all or targeted clients.

• Flexible: Supports broadcasting to groups, individuals, or all clients.

• Efficient: Leverages WebSockets for low-latency communication.

Cons

• Scalability: Broadcasting to many clients can strain server resources.

• Complexity: Managing groups and connections adds overhead.

• Security: Requires careful authorization to prevent unauthorized broadcasts.

Alternatives

• Server-Sent Events: For simpler, unidirectional updates.

• Webhooks: For event-driven notifications to specific endpoints.

• Message Queues: Use RabbitMQ or Kafka for decoupled messaging.

Example: Broadcasting Messages

Let’s extend the chat application to support private messaging and group broadcasts.

Step 1: Update ChatHub.cs

using Microsoft.AspNetCore.SignalR;
using System;
using System.Threading.Tasks;

namespace SignalRChatApp.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            try
            {
                await Clients.All.SendAsync("ReceiveMessage", user, message);
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error in SendMessage: {ex.Message}");
                throw;
            }
        }

        public async Task SendPrivateMessage(string toUser, string message)
        {
            try
            {
                var fromUser = Context.User?.Identity?.Name ?? "Anonymous";
                await Clients.User(toUser).SendAsync("ReceivePrivateMessage", fromUser, message);
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error in SendPrivateMessage: {ex.Message}");
                throw;
            }
        }

        public async Task JoinGroup(string groupName)
        {
            try
            {
                await Groups.AddToGroupAsync(Context.ConnectionId, groupName);
                await Clients.Group(groupName).SendAsync("ReceiveGroupMessage", "System", $"{Context.User?.Identity?.Name ?? "Anonymous"} joined {groupName}");
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error in JoinGroup: {ex.Message}");
                throw;
            }
        }

        public async Task SendGroupMessage(string groupName, string message)
        {
            try
            {
                var fromUser = Context.User?.Identity?.Name ?? "Anonymous";
                await Clients.Group(groupName).SendAsync("ReceiveGroupMessage", fromUser, message);
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error in SendGroupMessage: {ex.Message}");
                throw;
            }
        }
    }
}

Step 2: Update Index.cshtml

<h1>Real-Time Chat</h1>
<div>
    <input type="text" id="userInput" placeholder="Your name" />
    <input type="text" id="messageInput" placeholder="Type a message" />
    <button onclick="sendMessage()">Send to All</button>
</div>
<div>
    <input type="text" id="privateUserInput" placeholder="Recipient name" />
    <input type="text" id="privateMessageInput" placeholder="Private message" />
    <button onclick="sendPrivateMessage()">Send Private</button>
</div>
<div>
    <input type="text" id="groupInput" placeholder="Group name" />
    <button onclick="joinGroup()">Join Group</button>
    <input type="text" id="groupMessageInput" placeholder="Group message" />
    <button onclick="sendGroupMessage()">Send to Group</button>
</div>
<div>
    <ul id="messagesList"></ul>
</div>

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

        connection.on("ReceiveMessage", (user, message) => {
            const li = document.createElement("li");
            li.textContent = `All: ${user}: ${message}`;
            document.getElementById("messagesList").appendChild(li);
        });

        connection.on("ReceivePrivateMessage", (fromUser, message) => {
            const li = document.createElement("li");
            li.textContent = `Private from ${fromUser}: ${message}`;
            document.getElementById("messagesList").appendChild(li);
        });

        connection.on("ReceiveGroupMessage", (fromUser, message) => {
            const li = document.createElement("li");
            li.textContent = `Group: ${fromUser}: ${message}`;
            document.getElementById("messagesList").appendChild(li);
        });

        connection.start().catch(err => console.error("Connection failed: ", err));

        async function sendMessage() {
            const user = document.getElementById("userInput").value;
            const message = document.getElementById("messageInput").value;
            if (user && message) {
                await connection.invoke("SendMessage", user, message).catch(err => console.error("Send failed: ", err));
            }
        }

        async function sendPrivateMessage() {
            const toUser = document.getElementById("privateUserInput").value;
            const message = document.getElementById("privateMessageInput").value;
            if (toUser && message) {
                await connection.invoke("SendPrivateMessage", toUser, message).catch(err => console.error("Private send failed: ", err));
            }
        }

        async function joinGroup() {
            const groupName = document.getElementById("groupInput").value;
            if (groupName) {
                await connection.invoke("JoinGroup", groupName).catch(err => console.error("Join group failed: ", err));
            }
        }

        async function sendGroupMessage() {
            const groupName = document.getElementById("groupInput").value;
            const message = document.getElementById("groupMessageInput").value;
            if (groupName && message) {
                await connection.invoke("SendGroupMessage", groupName, message).catch(err => console.error("Group send failed: ", err));
            }
        }
    </script>
}

Step 3: Test BroadcastingRun the application and open multiple tabs:

• Send a message to all clients.

• Send a private message to a specific user (requires authentication setup for user names).

• Join a group and send group messages.

This example demonstrates broadcasting to all clients, specific users, and groups, with basic error handling.

---

Scaling SignalR with Azure

Why Scale SignalR?

Scaling SignalR is necessary for applications with many concurrent users, as a single server may struggle to handle thousands of WebSocket connections. Azure SignalR Service is a managed service that simplifies scaling SignalR applications.

Key Features

• Managed Service: Handles connection management and scaling.

• Serverless Mode: Integrates with Azure Functions for serverless backends.

• High Availability: Supports large-scale, reliable deployments.

• Automatic Scaling: Adjusts resources based on demand.

Pros, Cons, and Alternatives for Scaling

Pros

• Scalability: Handles thousands of concurrent connections.

• Managed: Reduces server management overhead.

• Integration: Works seamlessly with ASP.NET Core and Azure Functions.

• Reliable: Provides built-in redundancy and failover.

Cons

• Cost: Azure SignalR Service incurs additional costs.

• Complexity: Requires configuration for Azure integration.

• Dependency: Relies on Azure infrastructure.

• Learning Curve: Understanding Azure SignalR Service takes time.

Alternatives

• Redis Backplane: For on-premises or custom scaling with Redis.

• Self-Hosted Scaling: Use load balancers and multiple SignalR servers.

• Pusher: A third-party real-time messaging service.

• AWS WebSocket API: For AWS-based deployments.

Example: Scaling with Azure SignalR Service

Let’s modify the chat application to use Azure SignalR Service.

Step 1: Set Up Azure SignalR Service

1. Create an Azure SignalR Service instance in the Azure Portal.

2. Note the connection string from the Keys section.

Step 2: Install NuGet Package

dotnet add package Microsoft.Azure.SignalR

Step 3: Update Program.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using SignalRChatApp.Hubs;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();
builder.Services.AddSignalR().AddAzureSignalR(builder.Configuration["Azure:SignalR:ConnectionString"]);

var app = builder.Build();

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

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");
app.MapHub<ChatHub>("/chatHub");

app.Run();

Step 4: Update appsettings.json

{
  "Azure": {
    "SignalR": {
      "ConnectionString": "Endpoint=https://<your-service>.service.signalr.net;AccessKey=<your-key>;Version=1.0;"
    }
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

Step 5: Update Index.cshtmlUpdate the SignalR client URL to use the Azure SignalR Service endpoint:

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chatHub", { accessTokenFactory: () => "<your-access-token>" }) // Optional for authenticated clients
    .withAutomaticReconnect()
    .build();

Step 6: Test the ApplicationDeploy the application to Azure App Service or run locally. Open multiple tabs to verify that messages are broadcasted via Azure SignalR Service.

This example demonstrates scaling the chat application with Azure SignalR Service, leveraging its managed infrastructure.

---

Best Practices for SignalR

Security Best Practices

• Authenticate Users: Use ASP.NET Core Identity or JWT for hub authentication.

• Authorize Hub Methods: Apply [Authorize] attributes to restrict access.

• Use HTTPS: Ensure all SignalR connections use secure WebSockets.

• Validate Messages: Sanitize input to prevent injection attacks.

• Limit Connections: Implement rate limiting or connection quotas.

Performance Best Practices

• Optimize Payloads: Minimize message size to reduce bandwidth usage.

• Use Groups: Broadcast to specific groups instead of all clients.

• Scale Horizontally: Use Azure SignalR Service or a Redis backplane for large-scale apps.

• Asynchronous Methods: Use async/await in hub methods to avoid blocking.

• Monitor Connections: Track connection counts and performance metrics.

Error Handling Best Practices

• Handle Disconnects: Use automatic reconnection on the client side.

• Log Errors: Log hub and connection errors with ILogger.

• Graceful Degradation: Provide fallbacks for failed connections.

• Consistent Responses: Return meaningful error messages to clients.

---

Real-Life Example: Building a Collaborative Task Management System

Let’s build a collaborative task management system where users can add, update, and view tasks in real-time, using SignalR with Azure scaling.

Step 1: Set Up the ProjectUse the chat application as a base and add task management features.

Step 2: Create ModelsCreate Models/TaskItem.cs:

namespace SignalRChatApp.Models
{
    public class TaskItem
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public bool IsCompleted { get; set; }
        public string AssignedTo { get; set; }
    }
}

Step 3: Create a Task HubCreate Hubs/TaskHub.cs:

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.SignalR;
using SignalRChatApp.Models;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace SignalRChatApp.Hubs
{
    [Authorize]
    public class TaskHub : Hub
    {
        private static readonly List<TaskItem> Tasks = new List<TaskItem>();

        public async Task AddTask(string title)
        {
            try
            {
                var task = new TaskItem
                {
                    Id = Tasks.Count + 1,
                    Title = title,
                    IsCompleted = false,
                    AssignedTo = Context.User.Identity.Name
                };
                Tasks.Add(task);
                await Clients.All.SendAsync("TaskAdded", task);
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error in AddTask: {ex.Message}");
                throw;
            }
        }

        public async Task UpdateTask(int id, bool isCompleted)
        {
            try
            {
                var task = Tasks.Find(t => t.Id == id);
                if (task == null)
                {
                    throw new Exception("Task not found");
                }
                task.IsCompleted = isCompleted;
                await Clients.All.SendAsync("TaskUpdated", task);
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error in UpdateTask: {ex.Message}");
                throw;
            }
        }

        public async Task GetTasks()
        {
            try
            {
                await Clients.Caller.SendAsync("ReceiveTasks", Tasks);
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error in GetTasks: {ex.Message}");
                throw;
            }
        }
    }
}

Step 4: Configure AuthenticationUpdate Program.cs to include ASP.NET Core Identity:

using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using SignalRChatApp.Data;
using SignalRChatApp.Hubs;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();
builder.Services.AddSignalR().AddAzureSignalR(builder.Configuration["Azure:SignalR:ConnectionString"]);
builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));
builder.Services.AddIdentity<IdentityUser, IdentityRole>()
    .AddEntityFrameworkStores<AppDbContext>()
    .AddDefaultUI()
    .AddDefaultTokenProviders();
builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie();

var app = builder.Build();

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

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");
app.MapHub<TaskHub>("/taskHub");
app.MapRazorPages();

app.Run();

Create Data/AppDbContext.cs:

using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore;

namespace SignalRChatApp.Data
{
    public class AppDbContext : IdentityDbContext
    {
        public AppDbContext(DbContextOptions<AppDbContext> options) : base(options)
        {
        }
    }
}

Update appsettings.json:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=localhost;Database=SignalRChatAppDb;Trusted_Connection=True;MultipleActiveResultSets=true"
  },
  "Azure": {
    "SignalR": {
      "ConnectionString": "Endpoint=https://<your-service>.service.signalr.net;AccessKey=<your-key>;Version=1.0;"
    }
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

Step 5: Create the Task UICreate Views/Home/Tasks.cshtml:

<h1>Collaborative Task Management</h1>
<div>
    <input type="text" id="taskTitle" placeholder="Task title" />
    <button onclick="addTask()">Add Task</button>
</div>
<div>
    <ul id="tasksList"></ul>
</div>

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

        connection.on("TaskAdded", task => {
            const li = document.createElement("li");
            li.id = `task-${task.id}`;
            li.innerHTML = `${task.title} (Assigned to: ${task.assignedTo}) <input type="checkbox" ${task.isCompleted ? "checked" : ""} onchange="updateTask(${task.id}, this.checked)" />`;
            document.getElementById("tasksList").appendChild(li);
        });

        connection.on("TaskUpdated", task => {
            const li = document.getElementById(`task-${task.id}`);
            li.innerHTML = `${task.title} (Assigned to: ${task.assignedTo}) <input type="checkbox" ${task.isCompleted ? "checked" : ""} onchange="updateTask(${task.id}, this.checked)" />`;
        });

        connection.on("ReceiveTasks", tasks => {
            const tasksList = document.getElementById("tasksList");
            tasksList.innerHTML = "";
            tasks.forEach(task => {
                const li = document.createElement("li");
                li.id = `task-${task.id}`;
                li.innerHTML = `${task.title} (Assigned to: ${task.assignedTo}) <input type="checkbox" ${task.isCompleted ? "checked" : ""} onchange="updateTask(${task.id}, this.checked)" />`;
                tasksList.appendChild(li);
            });
        });

        connection.start()
            .then(() => connection.invoke("GetTasks"))
            .catch(err => console.error("Connection failed: ", err));

        async function addTask() {
            const title = document.getElementById("taskTitle").value;
            if (title) {
                await connection.invoke("AddTask", title).catch(err => console.error("Add task failed: ", err));
                document.getElementById("taskTitle").value = "";
            }
        }

        async function updateTask(id, isCompleted) {
            await connection.invoke("UpdateTask", id, isCompleted).catch(err => console.error("Update task failed: ", err));
        }
    </script>
}

Step 6: Seed Initial DataAdd to Program.cs:

using (var scope = app.Services.CreateScope())
{
    var userManager = scope.ServiceProvider.GetRequiredService<UserManager<IdentityUser>>();
    var user = new IdentityUser { UserName = "user@example.com", Email = "user@example.com" };
    await userManager.CreateAsync(user, "Password123!");
}

Step 7: Test the ApplicationRun the application, log in as user@example.com, and navigate to /Home/Tasks. Add and update tasks in multiple browser tabs to verify real-time updates.

Real-Life Scenario: This task management system simulates a collaborative tool where:

• Real-Time Updates: Tasks are added and updated instantly across clients.

• Authentication: Restricts access to authenticated users.

• Scaling: Uses Azure SignalR Service for handling many concurrent users.

• Error Handling: Includes logging and client-side error feedback.

---

Conclusion

In Module 9 of our ASP.NET Core Complete Course, we explored Real-Time Communication with SignalR, covering:

• What is SignalR?: A library for real-time, bidirectional communication.

• Building a Real-Time Chat Application: Creating an interactive chat system.

• Broadcasting Messages: Sending updates to all, specific, or grouped clients.

• Scaling SignalR with Azure: Handling high traffic with Azure SignalR Service.

Through practical examples and a real-life task management system, you’ve learned how to implement real-time features with best practices for security, performance, and error handling. In the next module, we’ll explore advanced topics like Blazor, deployment, and performance optimization. Stay tuned!

---

FAQs

Q1: What is SignalR used for?

• SignalR enables real-time, bidirectional communication for applications like chat, dashboards, and collaborative tools.

Q2: How does SignalR handle scaling?

• SignalR scales using a backplane (e.g., Redis) or Azure SignalR Service to manage connections across multiple servers.

Q3: What’s the difference between broadcasting to all clients and groups?

• Broadcasting to all clients sends messages to every connected client, while groups target specific subsets of clients.

Q4: How do I secure a SignalR application?

• Use authentication, HTTPS, and authorization to restrict hub access and validate messages.

Q5: Why use Azure SignalR Service?

• Azure SignalR Service simplifies scaling, provides managed infrastructure, and supports high availability.