Angular/SignalR Error: Failed to complete negotiation with the server
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 😊. What you have to do is adding AllowCredentials
in server side. Anyway when it's coming to Azure you can't relay on that fix. So no need enable WSS only in client side.
Here is my ConfigureServices method:
public void ConfigureServices(IServiceCollection services){ services.AddCors(o => o.AddPolicy("CorsPolicy", builder => { builder .AllowAnyMethod() .AllowAnyHeader() .AllowCredentials() .WithOrigins("http://localhost:4200"); })); services.AddSignalR(); services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);}
This is my Configure method:
public void Configure(IApplicationBuilder app, IHostingEnvironment env){ if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.UseCors("CorsPolicy"); app.UseSignalR(routes => { routes.MapHub<NotifyHub>("/notify"); }); app.UseMvc();}
And finally this is how I connected from client-side:
const connection = new signalR.HubConnectionBuilder() .configureLogging(signalR.LogLevel.Debug) .withUrl("http://localhost:5000/notify", { //skipNegotiation: true, //transport: signalR.HttpTransportType.WebSockets }).build();connection.start().then(function () { console.log('Connected!');}).catch(function (err) { return console.error(err.toString());});connection.on("BroadcastMessage", (type: string, payload: string) => { this.msgs.push({ severity: type, summary: payload });});