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);
    });
  }
}

信号视图模型

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

您可以尝试这种方法。在 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 包。

Answer 2

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

为您服务：

  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))
 }