Angular 未订阅 SignalR 消息

Question

我正在尝试订阅我发送的消息，但它一直在浏览器中返回 null

SignalR 连接已经建立，我可以发送消息，但它没有订阅任何更改。这是为什么？

SignalR 服务

import { Injectable, EventEmitter } from "@angular/core";
import * as signalR from "@aspnet/signalr";
import { SignalViewModel } from "./signal-view-model";
import { HttpClient, HttpParams } from "@angular/common/http";


@Injectable({
  providedIn: "root"
})
export class SignalRService {
  private hubConnection: signalR.HubConnection;
  signalReceived = new EventEmitter<SignalViewModel>();

  constructor(private http: HttpClient) {
    this.buildConnection();
    this.startConnection();
  }

  private buildConnection = () => {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .withUrl("http://localhost:7070/api")
      .build();
  }
  sendMessage(message: SignalViewModel) {

    this.http.post('http://localhost:7070/api/messages', message).subscribe(data => console.log(data));
  }
  private startConnection = () => {
    this.hubConnection
      .start()
      .then(() => {
        console.log("Connection Started...");
        this.registerSignalEvents();
      })
      .catch(err => {
        console.log("Error while starting connection: " + err);

        //if you get error try to start connection again after 3 seconds.
        setTimeout(function () {
          this.startConnection();
        }, 3000);
      });
  }

  private registerSignalEvents() {
    this.hubConnection.on("SignalMessageReceived", (data: SignalViewModel) => {
      this.signalReceived.emit(data);
    });
  }
}

SignalViewModel

export class SignalViewModel {
  clientuniqueid: string;
  type: string;
  message: string;
  date: Date;
}

分量

  notificationSubscription: Subscription;

  ngOnInit() {

 this.signalRService.signalReceived.subscribe(msg => {
      this.messages.push(msg);
      console.log(this.messages)

    });

//I also tried it like the following, but same issue

 this.notificationSubscription = this.signalRService.signalReceived.subscribe(msg => {
      this.messages.push(msg);
      console.log(this.messages)

    })

...

如何让它订阅成功？感谢您的帮助！

Answer 1

你必须使用 observable，在你的情况下你会有这样的东西：

为您服务：

  import { BehaviorSubject } from 'rxjs';

  // In your declaration
  private source = new BehaviorSubject();
  signalReceived = this.source.asObservable();

  private registerSignalEvents() {
    this.hubConnection.on("SignalMessageReceived", (data: SignalViewModel) => {
      this.source.next(data)
    });
  }

在您的组件中：

ngOnInit() {
    this.signalRService.signalReceived.subscribe(data => console.log(data))
 }

Answer 2

你可以试试这个方法。在 signalR 服务上创建一个 EventEmitter：

@Output() onSignalRMessage: EventEmitter<any> = new EventEmitter();

并调用私有函数接收数据为SignalViewModel。

private registerSignalEvents() {
    this.hubConnection.on("SignalMessageReceived", (data: SignalViewModel) => {
      this.newMessage(data as SignalViewModel);
    });
  }

private newMessage(data: SignalViewModel) {
    this.onSignalRMessage.emit(data);
  }

然后在组件上：

ngOnInit(): void {
  /** Invoked when is received new data*/
  this.signalRService.onSignalRMessage.subscribe((data: SignalViewModel) => {
    console.log(data);
  });

并且不要忘记将 signalRService 添加到构造函数中。

更新 1：在运行你的代码之后，我可以成功连接到我的本地 signalR 服务和 Azure SignalR 服务，并且我正在接收数据。如您所见，问题不在于连接，也不在于接收到的数据。

你应该看看 Azure 函数有什么问题。

此外，我建议将您的客户端 SignalR 包从现在已过时的 @aspnet/signalr 更改为新的 @microsoft/signalr 包。

Angular 未订阅 SignalR 消息

Angular not subscribing to SignalR message

azure

signalr

azure-functions

angular