多次连接后 flask-socketio 卡住了
flask-socketio stucks after multiple connections
我使用 python 中的 flask-socketio
和 reactjs 中的客户端创建了一个小型应用程序。
该应用程序在不同浏览器选项卡中同时打开 3-4 个连接时运行良好。但是,当我再添加一个连接时它会卡住。
我也安装了 eventlet
和 gevent-websoket
。
server.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)
这里是 react 中的客户端代码实现
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 冻结输出
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
Chrome 打开第 5 个选项卡时开发人员工具输出。您可以看到响应耗时超过 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
启用 websocket
时拒绝客户端连接是 CORS 问题
下面是我添加的允许crossed_origins的配置:
socketio = SocketIO(app, cors_allowed_origins=[], logger=True, engineio_logger=True)
启用 websockets
后性能也得到了提升
我使用 python 中的 flask-socketio
和 reactjs 中的客户端创建了一个小型应用程序。
该应用程序在不同浏览器选项卡中同时打开 3-4 个连接时运行良好。但是,当我再添加一个连接时它会卡住。
我也安装了 eventlet
和 gevent-websoket
。
server.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)
这里是 react 中的客户端代码实现
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 冻结输出
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
Chrome 打开第 5 个选项卡时开发人员工具输出。您可以看到响应耗时超过 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
启用 websocket
下面是我添加的允许crossed_origins的配置:
socketio = SocketIO(app, cors_allowed_origins=[], logger=True, engineio_logger=True)
启用 websockets