Post
Ask Question

SignalR Introduction And Implementation Using The .NET Core 6 Web API And Angular 14

In this article, we will discuss the working of SignalR and its 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. It helps to add real-time functionality to web applications.
  • Also, SignalR provides web functionality to send content to all end-users, rather than requiring the server to wait for client requests.
  • The chat application is the real-time example of SignalR.
  • Nowadays we see many applications that are expected to send information to all users without refreshing the web page, like some notifications and newsfeeds. For this, we need a real-time server connection to fetch data. SignalR provides all this functionality.

  • Here you can see that there is one server and three users in the above diagram.
  • We will use 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, they would just choose the products offering endpoint from their dashboard and click on send. All the users will get the offer details. In this scenario, SignalR plays very important role.
  • There are many cases in which SignalR is very useful, like when we use microservice architecture. In that case, suppose there is one backend service that we containerize using docker, and that will run in its own environment where there are multiple clients using the backend service. If we suppose that there is a person who wants to send some kind of newsfeed update to all their end-users, in that case, if we use SignalR, all users can get the information easily and in a real-time.
  • These are a few scenarios in which SignalR is quite useful for providing real-time experience to all end-users.

Benefits of using SignalR

  • SignalR provides bi-directional communication between a server and one or more clients.
  • It broadcasts messages to a particular client or multiple clients as per need.
  • If we notify all clients, using SignalR is easy and efficient. The notification may be some news feed updates, alert messages, or some kind of offers.
  • Using SignalR web is an easy way to create a real-time chatroom application that can be used by many different users at one time. It also 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.

namespace SignalRDemo.Hub {
    public interface IMessageHubClient {
        Task SendOffersToUser(List < string > message);
    }
}

Step 7

Next, create MessageHub.cs class.

using Microsoft.AspNetCore.SignalR;
namespace SignalRDemo.Hub {
    public class MessageHub: Hub < IMessageHubClient > {
        public async Task SendOffersToUser(List < string > message) {
            await Clients.All.SendOffersToUser(message);
        }
    }
}

Step 8

Later on, create ProductOfferController.cs.

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SignalR;
using SignalRDemo.Hub;
namespace SignalRDemo.Controllers {
    [Route("api/[controller]")]
    [ApiController]
    public class ProductOfferController: ControllerBase {
        private IHubContext < MessageHub, IMessageHubClient > messageHub;
        public ProductOfferController(IHubContext < MessageHub, IMessageHubClient > _messageHub) {
                messageHub = _messageHub;
            }
            [HttpPost]
            [Route("productoffers")]
        public string Get() {
            List < string > offers = new List < string > ();
            offers.Add("20% Off on IPhone 12");
            offers.Add("15% Off on HP Pavillion");
            offers.Add("25% Off on Samsung Smart TV");
            messageHub.Clients.All.SendOffersToUser(offers);
            return "Offers sent successfully to all users!";
        }
    }
}

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

Step 9

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

using SignalRDemo.Hub;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddSignalR();
builder.Services.AddCors(options => {
    options.AddPolicy("CORSPolicy", builder => builder.AllowAnyMethod().AllowAnyHeader().AllowCredentials().SetIsOriginAllowed((hosts) => true));
});
builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment()) {
    app.UseSwagger();
    app.UseSwaggerUI();
}
app.UseCors("CORSPolicy");
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints => {
    endpoints.MapControllers();
    endpoints.MapHub < MessageHub > ("/offers");
});
app.UseHttpsRedirection();
app.MapControllers();
app.Run();

Step 10

Finally, run your application. You should see the swagger UI and our API endpoints, which you can 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.

"styles": [
             "src/styles.css",
             "./node_modules/bootstrap/dist/css/bootstrap.min.css"
           ],
           "scripts": [
             "./node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]

Step 4

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

import { Component } from '@angular/core';
import { HubConnection, HubConnectionBuilder, LogLevel } from '@microsoft/signalr';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'SignalRClient';
    private hubConnectionBuilder!: HubConnection;
    offers: any[] = [];
    constructor() {}
    ngOnInit(): void {
        this.hubConnectionBuilder = new HubConnectionBuilder().withUrl('https://localhost:7219/offers').configureLogging(LogLevel.Information).build();
        this.hubConnectionBuilder.start().then(() => console.log('Connection started.......!')).catch(err => console.log('Error while connect with server'));
        this.hubConnectionBuilder.on('SendOffersToUser', (result: any) => {
            this.offers.push(result);
        });
    }
}

Step 5

Later on, add the following Html snippet inside app.component.html to see the product offers that are sent by the server. Here we tested with only one user. In a real-time scenario, there may be many clients who are using the same server. The server will be able to send multiple messages to all the clients.

<h2>Data loaded from the Web API:</h2>
<div *ngIf="offers.length>0" class="alert alert-warning" role="alert">
    <li *ngFor="let item of offers"> 
      Offers: {{item}}
    </li> 
</div>

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 what is shown below:

Step 9

Again, open the client application window. You will see the offer message.

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

Conclusion

In this article, we discussed working with SignalR and the benefits and real-time scenarios in which SignalR plays a very important role. Later on, we discussed its practical implementation using .NET Core 6 Web API and the Angular 14 web application.


Similar Articles