在服务器和客户端上使用相同版本的socket.io和socket.io-client。

好吧，这是我的错误，只是我用www.example.com初始化服务器socket.io两次，这就导致了这个问题

对我来说，答案是我连接的客户端是版本2，而服务器运行的是版本4。作为per the docs，我必须在服务器上启用allowEIO3

更改套接字io使用它的独立服务器，它为我工作。最初将它添加到由express创建的服务器。此代码修复了问题。

const io = require("socket.io")();

//listening socket io on different port
io.listen(4000);

我遇到的问题是，当使用create-react-app并使用“npm run start”运行它以获得实时刷新本地版本时，它默认使用带有/ws路径的WebSocket。这与我的应用程序也使用此路径冲突。因此，当您使用带有http-proxy-middleware的setupProxy.js时，它将两者都转发到API服务器，这导致了无效的帧头。
解决方案是在Web应用程序中将WebSocket路由更改为/websocket之类的其他路由，然后在setupProxy.js中按如下方式设置：

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

module.exports = function(app) {
    app.use(
        // Do not use `/ws` as it conflicts with create-react-app's hotrefresh socket.
        createProxyMiddleware('/websocket', {
            target: 'http://localhost:3000',
            ws: true,
            changeOrigin: true,
        })
    );
};

我目前在使用socket.io-client时遇到了同样的问题。我已经按照下面的说明解决了这个问题。
您可以尝试将opts.transports设置为仅在客户端中的WebSocket：

io.connect(url, { transports: ['websocket'] }); // default is ['polling', 'websocket']

参考：https://github.com/socketio/socket.io-client/issues/1097#issuecomment-301301030