Flask+React使用SocketIO通信延迟20秒的问题如何解决？

问题原因 #

• 消息发送时机错误：代码里的socketio.emit('message', 'test')写在全局作用域，会在Flask服务启动前就执行，此时还没有任何客户端和服务端建立Socket连接，这条消息没有接收目标，属于无效发送。你20秒后收到的消息是SocketIO超时重连机制触发后返回的，不是你主动发送的这条。
• 缺少异步运行环境：Flask-SocketIO默认依赖eventlet/gevent这类异步库实现低延迟长连接处理，若未安装对应依赖，会自动降级到Flask自带的单线程开发服务器运行，单线程无法并发处理长连接请求，会直接阻塞SocketIO的轮询请求。20秒的延迟刚好对应SocketIO长轮询模式下的默认超时时间，就是请求被阻塞直到超时才返回导致的。
• 传输协议适配问题：前端SocketIO默认会先尝试WebSocket连接，连接失败再降级到长轮询，降级过程本身也会产生额外的等待耗时。

解决方法 #

1. 安装异步运行依赖 #

安装Flask-SocketIO官方推荐的eventlet异步运行库，安装命令：

pip install eventlet

安装后启动服务时SocketIO会自动识别并使用eventlet处理请求，无需额外修改基础配置。

2. 修正消息发送逻辑 #

调整后端代码，在客户端成功连接的事件回调中发送消息，确保消息有明确的接收目标：

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

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
# 明确指定异步模式为eventlet，避免自动识别异常
socketio = SocketIO(app, cors_allowed_origins="*", async_mode='eventlet')
CORS(app)

# 监听客户端连接事件，客户端连接成功后触发
@socketio.on('connect')
def handle_connect():
    emit('message', 'test')

if __name__ == '__main__':
    socketio.run(app, debug=True, host='0.0.0.0')

3. 前端优化（可选） #

前端初始化Socket时明确指定传输协议优先级，减少不必要的协议降级试探，同时添加组件卸载时的断连逻辑避免内存泄漏：

import { useState, useEffect } from 'react'
import io from 'socket.io-client'

const App = () => {
    const [message, setMessage] = useState("")

    useEffect(() => {
        const socket = io('http://localhost:5000', {
            // 优先使用websocket，降级方案为长轮询
            transports: ['websocket', 'polling']
        })
        socket.on("message", data => {
            setMessage(data)
        })
        // 组件卸载时断开连接
        return () => socket.disconnect()
    }, [])

    return (
        <div>
            {message}
        </div>
    )
}
export default App

以上调整完成后，Socket通信延迟可降至毫秒级，不会再出现20秒的等待问题。

内容的提问来源于stack exchange，提问作者nbapera