---
# System prepended metadata

title: Build a Web App with SignalR in .NET Core- Simple Steps to Follow

---

![ASP.Net](https://hackmd.io/_uploads/Sk4BlXqWkl.jpg)
There is a growing need for real-time functionality in today's web development environment. Users anticipate fast updates, whether through dynamic dashboards, live chat, or real-time notifications. With the help of the .NET library SignalR, you can easily integrate real-time online capabilities into your apps. Using real-world examples to highlight SignalR's potential, we will examine how to build a web app with SignalR in .NET Core in this post.

## SignalR: What is it?
.NET Core One of the most widely used open-source libraries, [hire .Net Core developers](https://www.cmarix.com/hire-dotnet-core-developers.html) for its easy-to-incorporate SignalR, which is reliable, real-time online functionality into their applications. When a request is received, real-time web functionality enables the server-side code to provide the stream data to the client side instantaneously. This means that, rather than waiting for a new request from the client to send data back, the server-side code in a real-time enabled process is developed.

### Features of SignalR
●	**Real-time communication**: Allows for bi-directional server-client communication is one of SignalR's primary features.
●	**Automatic Reconnection**: Should the connection be lost, it will automatically establish again.
●	**Multiple Transport Options**: Based on the capabilities of the client, select the optimal transport mechanism (WebSockets, Server-Sent Events, Long Polling).

### Examples of SignalR .NET Core Usage 
**Instantaneous Chat Software**: Provide a chat platform that allows users to send and receive messages instantly, without having to refresh the page manually.

**Live Notifications**: Create a notification system that alerts users to important events—such as new emails, friend requests, or system updates—as soon as possible.

**App for Collaborative Sketching**: Create a program that allows "n" people to collaborate in real-time while sketching simultaneously on a shared canvas.

**Stock Market Information**: To keep traders and investors informed and current, provide a dashboard that gives them minute-by-minute information on stock prices and market trends.

## How to Build SignalR with .Net Core- Steps to Follow
Now, let's look at the first step that developers can use to assist with SignalR configuration and implementation in .NET Core: Making a web application project with the .NET Core framework is the first step. As you can see, to implement SignalR, we must first create a .NET web application. With that in mind, let's understand the process of these methods. 

Therefore, to use SignalR in .NET Core, developers must first include the SignalR client library in the project for the web application. The instructions in the screenshot must be followed to add the SignalR client library.

**Step 1: Create a New .NET Core Project**
First, create a new .NET Core Web API project using the .NET CLI:

dotnet new webapi -n RealTimeApp
cd RealTimeApp

**Step 2: Add SignalR NuGet Package**
Add the SignalR package to your project:

dotnet add package Microsoft.AspNetCore.SignalR

**Step 3: Create a Hub**
A Hub is a central point in the SignalR API that handles connections, groups, and messaging. Create a new Hub class:

```
public class RealTimeHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}

public async Task SendNotification(string message)
{
    await Clients.All.SendAsync("ReceiveNotification", message);
}
}
```

**Step 4: Configure SignalR in Startup**
Configure the SignalR services and middleware in the `Startup.cs` file:

```
public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();
    services.AddSignalR();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapHub<RealTimeHub>("/realtimehub");
    });
}
```

**Step 5: Create a Client Application**
To demonstrate real-time communication, we will create a simple chat and notification client using HTML and JavaScript.

<!DOCTYPE html>
<html>
<head>
    <title>SignalR Real-Time App</title>
</head>
<body>
    <div>
        <input type="text" id="userInput" placeholder="Name" />
        <input type="text" id="messageInput" placeholder="Message" />
        <button onclick="sendMessage()">Send Message</button>
        <button onclick="sendNotification()">Send Notification</button>
    </div>
    <ul id="messagesList"></ul>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/5.0.11/signalr.min.js"></script>
    <script>
        const connection = new signalR.HubConnectionBuilder()
            .withUrl("/realtimehub")
            .build();

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

        connection.on("ReceiveNotification", (message) => {
            alert(`Notification: ${message}`);
        });

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

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

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

**Step 6: Run the Application**
Run your .NET Core application:

dotnet run

Open the HTML file in a web browser, enter a username and message, and click send. The message will be broadcast to all connected clients in real time, and notifications can also be sent and received instantly.

There is a growing need for real-time functionality in today's web development environment. Users anticipate fast updates, whether through dynamic dashboards, live chat, or real-time notifications. With the help of the .NET library SignalR, you can easily integrate real-time online capabilities into your apps. Using real-world examples to highlight SignalR's potential, we will examine how to build a web app with SignalR in .NET Core in this post.

## What are SignalR's prerequisites?
A few of the most important prerequisites for using .NET Core SignalR are:

### Code Visual Studio
VS Code, or Visual Studio Code, as it is commonly called. Microsoft is a software firm that developed this source code editor. With features like syntax highlighting, intelligent code completion, debugging, code refactoring, snippets, embedded Git, and more, it assists developers in writing client code. Any developer who wants to use SignalR should be familiar with the concepts and the source code editor. 

### Web Application with .NET Core
The .NET development businesses leverage .NET Core, an open-source, high-performance, cross-platform framework, to build contemporary, cloud-enabled apps. Working with .NET Core requires you to have the ability to construct these kinds of applications.

### A Brief Overview of .NET Core
An additional requirement for SignalR is a working grasp of the general-purpose software solution development framework .Net Core. It makes it possible for .NET developers to construct a wide range of software applications, including gaming, cloud, mobile, web, desktop, and more. Additionally, to begin using the SignalR service, a basic understanding of this technology is necessary.

## Conclusion
In essence, SignalR handles cross-browser and cross-platform interoperability, which makes it easier to create real-time web capabilities. It provides fallback options like lengthy polling when necessary, as well as contemporary transport technologies like WebSockets and Server-Sent Events. 

This enables your .NET Core developer to select the best transport based on network conditions and client capabilities. Your developer can guarantee that every user has a consistent real-time experience thanks to SignalR's adaptability. Therefore, when you are looking to hire developers from the best development partner who are SignalR experts and provide the best [ASP.Net development services](https://www.cmarix.com/aspdotnet-development.html) to integrate reliable and easy-to-use real-time communication into your online applications.
