Flask WebSocket消息未正常发射问题排查求助

我用Flask结合WebSocket实现向HTML页面的div推送随机4位字符串，页面能正常加载，WebSocket连接也显示建立，但推送的消息没出现在网络流量里，Flask调试日志和浏览器控制台都没报错，求分析原因。

Python 代码（main7.py） #

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

app = Flask(__name__)
socketio = SocketIO(app)

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

def generate_random_chars():
    while True:
        random_chars = ''.join(random.choices(string.ascii_letters + string.digits, k=4))
        socketio.emit('update', random_chars)
        socketio.sleep(2)

if __name__ == '__main__':
    socketio.start_background_task(target=generate_random_chars)
    socketio.run(app, host='localhost', port=5000, debug=True)

HTML 代码（index7.html） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask WebSocket Test</title>
</head>
<body>
    <div id="random-chars">Waiting for updates...</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script>
    <script>
        const socket = io();
        socket.on('update', function(data) {
            document.getElementById('random-chars').innerText = data;
        });
    </script>
</body>
</html>

Flask 调试日志 #

* Restarting with watchdog (inotify)
 * Debugger is active!
 * Debugger PIN: 136-937-281
(210008) wsgi starting up on http://127.0.0.1:5000
(210008) accepted ('127.0.0.1', 49994)
127.0.0.1 - - [29/Aug/2024 19:48:45] "GET / HTTP/1.1" 200 640 0.003211
(210008) accepted ('127.0.0.1', 49998)
127.0.0.1 - - [29/Aug/2024 19:48:45] "GET / HTTP/1.1" 400 293 0.001261
127.0.0.1 - - [29/Aug/2024 19:49:04] "GET / HTTP/1.1" 200 611 0.002471
127.0.0.1 - - [29/Aug/2024 19:49:04] "GET /socket.io/?EIO=4&transport=polling&t=P6V2cR7 HTTP/1.1" 200 278 0.000470
(210008) accepted ('127.0.0.1', 42628)
(210008) accepted ('127.0.0.1', 42634)
127.0.0.1 - - [29/Aug/2024 19:49:04] "POST /socket.io/?EIO=4&transport=polling&t=P6V2cRC&sid=WyHUScU-T8s22PT_AAAA HTTP/1.1" 200 219 0.001391
127.0.0.1 - - [29/Aug/2024 19:49:04] "GET /socket.io/?EIO=4&transport=polling&t=P6V2cRD&sid=WyHUScU-T8s22PT_AAAA HTTP/1.1" 200 213 0.000228
127.0.0.1 - - [29/Aug/2024 19:49:04] "GET /socket.io/?EIO=4&transport=polling&t=P6V2cRM&sid=WyHUScU-T8s22PT_AAAA HTTP/1.1" 200 181 0.000252
127.0.0.1 - - [29/Aug/2024 19:49:48] "GET /socket.io/?EIO=4&transport=websocket&sid=WyHUScU-T8s22PT_AAAA HTTP/1.1" 200 0 43.720072
127.0.0.1 - - [29/Aug/2024 19:49:48] "GET / HTTP/1.1" 200 611 0.001028
127.0.0.1 - - [29/Aug/2024 19:49:48] "GET /socket.io/?...

问题原因及解决办法 #

核心问题：SocketIO 版本不兼容 #

后端flask-socketio依赖的SocketIO服务器版本，和前端引入的4.0.0版本不匹配。当前flask-socketio默认适配的协议版本与前端4.x系列存在兼容性差异，导致连接能建立，但消息无法正常传输。

解决步骤： #

1. 统一前后端版本：

   • 方案一：升级前端SocketIO版本到兼容后端的稳定版，比如替换为https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.js。
   • 方案二：指定后端flask-socketio版本为兼容前端4.0.0的版本，执行pip install flask-socketio==5.3.5安装对应版本。

2. 添加调试日志验证执行流程：

   • 后端函数中添加打印，确认任务是否正常生成字符串：

     def generate_random_chars():
         while True:
             random_chars = ''.join(random.choices(string.ascii_letters + string.digits, k=4))
             print(f"生成随机字符串: {random_chars}")
             socketio.emit('update', random_chars)
             socketio.sleep(2)
     

   • 前端回调中添加控制台打印，确认是否接收消息：

     socket.on('update', function(data) {
         console.log('收到消息:', data);
         document.getElementById('random-chars').innerText = data;
     });
     

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