person holding white mini bell alarmclock

Building Real-Time Applications with SignalR and ASP.NET Core

person holding white mini bell alarmclock

Real-time applications are becoming increasingly important in today’s interconnected world, enabling features such as live updates, notifications, and real-time collaboration. SignalR is a library for ASP.NET Core that facilitates adding real-time web functionality to applications. In this article, we will explore how to build real-time applications using SignalR and ASP.NET Core.

What is SignalR?

SignalR is an open-source library that simplifies the process of adding real-time web functionality to applications. It enables server-side code to push content to connected clients instantly, allowing for real-time updates and interactions.

Benefits of SignalR

  1. Real-Time Updates: Provides instant updates to clients without needing to refresh the page.
  2. Simplified Communication: Abstracts the complexity of different communication protocols, providing a unified API.
  3. Scalability: Can be scaled out using Azure SignalR Service or other backplanes.
  4. Supports Multiple Clients: Works with web browsers, mobile apps, and desktop applications.

Setting Up an ASP.NET Core Project

Let’s start by setting up an ASP.NET Core Web API project and adding SignalR support:

dotnet new webapi -n RealTimeApp
cd RealTimeApp
dotnet add package Microsoft.AspNetCore.SignalR

Creating a SignalR Hub

A hub is a central point in SignalR where client-server communication is managed. Let’s create a hub for our real-time application.


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

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

Configuring SignalR in ASP.NET Core

Next, configure SignalR in the ASP.NET Core application.


public void ConfigureServices(IServiceCollection services)

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
if (env.IsDevelopment())


app.UseEndpoints(endpoints =>


Creating a Client Application

Let’s create a simple client application to interact with our SignalR hub. We will use a basic HTML page with JavaScript to connect and send messages.


<!DOCTYPE html>
    <title>Real-Time Chat</title>
    <h1>Real-Time Chat</h1>
    <input type="text" id="user" placeholder="Enter your name" />
    <input type="text" id="message" placeholder="Enter a message" />
    <button onclick="sendMessage()">Send</button>
    <ul id="messagesList"></ul>

    <script src=""></script>
        const connection = new signalR.HubConnectionBuilder()

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

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

        function sendMessage() {
            const user = document.getElementById("user").value;
            const message = document.getElementById("message").value;
            connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString()));

Running the Application

Run the ASP.NET Core application and open the index.html file in a web browser. Enter a username and message, then click “Send” to see real-time updates in the chat.


In this article, we explored how to build real-time applications using SignalR and ASP.NET Core. We created a simple chat application that demonstrates the power of real-time communication. SignalR abstracts the complexities of real-time communication protocols, making it easy to add real-time features to your applications. By following these steps, you can enhance your web applications with real-time capabilities, providing a more interactive and dynamic user experience.

Similar Posts