Browser-sync: Proxying Websocket connections fails with "Connection closed before receiving a handshake response"

[alp82]

I use BrowserSync configured with the proxy setting to redirect all requests to my local webserver.

When opening the page, i get the following error message in Chrome (Version 42, Arch Linux):

WebSocket connection to 'ws://localhost:3000/ws/791/ori74537/websocket' failed:
Connection closed before receiving a handshake response

Due to this issue in the foxy project, there was indeed no working support for proxying websocket connections: https://github.com/shakyShane/foxy/issues/2

But they pushed a fix in release 10.1.2 which is included as dependency in the current BrowserSync release 2.7.1. I tried using that version, but it did not change anything and i still get the same error.

Do you need more information? Can anyone confirm this issue?

[nathanmarks]

@alp82 I'm also having websocket related issues with browser sync along these lines and have had to not use browsersync proxying for now.

[vmakhaev]

I confirm this issue. browser-sync 2.7.13

[romanenko]

I have the same problem with my Ruby on Rails app, running at 3000 port with websocket-rails setup. I proxy all my requests through browsersync server, running at port 5000 but my websocket connection doesn't upgrade to ws, saying that:

WebSocket connection to 'ws://localhost:5000/websocket' failed: Connection closed before receiving a handshake response

If I go directly to my app directly at 3000 — everything works as expected.

[shakyShane]

This is being actively worked on as we speak and a fix will be released as soon as possible.

[shakyShane]

Ok, so I have this all fixed now - I need to test in more envs, but I'm pretty sure it's good to go.

For anyone interested - the problem was relating to the fact that Browsersync in proxy mode tries to use a single server/port to serve the client script, run the web sockets + proxy requests through to your server.

Well it turns out that of course socket.io is handling the upgrade event on the server for Browsersync's websockets - which means that it was simply not possible to also allow the proxy to pass through other websockets upgrades (for example, your app's chatroom or whatevs).

The solution is to simple boot a separate server to handle Browsersync's websocket connections when in proxy mode and pass through all of your own websockets via the proxy (as you'd expect).

[alp82]

Your effort is very much appreciated. Thanks!

[romanenko]

This fixes issues for me. Great job! Thank you!

[hutber]

Bit late to the party here, but could I grab an example of the proxy through browsersync by any chance?

[Boscop]

So what's the correct way to proxy websockets through browsersync?
In my case, websockets are served from the same port as the normal assets.
I'm using http-proxy-middleware to proxy /api calls to my server but how can I also proxy the websocket connection to my server?

[daniel-shuy]

The fix only fixes proxy mode, what about server mode? (see #780 and chimurai/http-proxy-middleware/issues/15)