SignalR in Angular?
SignalR is a real-time communication library developed by Microsoft, primarily for .NET
applications. When used with Angular, it allows real-time client-server communication using
WebSockets (or fallbacks like long polling or Server-Sent Events).
In Angular, SignalR is commonly used to receive real-time updates from the server without
needing to poll for changes. The communication is bidirectional, meaning both the server and
client can call methods on each other.
🔹 Uses of SignalR in Angular
SignalR is typically used in Angular apps for:
Real-time chat applications
Live notifications
Real-time dashboards or stock tickers
Collaborative apps (e.g., live document editing)
Game state updates
🔹 Can SignalR Replace Functions and Observables?
❌ It doesn't replace functions: SignalR is not a substitute for general-purpose
functions.
✅ It can complement or replace Observables in specific use cases: like when you're
using Observables for real-time data streams, SignalR can be the source of those
streams.
However, Observables are still used with SignalR to manage incoming data in Angular because
Angular is reactive.
🔹 Simple Example: SignalR in Angular
Scenario: Receive a real-time message from server and display it.
1. Install SignalR Client
npm install @microsoft/signalr
2. Angular Service Using SignalR
// chat.service.ts
import { Injectable } from '@angular/core';
import * as signalR from '@microsoft/signalr';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ChatService {
private hubConnection!: signalR.HubConnection;
private messageSubject = new BehaviorSubject<string>(''); // Observable
source
public message$ = this.messageSubject.asObservable(); // Expose as
observable
constructor() {
this.startConnection();
this.registerOnServerEvents();
}
private startConnection() {
this.hubConnection = new signalR.HubConnectionBuilder()
.withUrl('https://localhost:5001/chathub') // Your SignalR hub endpoint
.build();
this.hubConnection
.start()
.then(() => console.log('Connection started'))
.catch(err => console.log('Error while starting connection: ' + err));
}
private registerOnServerEvents(): void {
this.hubConnection.on('ReceiveMessage', (message: string) => {
this.messageSubject.next(message); // Push to observable
});
}
public sendMessage(user: string, message: string): void {
this.hubConnection.invoke('SendMessage', user, message)
.catch(err => console.error(err));
}
}
3. Angular Component Using SignalR
// chat.component.ts
import { Component, OnInit } from '@angular/core';
import { ChatService } from './chat.service';
@Component({
selector: 'app-chat',
template: `
<div>
<p>Latest message: {{ message }}</p>
<button (click)="send()">Send Hello</button>
</div>
`
})
export class ChatComponent implements OnInit {
message: string = '';
constructor(private chatService: ChatService) {}
ngOnInit(): void {
this.chatService.message$.subscribe(msg => {
if (msg) this.message = msg;
});
}
send() {
this.chatService.sendMessage('User1', 'Hello from Angular');
}
}
🔹 Summary
Feature SignalR
Type Real-time communication library
Replaces Functions? ❌ No
Replaces Observables? ⚠️ Only as a data source (you still use Observables to manage flow)
Use Cases Chat, notifications, live dashboards
