使用Flask SocketIO通过WebSocket传输数据，页面表格不显示问题求助

服务器端问题修复 #

1. 修复装饰器语法错误
   服务器代码中@socketio.on('connect').末尾多了一个.，这会直接引发语法异常，导致连接处理逻辑失效。修正为：

   @socketio.on('connect')
   def handle_connect():
       print('Client connected')
   

2. 实现定时主动推送逻辑
   当前handle_send_data仅在客户端发送update_data事件时才会触发，无法满足每10秒主动推送的需求。需要添加定时任务来主动触发数据推送，示例如下：

   from flask_socketio import SocketIO, emit
   from apscheduler.schedulers.background import BackgroundScheduler
   from flask import Flask
   
   app = Flask(__name__)
   socketio = SocketIO(app, cors_allowed_origins="*")  # 配置跨域，按需调整
   
   def func1():
       # 确保返回有效数据，比如列表或字典，而非None
       return [{"symbol": "test", "logo": "/logo.png", "b": "val1", "c": "val2", "d": "/icon.png", "e": "val3", "f": "val4", "g": "val5"}]
   
   def push_data_periodically():
       data = func1()
       if data:  # 校验数据非空再推送
           emit('update_data', data, broadcast=True)
   
   # 初始化定时任务，每10秒执行一次
   scheduler = BackgroundScheduler()
   scheduler.add_job(push_data_periodically, 'interval', seconds=10)
   scheduler.start()
   
   @socketio.on('connect')
   def handle_connect():
       print('Client connected')
   
   @socketio.on('disconnect')
   def handle_disconnect():
       print('Client disconnected')
   
   if __name__ == '__main__':
       socketio.run(app, debug=True)
   

3. 校验数据生成逻辑
   控制台显示Sending packet data None，说明func1()返回了None，必须检查func1的实现，确保它能稳定返回预期的结构化数据（比如包含指定字段的字典列表）。

前端代码问题修复 #

1. 修正HTML拼接错误
   拼接表格行时末尾多了一个.，导致生成的HTML无效，无法渲染表格。修正如下：

   tableRows += "<tr><td>" + item.symbol + "</td><td><img src='" + item.logo + "' alt='Logo'></img>" + item.b + "</td><td>" + item.c + "</td><td><img src='" + item.d + "' alt='Logo'></img>" + item.e + "</td><td>" + item.f + "</td><td>" + item.g + "</td></tr>"
   

2. 修复JS语法错误
   修改css方法的参数错误，把引号内的分号移到外面：

   $("#loading-message").css("display", "none");
   

3. 优化连接配置
   确保SocketIO连接的命名空间与服务器一致，默认使用/即可。如果存在跨域场景，服务器端已配置cors_allowed_origins，前端无需额外修改，若仍有问题可显式指定命名空间：

   var socket = io.connect('http://' + document.domain + ':' + '5000', { path: '/socket.io' });
   

浏览器错误说明 #

你遇到的Unchecked runtime.lastError错误，主要是由于前端JS语法错误、SocketIO连接异常导致的消息通道中断，修复上述代码后该错误会自动消失。

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