Proxy socket.io with from react to nestjs

Question

I am currently working with :

• React JS with http-proxy-middleware
• NestJS exposing websocket via gateways

I am trying to access my gateways at the same url using proxy but it does not work. Here is my configuration :

conversation.ts:

socket = io('/service-conversation');

setupProxy.js :

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://127.0.0.1:8000/api',
    })
  );
  app.use(
    'socket.io',
    createProxyMiddleware({
      target: 'http://127.0.0.1:3000',
      ws: true,
    })
  );
};

gateway.ts :

@WebSocketGateway({
  cors: true,
  namespace: 'service-conversation',
})
export class ConversationGateway {
  @WebSocketServer() webSocketServer: Server;

To give some insight I tried :

• connecting directly without proxy using socket = io('http://localhost:3000/service-conversation'); it works but as I want it deployed on the same url on prod it is not the right solution
• removing the 'socket.io' from app.use, it works (using postman) but frontend does not work anymore as everything is redirected to localhost:3000
• putting the 'socket.io' inside createProxyMiddleware it does not work createProxyMiddleware('socket.io', {...
• replacing the 'socket.io' by 'service-conversation' it does not work