Angular/SignalR Error: Failed to complete negotiation with the server

Question

Using SignalR for my server and Angular for my client... When I run my client I receive these errors:

zone.js:2969 OPTIONS https://localhost:27967/chat/negot         


        

Answer 1

I faced the slimier issue and I fixed it by adding

skipNegotiation: true,
transport: signalR.HttpTransportType.WebSockets

in client-side as @Caims mentioned. But I don't think this is the correct solution and feel more like a hack

Answer 2

In my case it wasn't necessary all those stuff, I was missing the https instead http, and it worked like a charm.

const connection = new signalR.HubConnectionBuilder()
  .configureLogging(signalR.LogLevel.Debug)
  .withUrl('https://localhost:44308/message')
  .build();

Answer 3

connection = new signalR.HubConnectionBuilder()
    .configureLogging(signalR.LogLevel.Debug)
    .withUrl("http://localhost:5000/decisionHub", {
      skipNegotiation: true,
      transport: signalR.HttpTransportType.WebSockets
    })
    .build();

Answer 4

I was facing the same problem in my Angular application when I try to connect to Azure SignalR service Azure Function.

[FunctionName("Negotiate")]
public static IActionResult Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req, [SignalRConnectionInfo(HubName = "broadcast")] SignalRConnectionInfo info,
    ILogger log) {
    log.LogInformation("Negotiate trigger function processed a request.");
    return info != null ? (ActionResult) new OkObjectResult(info) : new NotFoundObjectResult("SignalR could not load");
}

And below was my init() function code in Angular service.

init() {
    this.getSignalRConnection().subscribe((con: any) => {
        const options = {
            accessTokenFactory: () => con.accessKey
        };

        this.hubConnection = new SignalR.HubConnectionBuilder()
            .withUrl(con.url, options)
            .configureLogging(SignalR.LogLevel.Information)
            .build();

        this.hubConnection.start().catch(error => console.error(error));

        this.hubConnection.on('newData', data => {
            this.mxChipData.next(data);
        });
    });
}

My problem was with the con.accessKey. I just checked the properties of the SignalRConnectionInfo class and understood that I need to use accessToken instead of accessKey.

public class SignalRConnectionInfo {
    public SignalRConnectionInfo();

    [JsonProperty("url")]
    public string Url {
        get;
        set;
    }
    [JsonProperty("accessToken")]
    public string AccessToken {
        get;
        set;
    }
}

So after changing the code to accessTokenFactory: () => con.accessToken everything worked as usual.

Answer 5

I had the same problem, and it turns out that the launchSettings.json in the part where it says signalRchatServer does nothing, the url that worked with me was that of the iisexpress, I say it because there are many places where they say that the url is the one below .

Answer 6

I waste almost two days for this and finally figured out,

When this error occurs?

• When you upgrade your existing SignalR server project to .Net Core but do not upgrade the client
• When you create the SignalR server using .Net core but you use traditional .Net framework for the client

Why this error occurs?

• The error occurs because new SignalR does not allow you to use old server & new client or new server & old client

• It means if you create the SignalR server using .Net core then you must create the client using .Net Core

This was the issue in my case.