AspNetCore SignalR 1.1.0-@ aspnet / signalr在Chrome和EdgeExplorer上有效，但在Firefox上不可用

Question

问题描述

AspNetCore SignalR 1.1.0-@ aspnet / signalr在Chrome和EdgeExplorer上有效，但在Firefox上不可用。

测试过的浏览器

• [X] Microsoft EdgeHTML 17.17134->作品
• [X] Google Chrome版本71.0.3578.98（正式版本）（64位）->工作
• [] Mozilla Firefox Quantum 64.0.2（64位）->不起作用

软件版本

• [X] .NET Core API
• [X] Angular 7.2.0
• [X] @ aspnet / signalr 1.1.0

对github.com/aspnet链接的疑问：

https://github.com/aspnet/Docs/issues/10441

详细说明：

我正在尝试使用signalr和aspnet Web后端创建实时的angular 7 webapp，但是我注意到firefox无法使用signalR建立连接？有趣的是：Chrome和Edge可以连接并发送和接收数据到集线器。只是不是Firefox ...

如果我查看SocketAPI Project依赖项，可以看到我安装了以下SignalR软件包：

• Microsoft.AspNetCore.SignalR（1.1.0）
• Microsoft.AspNetCore.SignalR.Common（1.1.0）
• Microsoft.AspNetCore.SignalR.Core（1.1.0）
• Microsoft.AspNetCore.SignalR.Protocols.Json（1.1.0）

如果我查看位于WebClient项目下的package.json，可以看到已安装的@ aspnet / signalr 1.1.0 npm：

{
  "name": "client-app",
  "version": "0.0.0",
  "scripts": {
    ...
  },
  "private": true,
  "dependencies": {
    ...
    "@aspnet/signalr": "^1.1.0",
    ...
  },
  "devDependencies": {
    ...
  }
}

服务器配置

我已经在SocketAPI Startup.cs 上设置了cors，如下所示：

在我的 ConfigureServices方法 中，我有以下代码：

// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
    services.Configure<MvcOptions>(options =>
    {
        options.Filters.Add(new RequireHttpsAttribute());

    });

    //*************************
    // Setup CORS For SignalR *
    //*************************
    services.AddCors(options => options.AddPolicy("CorsPolicy", builder =>
    {
        builder
        .WithOrigins(Configuration.GetSection("URIs").GetValue<string>("CLIENT_URL")) // Only allow adress of BHR.WebClient
        .AllowAnyMethod()
        .AllowAnyHeader()
        .AllowCredentials();
    }));

    services.AddSignalR();

    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
}

在我的 配置方法

中

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

    app.UseCors("CorsPolicy");

    app.UseSignalR(routes =>
    {
        routes.MapHub<AppHub>("/app");
    });

    app.UseHttpsRedirection();
    app.UseMvc();

}

我还创建了一个 AppHub 类，如下所示：

public class AppHub : Hub
{
    public void SendToAll(string name, string message)
    {
        Clients.All.SendAsync("sendToAll", name, message);
    }
    public override async Task OnConnectedAsync()
    {
        Console.Write(Context.ConnectionId+" Connected");
        //await Groups.AddToGroupAsync(Context.ConnectionId, "SignalR Users");
        await base.OnConnectedAsync();
    }
    public override async Task OnDisconnectedAsync(Exception exception)
    {
        Console.Write(Context.ConnectionId + " Disonnected");
        //await Groups.RemoveFromGroupAsync(Context.ConnectionId, "SignalR Users");
        await base.OnDisconnectedAsync(exception);
    }
}

客户端配置

在客户端，我有一个 HubService ：

import { Injectable, EventEmitter, Inject } from '@angular/core';
import { HubConnection, HubConnectionBuilder } from '@aspnet/signalr';
import * as signalR from '@aspnet/signalr';

@Injectable({
  providedIn: 'root'
})
export class HubService {

  constructor(
    @Inject('SAPI_URL') private sapiUrl: string
  ) { }

  hubConnections: Map<string, HubConnection> = new Map<string, HubConnection>();

  OnReceive: EventEmitter<any> = new EventEmitter<any>();

