In this post, we’ll use an actual example to demonstrate how to use SignalR with .NET Core Web API and Angular.
First, create an Azure SignalR service. After that, create a new .NET Web API project or use an existing one. Make sure to configure CORS to allow your Angular application to access the API.
To connect SignalR WITH .NET application, add the connection string in program.cs file as shown below:
string azureSignalrConnectionString = builder.Configuration.GetSection("AzureSignalR:ConnectionString").Value;
builder.Services.AddSignalR().AddAzureSignalR(azureSignalrConnectionString);
builder.Services.AddCors(options =>
{
options.AddPolicy("CORSPolicy",
builder => builder
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials()
.SetIsOriginAllowed((hosts) => true));
});
Install the SignalR package using below command:
Install-Package Microsoft.AspNetCore.SignalR
Configure SignalR in your program.cs
:
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapHub<NotificationService>("/notificationservice");
});
Create a Get method as shown below:
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SignalR;
using Newtonsoft.Json;
using SignalR.Services;
namespace SignalR.Controllers
{
[Route("api")]
[ApiController]
public class NotificationController : ControllerBase
{
private IHubContext<NotificationService,INotificationService> notificationHub;
public NotificationController(IHubContext<NotificationService,INotificationService> _notificationHub)
{
notificationHub = _notificationHub;
}
[HttpGet]
[Route("Notification")]
public async Task<string> Get()
{
string notification = "Notification from signalR";
await notificationHub.Clients.All.SendNotification(notification);
return notification;
}
}
}
Create a notification service as shown below:
using Microsoft.AspNetCore.SignalR;
namespace SignalR.Services
{
public class NotificationService : Hub<INotificationService>
{
public async Task SendMessage(string message)
{
await Clients.All.SendNotification( message);
}
}
}
Create a new Angular application or use an existing one. Install the @microsoft/signalr
package:
npm install @microsoft/signalr
Create a service in your Angular application to handle SignalR communication:
import { Component, OnInit } from '@angular/core';
import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
hubConnection!: HubConnection;
messages: string[] = [];
constructor() { }
ngOnInit() {
this.hubConnection = new HubConnectionBuilder()
.withUrl('https://localhost:7189/notificationservice')
.build();
this.hubConnection.start()
.then(() => console.log('Connected to SignalR Hub'))
.catch(err => console.error('Error while connecting to SignalR Hub: ', err));
}
}
After this run both Angular and .NET Web API solution.
In the console you can see that our Angular app is connected with Azure SignalR service which we have given in the .NET application.

Next, when we call the notification method in the API we will receive the message from .Net app to Angular app.
We can see that in network tab as shown below:

Conclusion:
By combining the power of Azure SignalR Service, Angular, and .NET Web API, you can create dynamic, real-time web applications that provide seamless user experiences. Whether you’re building a chat application, a live dashboard, or a collaborative tool, this technology stack empowers you to deliver real-time updates to your users, making your applications more engaging and interactive.
No Comment! Be the first one.