多次连接后flask-socketio卡住了

Question

我使用 python 中flask-socketio和 reactjs 中的客户端创建了一个小型应用程序。

该应用程序在不同的浏览器选项卡中同时打开 3-4 个连接时运行良好。 但是，当我再添加一个连接时，它会卡住。

我也安装了eventlet和gevent-websoket 。

服务器.py

from flask import Flask
from flask_cors import CORS
from flask_socketio import SocketIO, join_room

app = Flask(__name__)
app.config['SECRET_KEY'] = 'xyz'
socketio = SocketIO(app)
CORS(app)

@socketio.on('login')
def on_login(data):
    room_id_ = data['roomId']
    join_room(room_id_)
    username_ = data['username']
    print('user ' + username_ + ' connected to the room: ' + room_id_)
    socketio.emit('loggedIn', username_, room=room_id_)

if __name__ == '__main__':
    socketio.run(app)

这是反应中的客户端代码实现

应用程序.js

import React, {Component} from 'react';
import io from 'socket.io-client'

const socket = io('http://localhost:5000')

class App extends Component {
    constructor(props) {
        super(props);
        this.logInUser = this.logInUser.bind(this);
        this.state = {
            username: 'abc',
            roomId: '1234'
        }  
    }

    logInUser = () => {
            socket.emit('login', {username: this.state.username, roomId: this.state.roomId});
    }

    setSocketListeners() {
        socket.on('loggedIn', (data) => {
            console.log(data)
        });
    }

        render() {
    return (
        <React.Fragment>
            <div className="container-fluid">
                {this.state.username}
            </div>
        </React.Fragment>
        );
    }
}

pip 冻结 output

cffi==1.14.0
click==7.1.2
dnspython==1.16.0
eventlet==0.25.2
Flask==1.1.2
Flask-Cors==3.0.8
Flask-SocketIO==4.3.0
gevent-websocket==0.10.1
greenlet==0.4.15
itsdangerous==1.1.0
Jinja2==2.11.2
MarkupSafe==1.1.1
monotonic==1.5
pycparser==2.20
python-engineio==3.12.1
python-socketio==4.5.1
six==1.14.0
Unidecode==1.1.1
Werkzeug==1.0.1

当我打开第 5 个选项卡时，Chrome 开发人员工具 output。 您可以看到响应时间超过 21 秒，并且很少有请求以 400 代码失败。

我正在使用socketio.run(app)运行应用程序。

我认为这是因为long-polling导致性能下降。 所以我尝试在客户端代码中启用websocket而不是long-polling ，

const socket = io('ws://localhost:5000', {transports: ['websocket']});

我在 chrome 控制台中收到 400 错误：

websocket.js:120 WebSocket connection to 'ws://localhost:5000/socket.io/?EIO=3&transport=websocket' failed: Error during WebSocket handshake: Unexpected response code: 400

Answer 1

它是 CORS 问题，它在启用websocket时拒绝客户端连接

以下是我添加以允许 crossed_origins 的配置：

socketio = SocketIO(app, cors_allowed_origins=[], logger=True, engineio_logger=True)

启用websockets也提高了性能