SignalR introduction and implementation using the.NET Core 6 Web API and Angular 14

Jaydeep Patil
5 min readJul 24, 2022

--

We are going to discuss the working of SignalR and Implementation step-by-step.

Agenda

  • Introduction of SignalR
  • Benefits of using SignalR
  • Implementation of SignalR with the help of .NET Core 6 Web API and Angular 14

Prerequisites

  • Visual Studio 2022
  • .NET Core 6 SDK
  • Angular 14
  • Node JS
  • VS Code

Introduction

  • SignalR is the library for ASP.NET developers that helps to add real-time functionality to our web application.
  • Also, SignalR provides web functionality to send content to all end-users rather than the server waiting for client requests.
  • The chat application is the real-time example of SignalR
  • Nowadays we are seeing many applications that are expected to send the information to all the users without refreshing the web page like some notifications and news feed for this we need a real-time server connection to fetch data and SignalR provides all this functionality.
  • Here you can see, that there is one server and three users in the above diagram
  • We take the eCommerce website example for a better understanding of SignalR
  • Suppose, the admin wants to send some product offers to all their subscribers, in that case, he just hit the products offering endpoint from his dashboard and clicks on send and all the users get the offer details, in this scenario SignalR plays a very important role.
  • Also, there are many cases in which SignalR is very used full like when we use microservice architecture and in that case, suppose there is one backend service which we containerize using docker and that will run in his own environment and there are multiple clients that are using the backend service and suppose there is any responsible person and he wants to send some kind of news feed to all his end-users in that case if we use SignalR then all users can get the information easily and in a real-time.
  • So, these are a few scenarios in which SignalR is very useful to provide real-time experience to all end-users.

Benefits of using SignalR

  • SignalR provides bi-directional communication between the server and one or more clients.
  • Broadcast the message to a particular client or multiple clients as per the needs.
  • If we notify all clients then using SiganlR is easy and efficient, notification may be the type of news feed, updates, alert messages, and some kind of offers.
  • Using SignalR web is easily creating a real-time chatroom application that is used by many users at a time and provides a great user experience.

Implementation of SignalR using .NET Core 6 Web API and Angular 14

Step 1)

Create a .NET Core Web API application

Step 2)

Configure your project

Step 3)

Provide some additional information about your project

Step 4)

Install SignalR NuGet package

Step 5)

Project Structure

Step 6)

Create IMessageHubClient.cs class inside the Hub Folder

Step 7)

Next, create MessageHub.cs class

Step 8)

Later on, create ProductOfferController.cs

Here we inject IHubContext which is part of SignalR and provides functionality to send messages

Step 9)

Next, register a few services related to SignalR and CORS policy in the Program.cs class

Step 10)

Finally, run your application and you will see swagger UI and our API endpoints which we are going to use to send messages

This is all about the backend application. Let’s start with the client application using Angular 14

Client Application

Step 1)

Create Angular application

ng new SignalRClient

Step 2)

Install SignalR library for client application

npm install @microsoft/signalr — save

Step 3)

Install bootstrap for a better user experience

ng add @ng-bootstrap/ng-bootstrap

next, add the bootstrap script inside the angular.json file inside the scripts and styles section

Step 4)

Next, open the app.component.ts file and add the following code

Step 5)

Later on, add the following Html snippet inside app.component.html to see the product offers which are sent by the server, here we test with only one user. In a real-time scenario, there are many clients which are using the same server, and the server able to send multiple messages to all the clients

Step 6)

Run your client application

npm start

Step 7)

Open the URL in the browser

http://localhost:4200/

Here you did not see any offer currently for that we need to hit the server API endpoint

Step 8)

Open the swagger UI of our backend application and execute the same as shown below

Step 9)

Again, open the client application window and you will see the offer message

In a real-time scenario, we use a scheduler, hangfire, and something like that which are going to run the task after a certain period of time and send offers to all end-users

Conclusion

We discussed working with SignalR. Also, the benefits and real-time scenarios in which SignalR plays a very important role and later on practical implementation using .NET Core 6 Web API and Angular 14 web application

--

--

Jaydeep Patil

Full Stack Developer | .Net Core API | Angular | SQL Server | Docker | Azure | Python