Step-by-Step Guide to SignalR and Angular Integration

What is SignalR and Angular Integration?

Today, the importance of real-time web applications is increasing day by day. SignalR and Angular integration is a powerful method preferred for providing live notifications, chat systems, and instant data updates in interactive web applications. While SignalR provides bi-directional and low-latency communication between the server and the client, Angular is an indispensable JavaScript framework for modern and scalable frontend development. In this article, we will address how to perform SignalR and Angular integration step by step.

Preparing the Angular Application with SignalR

For SignalR and Angular integration, you first need a .NET backend based on SignalR and an Angular frontend project. After creating the SignalR hub, you can connect to the server in your Angular application using the @microsoft/signalr package. Below, you can find a basic integration example for both the server side and the client side.

SignalR Server (Backend) Side Setup

// Add SignalR in Startup.cs
 dotnet add package Microsoft.AspNetCore.SignalR

public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapHub<ChatHub>("/chathub");
    });
}

// ChatHub.cs
using Microsoft.AspNetCore.SignalR;
public class ChatHub : Hub
{
    public async Task SendMessage(string user, string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

SignalR Connection with Angular Client

// Terminal: npm install @microsoft/signalr
import { Component, OnInit } from '@angular/core';
import * as signalR from '@microsoft/signalr';

@Component({
  selector: 'app-chat',
  template: `
    <div>
      <input [(ngModel)]="message" />
      <button (click)="send()">Send</button>
      <ul>
        <li *ngFor="let msg of messages">{{msg}}</li>
      </ul>
    </div>`
})
export class ChatComponent implements OnInit {
  private hubConnection: signalR.HubConnection;
  public messages: string[] = [];
  public message: string = '';
  ngOnInit() {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .withUrl('https://localhost:5001/chathub')
      .build();
    this.hubConnection.start();
    this.hubConnection.on('ReceiveMessage', (user, message) => {
      this.messages.push(`${user}: ${message}`);
    });
  }
  send() {
    this.hubConnection.invoke('SendMessage', 'User', this.message);
    this.message = '';
  }
}

Real-Time Applications with SignalR and Angular

Thanks to SignalR and Angular integration, you can easily add features such as instant data transmission, notifications, live chat, and games to your modern applications. With a well-configured SignalR service and Angular client, reliable communication with minimal latency is ensured. One of the best practices for a layered and easy-to-maintain code base is to abstract SignalR services as Angular services.

Conclusion: Advantages of SignalR and Angular Integration

In short, SignalR and Angular integration is very practical for adding real-time capabilities to web projects. As seen in the code examples, you can easily exchange real-time data between your Angular client and SignalR hubs. This integration increases user experience and plays an important role in the development of modern and interactive web applications.