Angular不订阅SignalR消息 [英] Angular not subscribing to SignalR message

问题描述

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

I'm trying to subscribe to the message I sent, but it keep returning null in the browser

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

The SignalR connection is already established and I can send messages, but it's not subscribing to any changes. Why is that?

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

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)

    })

...

如何使它成功订阅?感谢您的帮助！

How can I get it to subscribe successfully? I appreciate any help!

推荐答案

您可以尝试这种方法.在signalR服务上，创建一个EventEmitter:

You can try this approach. On the signalR service create an EventEmitter:

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

并调用私有函数以 SignalViewModel 的形式接收数据.

And call the private function to receive data as 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 添加到构造函数中.

And don't forget add the signalRService to the constructor.

Update1:​​运行代码后，我可以成功连接到本地SignalR服务以及Azure SignalR服务，并且正在接收数据.如您所见，问题是没有连接，也没有接收到的数据.

Update1: After running your code, I can successfully connect to my local signalR service and also to the Azure SignalR Service and I'm receiveing data. As you can see the problem is not connecting and not with the received data.

您应该看到Azure函数出了什么问题.

You should see what is wrong with the Azure functions.

我还建议将您的客户端SignalR软件包从现在已废弃的 @ aspnet/signalr 更改为新的 @ microsoft/signalr 软件包.

Also I would recommend to change your client side SignalR package from @aspnet/signalr that is now obsolete to the new @microsoft/signalr package.

这篇关于Angular不订阅SignalR消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！