title: How to facade (proxy) websocket port
body: <p>I have server side rendering react app in which i have proxied all http calls to different port. Please see the code below for http proxy.</p>
  
  <pre><code>import proxy from "express-http-proxy";
  const app = express();
  const bodyParser = require("body-parser");
  const http = require('http');
  const  httpProxy = require('http-proxy');
  const PORT = process.env.PORT || 3001;
  httpProxy.createServer({
      target: 'ws://localhost:4000',
      ws: true
  }).listen(PORT); //Throws error since 3000 port is already used by //app.listen.
  app.use(
    "/api",
    proxy("http://localhost:4000/", {
  
      proxyReqOptDecorator(opts) {
        opts.headers["x-forwarded-host"] = "http://localhost:4000/";
        return opts;
      }
    })
  );
  app.post("/logger", (req, res) =&gt; {
    logger.debug(req.body.data);
    res.send({ status: "SUCCESS" });
  });
  
  app.listen(PORT, () =&gt; {
    logger.debug(`Portal listening on ${PORT}`);
  });
  </code></pre>
  
  <p>that means when i make any calls /api/endpoint it will redirect to localhost:4000/endpoint but will be seen in the network as <a href="http://localhost:3000/endpoint1" rel="nofollow noreferrer">http://localhost:3000/endpoint1</a></p>
  
  <p>I want the same behaviour with websockets as well.
  I am using new WebSocket(<code>ws://localhost:3000/endpoint1</code>);   It should redirect to <code>ws://localhost:4000/endpoint1</code>.
  and should be shown in network tab as <code>ws://localhost:3000/endpoint1</code></p>