signalr - 角度 : Unable to pass API url in SignalR HubConnection

Question

我用 Angular6 开发了一个项目。需要开发实时聊天部分。为此，我在我的 asp.net core Web Api 项目中使用 SignalR。现在我想在我的 Angular 项目中使用此 Web Api 引用。

我正在使用this链接。

但是在 App.Component.ts 中提供 Web Api url 时，我收到以下错误:

Constructor of class 'HubConnection' is private and only accessible within the class declaration.

应用程序组件.ts:

import { HubConnection } from '@aspnet/signalr';
import { Message } from 'primeng/api';

export class AppComponent implements OnInit {
  public _hubConnection: HubConnection;
  msgs: Message[] = [];
  constructor() {   
  }
  ngOnInit() {
    this._hubConnection = new HubConnection('http://localhost:1874/notify'); // getting error on this line.

编辑:尝试了以下代码:-

修改App.Component.ts:

import { HubConnection } from '@aspnet/signalr';
import * as signalR from '@aspnet/signalr';
import { Message } from 'primeng/api';

export class AppComponent implements OnInit {
  public _hubConnection: HubConnection;
  msgs: Message[] = [];
  constructor() {   
  }
  ngOnInit() {       
    this._hubConnection = new signalR.HubConnectionBuilder()
          .withUrl('http://localhost:1874/notify')
          .configureLogging(signalR.LogLevel.Information)
          .build();

错误:

Failed to load http://localhost:1874/notify/negotiate: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin 'http://localhost:4200' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Answer 1

他们更改了 SignalR 客户端 HubConnection 的构造函数，不再允许您在客户端构造函数中传递路由，并将 HubConnection 构造函数设为私有(private)以强制执行更改。相反，您需要使用 HubConnectionBuilder，如下所示:

new HubConnectionBuilder().withUrl("/YOURROUTEHERE").build();

您需要在 header 中导入 HubConnectionBuilder，如下所示:

从 '@aspnet/signalr' 导入 { HubConnection, HubConnectionBuilder };

如果有帮助，我还刚刚发布了 @aspnet/signalr 1.0.2、RxJs 5.5.6 和 Angular 6 的 RxSignalR 示例的更新。查看 ReactiveChat component举个例子。