asp.net - SignalR 与 Angular 10 和 ASP.NET

Question

我正在尝试在 ASP.NET(不是 Core)和 Angular(目前是 10 个)应用程序中实现 SignalR。
Startup.cs 正在使用 Owin。
我能找到的每个文档或示例都是针对 ASP.NET Core 的，或者没有使用 Angular，所以有人能给我指出一个好的方向吗？
我能找到的最接近这个组合的是这个指南:https://www.c-sharpcorner.com/article/asp-net-signalr-angular2-and-typescript-real-time-clock/ ，但是我不断收到“无法读取未定义的属性‘hubConnection’”错误，可能是因为自从我开始使用 Angular 7 及更高版本以来，我不明白 SignalRService 类中的“$”在做什么。
任何帮助将不胜感激。

Answer 1

您可以使用此链接中的示例 SignalR using Angular 10
脚步:

安装需要的信号库

npm i @microsoft/signalr@latest --save

导入需要的类

import { HubConnection, HubConnectionBuilder, LogLevel } from'@microsoft/signalr';

连接到集线器

this._hubConnection = new HubConnectionBuilder()
  .withUrl('http://localhost:52864/chathub')
  .build();

听集线器上的方法

this._hubConnection.on('MessageReceived', (message) => {
  console.log(message);
});

开始连接

this._hubConnection.start()
  .then(() => console.log('connection started'))
  .catch((err) => console.log('error while establishing signalr connection: ' + err));

虚拟示例的样子:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HubConnection, HubConnectionBuilder, LogLevel } from '@microsoft/signalr';

@Component({
  selector: 'app-messaging',
  templateUrl: './messaging.component.html',
  styleUrls: ['./messaging.component.scss']
})
export class MessagingComponent implements OnInit {
  private _hubConnection: HubConnection;

  constructor(private _httpClient: HttpClient) { }

  ngOnInit(): void {
    this.connect();
  }

  public onSendButtonClick(): void {
    this._hubConnection.send('SendMessage', 'test message').then(r => { });
  }

  private connect(): void {
    this._hubConnection = new HubConnectionBuilder()
      .withUrl('http://localhost:52864/chathub')
      .build();

    this._hubConnection.on('MessageReceived', (message) => {
      console.log(message);
    });

    this._hubConnection.start()
      .then(() => console.log('connection started'))
      .catch((err) => console.log('error while establishing signalr connection: ' + err));
  }
}

注意:不需要安装'signalr-protocol-msgpack'