SignalR 未在 Angular 服务内订阅

Question

我的 SignalR Angular 服务连接到后端正常。当我登录到我的应用程序时，我得到了 access_token。我也可以发送消息和订阅我刚刚发送的消息，但是我不能通过SignalR 订阅它。如果我打开两个浏览器并通过一个浏览器发送消息。 Portal signalr 服务消息计数增加 1 并且订阅方法来自这一行

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

return 通过订阅内的 console.log 发送新消息。

但是由于某种原因我无法通过服务接收消息。

目前，如果我将 test 指定为 BehaviorSubject 值：

private source = new BehaviorSubject("test");

然后组件输出中 ngOnInit 中的这一行

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

它从不return发送新订阅的消息。不是我所期望的，因为消息甚至没有进入服务。

虽然也值得注意，但我不能同时对其进行初始化测试。更多的是为了演示

所以如果它被初始化为private source = new BehaviorSubject(null); 组件控制台输出为 Output: null

如何让 SignalR 服务达到 return 的值？它使用 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

我使用的代码来自我制作的另一个 post，但我没有意识到可观察到的答案改变了主题名称或其他内容。不知道为什么 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)
    });

SignalR 未在 Angular 服务内订阅

SignalR not subscribing inside Angular service

signalr

azure-functions

angular