angular - SignalR 未在 Angular 服务内订阅

Question

我的 SignalR Angular 服务很好地连接到后端。当我登录我的应用程序时，我得到了我的 access_token。我也可以发送消息并订阅我刚刚发送的消息，但我无法通过 SignalR 订阅它。如果我打开了两个浏览器并通过一个浏览器发送消息。门户信号服务消息计数增加 1，订阅方法从这一行开始

 this.http.post('http://localhost:7070/api/messages', message).pipe(takeUntil(this.destroy)).subscribe(data => console.log(data));

通过该订阅内的 console.log 返回新消息。

但由于某种原因，我无法通过服务接收消息。
目前，如果我分配 test作为 BehaviorSubject 值:private source = new BehaviorSubject("test");然后在组件输出中的 ngOnInit 中的这一行

this.signalRService.signalReceived.subscribe(data => console.log("Output:", data))

它永远不会返回新订阅的消息。并不是我所期望的，因为该消息甚至没有进入服务。
虽然也值得注意我不能同时初始化测试。更多的是为了演示

所以如果它被初始化为 private source = new BehaviorSubject(null);组件控制台输出为 Output: null如何让 SignalR 服务返回值？它使用来自 this article 的 azure 函数代码并且它也可以毫无问题地连接到该文章中的示例聊天应用程序。

它也可以通过示例应用程序在 2 个不同的浏览器之间接收消息，因此我认为鉴于此测试有效，它与客户端的相关性比后端更多。我已经坚持了一段时间，所以我感谢任何帮助!
信号服务

import { Injectable, EventEmitter, OnDestroy, Output } from "@angular/core";
import * as signalR from "@microsoft/signalr";
import { SignalViewModel } from "./signal-view-model";
import { HttpClient, HttpParams } from "@angular/common/http";
import { BehaviorSubject, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Injectable({
  providedIn: "root"
})

export class SignalRService implements OnDestroy {
  @Output() onSignalRMessage: EventEmitter<any> = new EventEmitter();
  private hubConnection: signalR.HubConnection;
  private source = new BehaviorSubject(null);
  signalReceived = this.source.asObservable();
  destroy = new Subject();
  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).pipe(takeUntil(this.destroy)).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.source.next(data)
    });
  }

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


  getSignalReceived() {
    return this.signalReceived;
  }

  ngOnDestroy() {
    this.destroy.next();
    this.destroy.complete();
  }

}

Answer 1

我使用的是来自 answer 的代码从我发表的另一篇文章中，我没有意识到可观察到的答案改变了主题名称或其他任何内容。不知道为什么 EventEmitter 方式不起作用，但是一旦我将其调整为 newMessage它开始工作。

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

到

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