使用Flask SocketIO和Reactjs实现PLC数据持续每秒传输问题排查

后端修改点 #

核心问题是在connect事件回调中直接执行循环采集逻辑，阻塞了SocketIO的事件线程，导致消息无法实时发送。需要将采集逻辑放到独立的后台线程运行，同时修正缺失的导入：

from flask import Flask, jsonify, request # 补导入request
from flask_restful import Api, Resource
from flask_socketio import SocketIO, emit
import random

app = Flask(__name__)
app.config["SECRET_KEY"] = "somethingRandom"
app.config["DEBUG"] = True
api = Api(app)

socketio = SocketIO(app, cors_allowed_origins="*")

@app.route("/")
def hello_world():
    return jsonify(mssg="hello world")

def PlcTankData():
  # 实际使用替换为while True
  j = 0
  while j != 5:
    j+=1
    sample = random.randint(1, 10)
    print(sample)
    emit("newdata", {"td": sample}, namespace="/home")
    socketio.sleep(1)

@socketio.on("connect", namespace="/home")
def frontend_connection():
  print("Client is Connected")
  emit("connect", {"hello": "world"})
  # 启动后台任务执行采集，不阻塞当前线程
  socketio.start_background_task(PlcTankData)

class MachineStatus(Resource):
  def put(self):
    data = request.json
    print(data)
    return {"code":0, "msg":"success"} # 加返回值避免接口报错

api.add_resource(MachineStatus, '/machine-stat')

if __name__ == '__main__':
  socketio.run(app, host="192.168.0.105", port=5000)

前端修改点 #

现有代码存在连接泄漏、接口地址不匹配的问题，修正如下：

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

const YourComponent = () => {
  // 用useRef保存socket实例，避免重复创建
  const socketRef = useRef(null)

  // 控制设备函数
  const handleMachineStatus = async (e) => {
      await axios
        // 修正接口地址和后端保持一致
        .put('http://192.168.0.105:5000/machine-stat', { status: e.target.name })
        .then((res) => {
          console.log(res)
        })
        .catch((err) => console.log(err))
  }

  // 获取实时数据
  useEffect(() => {
      // 建立连接，指定websocket传输提升稳定性
      socketRef.current = io.connect('http://192.168.0.105:5000/home', {
        transports: ['websocket']
      })
      const socket = socketRef.current

      socket.on('connect', (data) => console.log('连接成功', data))
      socket.on('newdata', (data) => console.log('收到新数据', data))

      // 组件卸载时断开连接，避免泄漏
      return () => {
        socket.disconnect()
      }
  }, [])

  // 你的组件渲染逻辑
  return <div>可视化页面</div>
}

export default YourComponent

额外优化建议 #

• 生产环境关闭DEBUG模式，限制cors_allowed_origins为前端实际域名，不要用通配符
• 多客户端接入场景可以增加房间分组，避免重复生成推送数据，降低服务端负载
• 增加PLC采集异常捕获逻辑，避免采集线程崩溃导致推送中断

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