Flask-SocketIO前端无法持续监听：每秒更新随机数仅显示最后一个值

嘿，我碰到过类似的问题！你这个情况大概率是服务器端的代码用了普通的time.sleep()，把Flask-SocketIO的事件循环给阻塞住了——就像排队时前面的人占着窗口不走，后面所有人都得等他完事才能一起上。结果就是所有随机数都攒在服务器端，等循环结束才一股脑儿发给客户端，页面自然只显示最后一个啦。

你应该是在服务器端的事件处理函数里用了time.sleep(1)来实现每秒发送，但这个函数是阻塞式的，会让Flask-SocketIO的异步事件循环停转，没法实时发送消息。所有消息会被缓存，直到整个循环执行完才一次性推送。

Flask-SocketIO提供了专门的socketio.sleep()方法，它不会阻塞事件循环，能让消息实时发送。下面是完整的可运行示例代码：

服务器端代码（app.py） #

from flask import Flask, render_template
from flask_socketio import SocketIO, emit
import random

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key-here'
socketio = SocketIO(app, cors_allowed_origins="*")

@socketio.on('start_random_stream')
def handle_stream_request():
    # 示例发送10次，改成while True可实现持续发送
    for _ in range(10):
        random_num = random.randint(1, 1000)
        emit('new_random_number', {'number': random_num})
        socketio.sleep(1)  # 用这个非阻塞睡眠替代time.sleep()

@app.route('/')
def index():
    return render_template('index.html')

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

客户端代码（templates/index.html） #

<!DOCTYPE html>
<html>
<head>
    <title>实时随机数展示</title>
    <!-- 替换成更新版本的依赖，避免兼容性问题 -->
    <script type="text/javascript" src="//code.jquery.com/jquery-3.7.1.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
</head>
<body>
    <div id="random-box" style="font-size: 24px; margin: 20px;">等待随机数...</div>

    <script type="text/javascript">
        $(document).ready(function() {
            const socket = io();
            
            // 向服务器发起启动请求
            socket.emit('start_random_stream');
            
            // 接收并更新页面
            socket.on('new_random_number', function(data) {
                $('#random-box').text('当前随机数：' + data.number);
                console.log('收到随机数：', data.number);
            });
        });
    </script>
</body>
</html>

• 我把你用的旧版jQuery和SocketIO换成了更新的版本，旧版本可能存在兼容性问题，建议保持依赖版本新鲜。
• 如果需要持续无限发送，把服务器端的for循环改成while True:即可，但记得加上停止逻辑（比如监听客户端的停止事件），避免服务器资源浪费。
• 确保安装了必要依赖：pip install flask flask-socketio

这样修改后，服务器会每秒主动推送一个随机数，客户端收到一个就更新一次div，页面就能实时显示每一个随机数啦。

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