AspNetCore SignalR 1.1.0 - @aspnet/signalr works on Chrome and EdgeExplorer but not Firefox

[CreativeHouseDotOrg]

Issue description

AspNetCore SignalR 1.1.0 - @aspnet/signalr works on Chrome and EdgeExplorer but not Firefox.

Browsers Tested

• Microsoft EdgeHTML 17.17134 -> WORKS 👍
• Google Chrome Version 71.0.3578.98 (Official Build) (64-Bit) -> WORKS 👍
• Mozilla Firefox Quantum 64.0.2 (64-Bit) -> DOES NOT WORK 👎

Software versions

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

Question on Stackoverflow Link:

https://stackoverflow.com/questions/54217203/aspnetcore-signalr-1-1-0-aspnet-signalr-works-on-chrome-and-edgeexplorer-but

Detail Description:

I'm trying to create a realtime angular 7 webapp using signalr and aspnet Web backend, but I noticed that firefox can't establish a connection using signalR? The funny thing is this: Chrome and Edge CAN connect and send and receive data to the hub. Just not firefox...

If I look in to my SocketAPI Project dependencies I can see I got these SignalR packages installed:

• 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)

If I look in my package.json which lives under the WebClient Project, I can see the @aspnet/signalr 1.1.0 npm I've installed:

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

Server Configuration

I've set up cors on my SocketAPI Startup.cs like so:

Inside my ConfigureServices Method i have this Code:

// 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);
}

Inside my Configure Method

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();

}

I also created a AppHub Class like so:

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);
    }
}

Clientside Configuration

On the Clientside I have a HubService like this:

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);
  }

}

The following 'InitHubConnection' Method gets called by the HomeComponent

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);
  })
}

Now if I test this on Chrome and Edge then it works but if I try to connect to firefox I get the following error in 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**

I also searched on the MS Docs and found this:

Source : 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

But unfortunately this troubleshoot doesn't give a hint for a solution so I hoped I could ask you guys about this error... It's already driving me crazy, because it seems to work on Chrome and Edge... Just not firefox...

Any help on this one is highly appreciated!

dotnet --info output or About VS info

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

[CreativeHouseDotOrg]

Solution

It appears that i had the debugger messing around with the socket...

Below are two links with images showing the correct and the wrong case:

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

I hope this can help others with the same issue!

Kind Regards