  // this.Connect();

  BuildHub(name: string = "AppHub", url: string = "app"): HubConnection {

    this.hubConnections.set(name, new HubConnectionBuilder()
      .withUrl(this.sapiUrl + "/" + url, {
        skipNegotiation: true,
        transport: signalR.HttpTransportType.WebSockets
      })
      //.configureLogging(signalR.LogLevel.Information)
      //.configureLogging(signalR.LogLevel.Debug)
      .build());
    return this.hubConnections.get(name);
  }

}

HomeComponent

会调用以下“ InitHubConnection”方法

InitHubConnection(): any {
  let hubConnection: HubConnection = this.hubService.BuildHub();
  console.log(hubConnection);
  this.Connect();

}
Connect() {
  this.hubService.hubConnections.get('AppHub')
    .start()
    .then(() => {
      console.log('Connection started!');
      this.hubService.hubConnections.get('AppHub').send("sendToAll", "John", "Doe");
    })
    .catch(err => {
      console.log('Error while establishing connection :(')
      //this.Connect(); Try reconnect
    });
  this.hubService.hubConnections.get('AppHub').on('sendToAll', (...args: any[]) => {
    console.log(args);
  })
}

现在，如果我在Chrome和Edge上进行了测试，那么它可以工作，但是如果我尝试连接到Firefox，则在Firefox中会出现以下错误：

**Firefox can't establish a connection to the server at wss://localhost:44336/app. WebSocketTransport.js:85
[2019-01-16T12:26:53.183Z] Error: Failed to start the connection: null**

我还搜索了MS文档，发现了这一点：

来源：https://docs.microsoft.com/en-us/aspnet/signalr/overview/testing-and-debugging/troubleshooting#firefox-cant-establish-a-connection-to-the-server-at-address-error-in-firebug

但是不幸的是，此故障排除方法没有给出解决方案的提示，所以我希望我可以向大家询问这个错误...它已经使我发疯，因为它似乎可以在Chrome和Edge上使用...只是没有Firefox ...

对此有任何帮助，深表感谢！

dotnet-信息输出或关于VS信息

PM> dotnet --info output
.NET Core SDK (gemäß "global.json"):
 Version:   2.2.100
 Commit:    b9f2fa0ca8

Laufzeitumgebung:
 OS Name:     Windows
 OS Version:  10.0.17134
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\2.2.100\

Host (useful for support):
  Version: 2.2.0
  Commit:  1249f08fed

.NET Core SDKs installed:
  1.1.8 [C:\Program Files\dotnet\sdk]
  1.1.9 [C:\Program Files\dotnet\sdk]
  1.1.11 [C:\Program Files\dotnet\sdk]
  2.1.103 [C:\Program Files\dotnet\sdk]
  2.1.104 [C:\Program Files\dotnet\sdk]
  2.1.200 [C:\Program Files\dotnet\sdk]
  2.1.201 [C:\Program Files\dotnet\sdk]
  2.1.202 [C:\Program Files\dotnet\sdk]
  2.1.403 [C:\Program Files\dotnet\sdk]
  2.1.500 [C:\Program Files\dotnet\sdk]
  2.1.503 [C:\Program Files\dotnet\sdk]
  2.2.100 [C:\Program Files\dotnet\sdk]

.NET Core runtimes installed:
  Microsoft.AspNetCore.All 2.1.5 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.1.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.1.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.2.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.5 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.1.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.1.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.2.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 1.0.10 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 1.0.11 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 1.0.13 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 1.1.7 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 1.1.8 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 1.1.10 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.0.6 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.0.7 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.0.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.6 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.7 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.2.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]

To install additional .NET Core runtimes or SDKs:
  https://aka.ms/dotnet-download

Answer 1

解决方案

看来我让调试器弄乱了套接字...

下面是两个带有正确和错误大小写图像的链接：

WRONG -> I had the Settings set to Chrome and without script debugger

CORRECT -> The Settings like this resolved the error and all browsers were capable of Communicating with eachother

我希望这可以帮助其他人解决同样的问题！

亲切问候