使用 Flask Socket Io 和 Reactjs 进行连续数据传输

Question

我试图每秒从我的服务器向前端传输数据。目前我只能连接到 socket io，我找到的所有教程都以聊天应用程序为例。

该项目由 pymodbus 组成，因此我可以与 plc 通信并收集这些数据。然后使用 reactjs

可视化数据

Python

from flask import Flask, jsonify
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():
  i = 5
  j = 0
  while j != 5: # should be while True
    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"})
  PlcTankData()

class MachineStatus(Resource):
  def put(self):
    data = request.json
    print(data)

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

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

Reactjs

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

//To Control the machcine
const handleMachineStatus = async (e) => {
    await axios
      .put('http://192.168.0.105:5000/machine-status', { status: e.target.name })
      .then((res) => {
        console.log(res)
      })
      .catch((err) => console.log(err))
  }

//To get real time data
useEffect(() => {
    const socket = io.connect('http://192.168.0.105:5000/home')
    socket.on('connect', (data) => console.log(data))

    socket.on('newdata', (data) => console.log(data))
  }, [])

我知道 while 循环是造成问题的原因，因为在 while 循环完成后数据被抛出。

PS: 不知道是不是react代码也有问题所以打上标签

Answer 1

connect 处理程序不是运行冗长任务的好地方，因为一旦您从该处理程序 return Flask-SocketIO 就会完成连接过程。

我建议您将 PlcTankData 函数移动到一个单独的事件中，而不是从 connect 处理程序中调用它。

使用 Flask Socket Io 和 Reactjs 进行连续数据传输

Continuous Data Transfer with Flask Socket Io and Reactjs

flask

reactjs

flask-socketio