browser-sync: websocket problems 502

I’ve logged an issue here (https://github.com/chimurai/http-proxy-middleware/issues/15) where I am having a problem with browser-sync, http-proxy-middleware and websockets

In a nutshell, I have this code

var server = {
    baseDir: baseDir,
    routes: routes
  };

  var proxies = [];

  proxies.push(proxyMiddleware('/socket.io', { 
        target: 'http://localhost:5000/' , ws: true
  }));

  server.middleware = proxies;

  browserSync.instance = browserSync.init({
    startPath: '/',
    server: server,
    browser: browser
  });

but get these errors :

woot! connection
[HPM] Upgrading to WebSocket
[HPM] Client disconnected

and the client console has

WebSocket connection to 'ws://mysite.io/socket.io/?EIO=3&transport=websocket&sid=5_BeDfck0LFYcYxPAAAA' failed: Error during WebSocket handshake: Unexpected response code: 502

and obviously, I can’t get my websocket connected.

Am I missing something or is it a bug ?

thanks

About this issue

Original URL
State: open
Created 9 years ago
Comments: 30 (3 by maintainers)

Most upvoted comments

@ibc your example does not work! Notice that your example is effectively the same as the OP’s.

daniel-shuy on Dec 27, 2018

Hi,

I am also having an issue with websockets in server mode. Here is my gulp config:

var proxyMiddleware = require('http-proxy-middleware');

module.exports = function () {
  return {
    injectChanges: true,
    port: 3002,
    server: {
      baseDir: [
        '.tmp',
        'src
      ],
      routes: {
        '/bower_components': 'bower_components'
      },
	  middleware: [
        proxyMiddleware('/api/**', {target: 'http://localhost:8081', changeOrigin: true}),
        proxyMiddleware('/ws/**', {target: 'http://localhost:8081', changeOrigin: false, ws: true, logLevel: 'debug'}),
      ]
    },
    open: false
  };
};

It usually terminates with this error:

Connection closed before receiving a handshake response

bryantp on Nov 21, 2016