java websocket 代理_How to facade (proxy) websocket port

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.

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) => {

logger.debug(req.body.data);

res.send({ status: "SUCCESS" });

});

app.listen(PORT, () => {

logger.debug(`Portal listening on ${PORT}`);

});

that means when i make any calls /api/endpoint it will redirect to localhost:4000/endpoint but will be seen in the network as http://localhost:3000/endpoint1

I want the same behaviour with websockets as well. I am using new WebSocket(ws://localhost:3000/endpoint1); It should redirect to ws://localhost:4000/endpoint1. and should be shown in network tab as ws://localhost:3000/endpoint1