在 create-react-app 中使用 Socket.io-client 的 WebSockets 代理答案

【问题标题】：WebSockets Proxy using Socket.io-client in create-react-app在 create-react-app 中使用 Socket.io-client 的 WebSockets 代理
【发布时间】：2020-08-22 02:35:41
【问题描述】：

我正在尝试为 socket.io-client 的 React 应用添加代理

我将setupProxy.js 与http-proxy-middleware 一起使用，这对API 很好，但不适用于套接字

带有节点 js 的服务器代码

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function (socket) {
  setInterval(() => {
    console.log('emit event');
    io.emit('event', { data: 'worked successfully!' });
  }, 1000);
});

http.listen(8080, function () {
  console.log('listening on *:8080');
});

带有反应的客户端代码

function App() {
  const socket = socketIOClient('/', {
    transports: ['websocket'],
  });

  useEffect(() => {
    socket.on('connect', () => {
      console.log('connected');
    });
    socket.on('event', (data) => {
      console.log(data);
    });

  }, []);
  return (
    <div className='App'>
     Socket Proxy test
    </div>
  );
}

还有我的 setupProxy.js

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

module.exports = (app) => {
  app.use(
    '/socket.io',
    createProxyMiddleware({
      target: 'http://localhost:8080',
      changeOrigin: true,
      ws: true, // enable websocket proxy
      logLevel: 'debug',
    })
  );
};

【问题讨论】：

标签： node.js reactjs websocket proxy socket.io

【解决方案1】：

我通过在服务器和客户端套接字选项中添加自定义路径解决了这个问题

{
  path: '/socket',
}

然后在代理中间件中使用该路径

  const socketProxy= createProxyMiddleware('/socket', {
    target: 'http://localhost:8080',
    changeOrigin: true,
    ws: true, 
    logLevel: 'debug',
  });

  app.use(socketProxy);

所以最终的工作代码应该是这样的：

服务器代码：

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http, {
  path: '/socket', // added this line of code
});

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function (socket) {
  setInterval(() => {
    console.log('emit event');
    io.emit('event', { data: 'worked successfully!' });
  }, 1000);
});

http.listen(8080, function () {
  console.log('listening on *:8080');
});

客户端代码：

function App() {
  const socket = socketIOClient('/', {
      transports: ['websocket'],
      path: '/socket', // added this line of code
  });

  useEffect(() => {
    socket.on('connect', () => {
      console.log('connected');
    });
    socket.on('event', (data) => {
      console.log(data);
    });

  }, []);
  return (
    <div className='App'>
     Socket Proxy test
    </div>
  );
}

注意：命名空间应在<URL>参数中添加：const socket = socketIOClient('/namespace', {...})

最后setupProxy.js

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

module.exports = (app) => {
  const socketProxy= createProxyMiddleware('/socket', {
    target: 'http://localhost:8080',
    changeOrigin: true,
    ws: true, 
    logLevel: 'debug',
  });

  app.use(socketProxy);
};

【讨论】：

您好，我不明白这与客户端在代理后面有什么关系？如果客户端是代理背后的那个，那么客户端的通信如何到达主机？你能解释一下吗？谢谢

【解决方案2】：

我通过以下步骤解决了这个问题：

使用http protocol 创建 SocketIO 客户端。

前端：

import io from 'socket.io-client';

const socket = io({
    protocols: ["http"],
});

在setupProxy.js 中创建一个ProxyMiddleware。

module.exports = function (app) {
    app.use(
        createProxyMiddleware("/socket.io",{
            target: 'http://localhost:8001',
            changeOrigin: true,
            ws: false,
        })
    );
};

注意：

socket.io-client 的默认端点是 /socket.io。
socket.io-client的默认协议是ws://，这不会触发defulat的代理规则。

【讨论】：