Angular：无法在 SignalR HubConnection 中传递 API url答案

【问题标题】：Angular : Unable to pass API url in SignalR HubConnectionAngular：无法在 SignalR HubConnection 中传递 API url
【发布时间】：2018-12-09 06:19:53
【问题描述】：

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

我正在使用this 链接。

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

“HubConnection”类的构造函数是私有的，只能访问在类声明中。

应用组件.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();

错误：

加载失败 http://localhost:1874/notify/negotiate：对预检请求的响应未通过访问控制检查：响应中的“Access-Control-Allow-Credentials”标头是“” 当请求的凭据模式为“包含”时，必须为“真”。因此，Origin 'http://localhost:4200' 不允许访问。这 XMLHttpRequest 发起的请求的凭证模式是由 withCredentials 属性控制。

【问题讨论】：

标签： signalr signalr-hub angular6 angular-cli-v6

【解决方案1】：

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

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

您需要在标题中导入 HubConnectionBuilder，如下所示：

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

如果有帮助，我还刚刚发布了针对@aspnet/signalr 1.0.2、RxJs 5.5.6 和 Angular 6 的 RxSignalR 示例的更新。请查看 ReactiveChat component 以获取示例。

【讨论】：

【解决方案2】：

这样试试，

 private hubConnection: signalr.HubConnection;    
 message: string;
 ngOnInit() {
    this.hubConnection = new signalr.HubConnection('');

    this.hubConnection
      .start()
      .then(() => {
        console.log('Connection started!');
        this.hubConnection.on('ReceiveMessage', (message) => { 
          alert(message);
        });
      })
      .catch(err => console.log('Error while establishing connection :('));

  }

【讨论】：

但现在包已重命名为 import { HubConnection } from '@aspnet/signalr';
出现错误“找不到命名空间信号器”，如果我将其更改为 signalR，则会出现错误“HubConnection 类的构造函数是私有的，只能在类声明中访问”
查看github.com/bursauxa/magoria/blob/…
有帮助吗？
测试版客户端允许您在 HubConnection 构造函数中传递路由。发布版本现在要求您改用 HubConnectionBuilder。

【解决方案3】：

在您的服务器代码中，您是否使用了 CORS？

public void ConfigureServices(IServiceCollection services)
{
    ...

    services.AddCors(options => options.AddPolicy("CorsPolicy", builder =>
    {
        builder.AllowAnyMethod()
               .AllowAnyHeader()
               .WithOrigins("http://localhost:4200")
               .AllowCredentials();
    }));

    ...
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    ...

    app.UseCors("CorsPolicy");

    app.UseSignalR(routes =>
    {
        // your routes
    });

    ...
}

【讨论】：