express.use(path, proxy()) ignores path for websockets

Also see expressjs/express#3428.

Expected behavior

The following should listen for websocket requests only under /__webpack_hmr.

express.use('/__webpack_hmr', proxy({ ws: true, target: 'http://...' }));

Websocket requests to other paths (e.g. /socket.io) should not be handled by the proxy.

Actual behavior

The proxy “hijacks” all incoming websocket requests, also those to /socket.io (see socketio/socket.io#3062).

Setup

Fiddle: https://github.com/ftes/socket.io-fiddle/pull/1/files

• http-proxy-middleware: 0.17.4
• server: express 4.13.4
• socket.io: 2.0.3

proxy middleware configuration

proxy({ ws: true, target: 'http://localhost:4000' });

server mounting

var app = express();

app.use('/__webpack_hmr', proxy);
app.listen(3000);

Workaround

Pass path /__webpack_hmr as context to proxy.

const webpackHmrProxy = proxy('/__webpack_hmr', {
  target: 'http://localhost:4000',
  ws: true,
});
app.use(webpackHmrProxy);

[roccomuso]

I’m having the same issue… I kinda fixed it passing the “context” twice:

express.use('/__webpack_hmr', proxy('/__webpack_hmr', { ws: true, target: 'http://...' }))

@ftes give it a try.

[kdemarest]

I found my issue. I was using socket.io, which is very particular about how you initialize it. In the target of the proxy, in index.html, I was starting socket.io with:

this.socket = io.connect('http://localhost:3000/shadowStone');

when I should have been starting it with:

this.socket = io.connect('http://localhost:3000', {'path': '/shadowStone/socket.io'});

and the server-side companion code to this is

app.use( '/shadowStone', Express.static('.') )
let server = app.listen(3000)
io = SocketIo(server, {path:'/shadowStone/socket.io'});

In my proxy, the code is quite simple:

let wsProxy = Proxy({
	target: 'ws://localhost:3000',
	logLevel: 'debug',
});

app.use( '/shadowStone', wsProxy );
let server = app.listen(port);
server.on('upgrade', wsProxy.upgrade)

Hope this helps somebody with a similar problem…