SignalR with Angular - SignalR and Frameworks

Syntax

The syntax for using SignalR with Angular is as follows:

import { Injectable } from '@angular/core';
import * as signalR from '@microsoft/signalr';
import { Observable, Subject } from 'rxjs';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class SignalRService {
  private hubConnection: signalR.HubConnection;
  private subject: Subject<string> = new Subject<string>();

  constructor() {
    this.initConnection();
  }

  private initConnection(): void {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .withUrl(environment.apiBaseUrl + '/notification-hub')
      .build();

    this.hubConnection.start().catch(err => console.log('Error while starting connection: ' + err));

    this.hubConnection.on('testNotification', (data: string) => {
      this.subject.next(data);
    });
  }

  public getNotifications(): Observable<string> {
    return this.subject.asObservable();
  }
}

Example

Here is an example of using the SignalRService in an Angular component:

import { Component, OnInit } from '@angular/core';
import { SignalRService } from '../services/signalr.service';

@Component({
  selector: 'app-notification',
  template: `
    <div *ngFor="let notification of notifications$ | async">{{ notification }}</div>
  `
})
export class NotificationComponent implements OnInit {
  notifications$: Observable<string>;

  constructor(private signalRService: SignalRService) { }

  ngOnInit(): void {
    this.notifications$ = this.signalRService.getNotifications();
  }
}

Output

The output of the above example will be a list of notifications that are received through SignalR.

Explanation

SignalR is a library for ASP.NET Core that allows for real-time communication between the server and client. It uses WebSockets as the default transport but falls back to other transports (such as long polling) if WebSockets are not available.

By using SignalR with Angular, we can provide a real-time user experience to our users by automatically updating the UI as new data becomes available.

The SignalRService is a wrapper around the SignalR library that provides an observable stream of notifications to any component that injects it.

In the example above, we have a NotificationComponent that uses the SignalRService to get updates and displays them in the UI.

Use

The SignalRService can be used to provide real-time updates to any part of an Angular application. By subscribing to the observable stream of notifications, a component can automatically update its UI as new data becomes available.

Important Points

• SignalR is a library for real-time communication between the server and client in ASP.NET Core.
• SignalR with Angular can provide a real-time user experience by updating the UI as new data becomes available.
• The SignalRService is a wrapper around the SignalR library that provides an observable stream of notifications to any component that injects it.

Summary

In summary, SignalR with Angular is a powerful combination that can provide a real-time user experience to a web application. By using the SignalRService, any component can automatically update its UI as new data becomes available through SignalR.