Multiple WebSocket Connection Failed via proxy localhost with different port

[veve178]

I use the proxyMiddleware to create multiple web socket proxies for user to access with different query parameter, such as http://a.com/?id=1 => map to localhost:81, http://a.com/?id=2 => map to localhost:82.

My problem is if i tried more than one websocket access, the application will fail. (It seems the proxy can't redirect the proper websocket to relative one)

[chimurai]

Can you provide a minimal example?

[veve178]

Thank you for your response! Here are some of my code...

const app = express();
const http = require('http');
const https = require('https').Server(certOptions, app);
const { createProxyMiddleware } = require('http-proxy-middleware');

http.createServer().listen(80);
https.listen();
..
app.use(
'/',
function (req, res, next) {
...
var id = req.query.id;
..
(Map id to port)..
proxyMiddleware = createProxyMiddleware('/',{ target: `http://${ip}:${port}/`, secure : false, changeOrigin: true, ws: true, logLevel: 'info'});
proxyMiddleware(httpReq, httpRes, null);
});

My application will first create some background progress and i have some callbacks to proxy my client to the site based on the query param.

[chimurai]

Can you provide a minimal working example in which this issue can be reproduced?

This is to isolate the issue, which might be related to http-proxy-middleware or something else

[the-kenny]

Note that I'm experiencing the same issue.

[the-kenny]

I was able to work around this issue by using

const proxy = require("http-proxy-middleware").createProxyMiddleware;

const URI = process.env.REVERSE_PROXY_URI || 'http://localhost:4242'
module.exports = function(app) {
  const apiProxy = proxy('/v1', { target: URI });
  const wsProxy = proxy('/v1', { ws:true, target: URI });

  app.use(apiProxy);
  app.use(wsProxy);
};

instead of

const proxy = require("http-proxy-middleware").createProxyMiddleware;

const URI = process.env.REVERSE_PROXY_URI || 'http://localhost:4242'
module.exports = function(app) {
  const wsProxy = proxy('/v1', { ws:true, target: URI });

  app.use(wsProxy);
};

Not sure if this is a bug in http-proxy-middleware or if I was using its api incorrectly.