How to add SignalR to Asp.Net Core 3.0 app using Visual Studio 2019

In this tutorial, we are going to cover how to add signalr to Asp.Net Core 3.0 app using Visual Studio 2019. Signalr is basically an open source library that helps us to create real time web applications like voting system applications, gaming applications, dashboard monitoring systems, chat applications, social networks, travel alerts, notification alerts and etc.

So, first-of-all, we will create a new Asp.Net Core 3.0 application using visual studio 2019 and then we will see how to add signalr to Asp.Net Core 3.0 app.

Prerequisite for this tutorial.

• .Net Core 3.0 (you can use 2.1 or 2.2 as well)
• Visual Studio 2019

How to add signalr to Asp.Net Core 3.0 app using Visual Studio 2019

Let’s start with a very simple example of how to add signalr to Asp.Net Core 3.0 app using visual studio 2019.

Step # 1: How to create an Asp.Net Core 3.0 web application using Visual Studio 2019?

In this step, we will create a new Asp.Net Core 3.0 app using visual studio 2019. So, open visual studio 2019, then click on the Create a new Project and then select Asp.Net Core web Application and then click on the Next button. Then enter the project name(E.g. SignalrWithAspNetCore3) in the project name field and then click on the Create button. Then select Asp.Net Core 3.0 framework from the upper dropdown and then select Web Application (Model-View-Controller) template from the template’s list. And then click on the Create button. It will create a new Asp.Net Core 3.0 application.

Now, the Asp.Net Core 3.0 application creation part is completed.

Step # 2: How to add signalr to Asp.Net Core 3.0 app?

In this step, we will see how to add signalr to Asp.Net Core 3.0 app in step by step.

1: add signalr client library:

In this step, we will see how to add Signalr Client Library. So, right click on the project name and then click on Add and then click on the Client-Side Library… and then you will see a new popup with the name of Add Client-Side Library. Now, select unpkg from Provider dropdown and then choose these specific files and then click on the Install button as you see in the below screenshot.

2: how to add signalr hub:

Now, in this step, we will see how to signalr hub in Asp.Net Core 3.0 application. Basically, SignalR hub is a class that inherits from Microsoft.AspNetCore.SignalR.Hub library.

So, right click on the Project name and then click on Add and then select class and then enter the name (E.g. ChatHub.cs) and then click on the Add button.

Now, write the code in ChatHub class as you do see in the below file.

Here in the above code, we have created a SendMessage method to send a message to all clients and within this method we are calling the ReceiveMessage method for the connected clients.

3: How to Configure Signalr in Asp.Net Core 3.0 application to handle signalr request:

Now, go to project folder structure and then open Startup.cs file and then write this below line of code within the ConfigureServcies method.

Now, write the below code within the Configure method in Startup.cs file.

Here in the above code, we configure the route to SignalR hubs using UseSignalR method. And this method add SignalR to middleware pipeline.

4: Add Javascript Code

So, now we will create some javascript code where we will call the server method called SendMessage and also we will handle the ReceiveMessage method which is usually called from the server to send a message to the client.

So, go to project folder structure and then go to js folder which is under the wwwroot folder and then add a new js file with the name of Chat.js and then write the code as you do see in the below file.

5: add front-end code:

Now, in this step, we will write some front end code. So, go to index.cshtml file and then write the code as you do see in the below file.

Now, finally run the project by pressing f5 and then you will see the output as you do see in the below screenshot.

Thank you for reading. Please keep visiting and share this article!