SignalR introduction and implementation using the.NET Core 6 Web API and Angular 14
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
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