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 服务返回值？它使用了本文中的 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

我正在使用我所做的另一篇文章的答案中的代码，但我没有意识到可观察到的答案更改了主题名称或其他内容。不知道为什么 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)
    });