how to proxy socket.io to server with webpack-dev-server

Question

• Node：v12.19.0
• Egg.js：v2.27.0
• create-react-app: v4.0.0
• http-proxy-middleware: v1.0.6
• socket.io-client: v2.3.1

react client:

import io from 'socket.io-client';
const socket = io({
  transports: ['websocket']
});
socket.on('connect', () => {
  console.log('socket.io client connected!');
});

setupProxy.js

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

module.exports = (app) => {
  app.use(
    '/socket.io',
    createProxyMiddleware({
      target: 'http://127.0.0.1:7001',
      changeOrigin: true,
      ws: true
    })
  );
};

code above not work.

The websocket works well, if the client code is following:

const socket = io('http://127.0.0.1:7001', {
  transports: ['websocket']
});

Answer 1

I don't know why but this work for me. (no need to use transports options)

setupProxy.js

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

module.exports = (app) => {
  app.use(
    '/socket.io',
    createProxyMiddleware({
      target: 'ws://127.0.0.1:7001',
      changeOrigin: true
    })
  );
};