Building a Real-Time Chat Room with .NET Core and SignalR

Real-time applications have become a must-have feature in modern web development. Whether it's a chat application, live dashboards, or real-time notifications — SignalR makes it easy to add real-time communication to your .NET applications.

In this tutorial, we’ll build a simple chat room using ASP.NET Core and SignalR.

Prerequisites

Before we begin, make sure you have:

.NET 8 SDK
Visual Studio 2022 or VS Code
Basic knowledge of C# and ASP.NET Core
Node.js (if you want to use npm for the client)

Create a New ASP.NET Core Project

Open your terminal and run:

dotnet new webapp -n ChatRoomApp
cd ChatRoomApp

Add SignalR Package

Install the SignalR library:

dotnet add package Microsoft.AspNetCore.SignalR

Create the Chat Hub

A Hub is a central point for managing client-server communication.

👉 Create a new file: Hubs/ChatHub.cs

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

namespace ChatRoomApp.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

Here’s what happens:

SendMessage is called by a client.
The hub broadcasts the message to all connected clients via Clients.All.

Configure SignalR in Program.cs

Open Program.cs and update it:

using ChatRoomApp.Hubs;

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

// Add SignalR service
builder.Services.AddSignalR();

app.UseStaticFiles();
app.MapGet("/", () => Results.Redirect("/index.html"));

// Map the hub
app.MapHub<ChatHub>("/chathub");

app.Run();

Create the Client (HTML + JavaScript)

Inside the wwwroot folder, create an index.html file:

<!DOCTYPE html>
<html>
<head>
    <title>Chat Room</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/7.0.5/signalr.min.js"></script>
</head>
<body>
    <h2>Chat Room</h2>
    <input type="text" id="userInput" placeholder="Enter your name" />
    <input type="text" id="messageInput" placeholder="Enter message" />
    <button onclick="sendMessage()">Send</button>

    <ul id="messagesList"></ul>

    <script>
        // Create connection
        const connection = new signalR.HubConnectionBuilder()
            .withUrl("/chathub")
            .build();

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

        // Start connection
        connection.start().catch(err => console.error(err));

        // Send message
        function sendMessage() {
            const user = document.getElementById("userInput").value;
            const message = document.getElementById("messageInput").value;
            connection.invoke("SendMessage", user, message)
                .catch(err => console.error(err));
        }
    </script>
</body>
</html>

Run the Application

Run the project:

dotnet run

Navigate to https://localhost:5001 (or the shown URL).
Open multiple browser tabs and try sending messages. You just built a real-time chat room!

What’s Next?

Now that you have a working chat room, you can:

Add user groups (private rooms).
Store chat history in a database.
Add authentication for real users.
Deploy it on Azure or Docker.

Final Thoughts

SignalR makes real-time communication seamless in .NET applications. With just a few lines of code, you built a fully functional chat app.

^🎁 you can get source code from github

I’m Morteza Jangjoo and “Explaining things I wish someone had explained to me”