How to Use SignalR in Your ASP.NET Core Project — A Step-by-Step Tutorial

Real-time web applications have become increasingly common — from chat applications to dashboards and notification systems. SignalR is a library in ASP.NET Core that makes it easy to add real-time functionality to your web apps by managing persistent connections between the client and the server.

I’ve been planning to learn SignalR for the past few months, and finally got the perfect opportunity in a project where I needed to update the balance in real-time whenever any transaction happened, irrespective of the user or device. In this tutorial, I’ll walk you through how I integrated SignalR into my ASP.NET Core project (Live Version Dream 3 Star), step by step.

---

📖 What is SignalR?

SignalR is an open-source library for ASP.NET that allows server-side code to send asynchronous notifications to client-side web applications. It abstracts away the complexity of managing WebSocket connections and gracefully falls back to older technologies when necessary.

Use cases include:

• Real-time chat applications
• Live notifications
• Real-time dashboards
• Collaborative applications

---

✅ Prerequisites

• Basic knowledge of C# and ASP.NET Core

---

🛠️ Step 1: Create a New ASP.NET Core Web Application

Open Visual Studio and create a new ASP.NET Core Web Application. I’m assuming you know how to create ASP.NET Core Web App.

• Choose ASP.NET Core Web App (Model-View-Controller) or Razor pages
• Name your project (e.g. SignalRTutorialApp)
• Click Next and select .NET 6.0 (or later)

---

🛠️ Step 2: Install SignalR NuGet Package

If you created a new Web Application with .NET 6 or later, SignalR is already included in the framework.
But if you’re using an older version or want to ensure it’s available, install the package:

Go to Tools → NuGet Package Manager → Manage NuGet Packages for Solution and search for Microsoft.AspNetCore.SignalR.Core.

Or via Package Manager Console:

Install-Package Microsoft.AspNetCore.SignalR.Core

---

🛠️ Step 3: Create a SignalR Hub

Create a new folder named Hubs in your project, and inside it, add a new class ChatHub.cs.

using Microsoft.AspNetCore.SignalR;

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

Note:
1. The SendMessage method takes two parameters (user and message) and sends them to all connected clients via Clients.All.SendAsync("ReceiveMessage",message).
2. In the view you’ll receive the “ReceiveMessage” , as shown below.
3. You can use multiple Tasks, here in the same Hub for different purposes.

---

🛠️ Step 4: Configure SignalR in Program.cs

Open Program.cs and add SignalR services and endpoints:

var builder = WebApplication.CreateBuilder(args);

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

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

var app = builder.Build();

app.UseStaticFiles();
app.UseRouting();

app.UseAuthorization();

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

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

app.Run();

Two Important lines here are,
1. builder.Services.AddSignalR();
2. app.MapHub<ChatHub>(“/chathub”); [In the view, you’ll be using this end point to get the response from server]

---

🛠️ Step 5: Create the View

Open Views/Home/Index.cshtml and replace the content with:

<h2>SignalR Chat</h2>

<input type="text" id="userInput" placeholder="Name" />
<input type="text" id="messageInput" placeholder="Message" />
<button id="sendButton">Send</button>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/7.0.5/signalr.min.js"></script>
<script>
    const connection = new signalR.HubConnectionBuilder()
        .withUrl("/chathub")
        .build();

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

    connection.start().catch(function (err) {
        return console.error(err.toString());
    });

    document.getElementById("sendButton").addEventListener("click", function (event) {
        const user = document.getElementById("userInput").value;
        const message = document.getElementById("messageInput").value;
        connection.invoke("SendMessage", user, message).catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });
</script>

Note:
1. singalr.min.js , this reference is mandatory to access the connection in client side..
2. If you’ve multiple tasks, you can access those using,

connection.on("ReceiveMessage2", (message) => {
//do whatever you want 
console.log(message)
});

---

🛠️ Step 6: Run and Test the Application

1. Run the application by pressing F5.
2. Open the app in two different browser windows or tabs.
3. Type a message in one tab and send — it should appear in both windows instantly!

---

📈 Bonus: SignalR Client Libraries for Other Platforms

SignalR isn’t limited to web applications. Microsoft provides client libraries for:

• .NET Client
• JavaScript/TypeScript
• Java
• Python
• Xamarin / MAUI (mobile apps)

You can integrate the same server-side hub logic with different client applications for cross-platform real-time features.

---

📚 Conclusion

And that’s it — you’ve successfully integrated SignalR into your ASP.NET Core project to enable real-time communication!

SignalR is incredibly versatile and can be extended with:

• Group messaging
• User-specific messaging
• Connection management
• Authentication and authorization

I hope this step-by-step tutorial was helpful. For any issue while implementing this , please let me know in the comment section.!

---