在Angular中订阅SignalR消息,可以使用RxJS的Observable和Subject来处理。下面是一个示例代码:
首先,确保已经安装了SignalR和RxJS的依赖:
npm install @aspnet/signalr rxjs --save
在Angular的组件中,创建一个SignalR服务:
import { Injectable } from '@angular/core';
import * as signalR from '@aspnet/signalr';
import { Observable, Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class SignalRService {
private hubConnection: signalR.HubConnection;
private messageSubject: Subject = new Subject();
constructor() {
this.hubConnection = new signalR.HubConnectionBuilder()
.withUrl('')
.configureLogging(signalR.LogLevel.Information)
.build();
this.hubConnection.start().catch(err => console.error(err));
this.hubConnection.on('ReceiveMessage', (message: string) => {
this.messageSubject.next(message);
});
}
public getMessages(): Observable {
return this.messageSubject.asObservable();
}
}
在组件中使用SignalR服务:
import { Component, OnInit } from '@angular/core';
import { SignalRService } from './signalr.service';
@Component({
selector: 'app-root',
template: `
{{ message }}
`
})
export class AppComponent implements OnInit {
public messages: string[] = [];
constructor(private signalRService: SignalRService) {}
ngOnInit(): void {
this.signalRService.getMessages().subscribe(message => {
this.messages.push(message);
});
}
}
在上面的代码中,SignalR服务创建了一个messageSubject
,用于发布接收到的消息。在组件中通过调用getMessages
方法,订阅了这个Subject,并将接收到的消息添加到messages
数组中。
这样就可以在Angular中订阅SignalR消息了。