如何使用 webpack-dev-server 将 socket.io 代理到服务器

Question

• 节点：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

反应客户端：

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
    })
  );
};

上面的代码不起作用。

websocket 运行良好，如果客户端代码如下：

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

Answer 1

我不知道为什么，但这对我有用。 （无需使用transports 选项）

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
    })
  );
};