Failed to start the connection: Error: WebSocket failed to connect

Question

Error: Failed to start the connection: Error: WebSocket failed to connect. The connection could not be found on the server, either the endpoint may not be a SignalR endpoint, the connection ID is not present on the server, or there is a proxy blocking WebSockets. If you have multiple servers check that sticky sessions are enabled.

WebSocketTransport.js:49 WebSocket connection to 'ws://xxxxxx/production/web-services/hubs/spreadhub' failed:

Angular.ts

 ngOnInit(): void {

      // For signalR Hub connection
      this.connection  = new HubConnectionBuilder()  
      .withUrl('http://xxx.xxx.com/production/web-services/hubs/spreadhub', {  // localhost from **AspNetCore3.1 service**
        skipNegotiation: true,
        transport: signalR.HttpTransportType.WebSockets
      })  
      .build();

        this.connection.on('dataReceived', (data: string) => {
          var model = JSON.parse(data);

      });
  
      this.connection.start().then(() => { // to start the server
             console.log('server connected!!!');
         }).catch(err => console.log(err));
  }

where did you run this? On linux or windows? I also face the same problem. I'm on httpd and kestrel. I think it has to do with web socket connection not allowed in httpd or forwarded to kestrel. — Ariwibawa
– Ariwibawa, Commented Feb 2, 2022 at 9:51
For me, the issue was that our traffic sits behind a proxy which was causing issues. This answer helped me: stackoverflow.com/a/68732723/8644294 — Ash K
– Ash K, Commented Feb 22, 2022 at 21:08

Jeremy Caney · Accepted Answer · 2022-11-12 02:45:35Z

17

Navigate to Control Panel > Programs > Programs and Features > Turn Windows features on or off (left side of the screen).
Open the following nodes: Internet Information Services > World Wide Web Services > Application Development Features.
Select the WebSocket Protocol feature. Select OK.

enter image description here

https://learn.microsoft.com/en-us/aspnet/core/fundamentals/websockets?view=aspnetcore-7.0

edited Nov 12, 2022 at 2:45

Jeremy Caney

7,808115 gold badges58 silver badges86 bronze badges

answered Nov 9, 2022 at 1:38

Ha Phan

1711 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kiril1512 · Accepted Answer · 2021-12-03 15:43:55Z

9

You don't need to specify the full url, just the hub you want to connect to... Assuming your hub name is spreadhub you just need:

this.connection  = new HubConnectionBuilder()  
    .withUrl('https://localhost:5001/spreadhub', {  // localhost from **AspNetCore3.1 service**
    skipNegotiation: true,
    transport: signalR.HttpTransportType.WebSockets
    })  
    .build();

On the server, if deployed to azure, don't forget to turn on websockets like:

edited Dec 3, 2021 at 15:43

answered Dec 3, 2021 at 15:35

Kiril1512

3,6314 gold badges20 silver badges48 bronze badges

1 Comment

M K Over a year ago

local service working fine ourside. Issue occur in online service

Umair Sarfraz · Accepted Answer · 2024-02-13 11:58:51Z

8

This issue was caused by program restrictions on utilizing JWT with WebSockets/ServerSentEvents. Solution to this problem

.AddJwtBearer(configureOptions =>
        {
            configureOptions.ClaimsIssuer = jwtAppSettingOptions[nameof(JwtIssuerOptions.Issuer)];
            configureOptions.TokenValidationParameters = tokenValidationParameters;
            configureOptions.SaveToken = true;
            configureOptions.Events = new JwtBearerEvents
            {
                OnMessageReceived = context =>
                {
                    var accessToken = context.Request.Query["access_token"];
                    var path = context.HttpContext.Request.Path;
                    if (!string.IsNullOrEmpty(accessToken)
                        && path.StartsWithSegments("/hubs/spreadhub"))
                    {
                        context.Token = accessToken;
                    }
                    return Task.CompletedTask;
                }
            };

edited Feb 13, 2024 at 11:58

answered Feb 13, 2024 at 11:57

Umair Sarfraz

811 silver badge3 bronze badges

1 Comment

Diandson Over a year ago

thank for this answer. Solved for me

knoxgon · Accepted Answer · 2023-01-11 16:19:10Z

There have been few cases I've got this error with no further details of the reason.

I could find some solutions to some of the problems I encountered by digging around.

Excluding app.UseHttpsRedirection() in the server side of SignalR (C#). (Beware that this is not an appropriate solution in production.) This is often needed in your development environment.
Invalid/expired access token. The AuthenticationSchemes needed to be defined in the Authorize attribute in the Hub class.

code:

[Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
public class HubBase : Hub
{ }

Sending the token by accessTokenFactory in the client side.

code:

const connection = new signalR.HubConnectionBuilder()
    .withUrl("http://localhost:5001/hub", {
      skipNegotiation: true,
      transport: signalR.HttpTransportType.WebSockets,
      //Adding this line
      accessTokenFactory: async () => { return this.token}
    })
    .build();

this.token is the token that you generate/fetch and send with the request.

Ilya Chernomordik · Accepted Answer · 2023-02-07 09:48:50Z

1

We have figured out there is one more case for this exception if one uses negotiate with a redirect url (as e.g. common with Azure SignalR Service).

If it takes few seconds between the call to the negotiate url and the redirect url returned by negotiate, we get this/similar error message. The reason I assume is that Azure SignalR Service does not allow for a long time window after backend communication for the client to connect.

The reason why it did take few seconds even though it should connect at once was for us that javascript thread switched to do some heavy updates of DOM and did not execute the next call right away.

answered Feb 7, 2023 at 9:48

Ilya Chernomordik

30.9k31 gold badges148 silver badges245 bronze badges

Comments

Eugene Ihnatsyeu · Accepted Answer · 2023-05-23 13:30:12Z

1

If you use createProxyMiddleware don't forget to include ws: true:

const appProxy = createProxyMiddleware(context, {
    target: 'https://localhost:7288',
    secure: false,
    ws: true
});

I used Visual Studio's templates to generate ASP.NET Core + React application, it automatically included createProxyMiddleware inside setupProxy.js file

answered May 23, 2023 at 13:30

Eugene Ihnatsyeu

1,63517 silver badges19 bronze badges

Comments

Karson Jo · Accepted Answer · 2024-06-07 09:48:25Z

0

In my case it's just because I'm not authorized. My hub needs authorization, but I wasn't logged into the site when I tried connecting, so no cookie was sent, and then I got this error.

My hub is protected by nginx reverse proxy. I don't know if it's nginx that makes the error so counterintuitive. This error lists a number of possible problems, but the only thing it doesn't state is an authorization error.

Anyway, if anyone else encounters the same error and has tried everything else, make sure your credentials are valid.

answered Jun 7, 2024 at 9:48

Karson Jo

1,8911 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Failed to start the connection: Error: WebSocket failed to connect

7 Answers 7

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related