React 应用程序不刷新通过 socket.io 流式传输的日志

Question

在我的项目中，我使用 flask_socketio 作为服务器，使用 socket.io-client 作为客户端。我的 main.py(flask server) 不断读取一个不断更新的日志文件(console.log)。当在 UI 中单击开始按钮时，会显示日志文件的数据，但随着我的日志文件更新，更新的数据不会显示在 UI 中。我必须刷新页面或再次单击按钮才能看到更新的数据。 我希望通过单击按钮将日志文件的数据实时流式传输到 UI 上。如何解决这个问题？

烧瓶代码

from flask import Flask, jsonify
# Needed for localhost testing.
from flask_cors import CORS, cross_origin
from flask_socketio import SocketIO, emit
from time import sleep
import pdb
import json

app = Flask(__name__)

# Socket io setup.
app.config['SECRET_KEY'] = 'secret!'
# |cors_allowed_origins| is required for localhost testing.
socket = SocketIO(app, cors_allowed_origins="*")

# For localhost testing.
CORS(app)


@socket.on('event_stream', namespace='/logConsole')
def test_connect():
    def generate():
        fname = "./src/console.log"
        with open(fname) as f:
            yield f.read()
    emit_data = next(generate())
    socket.sleep(0)
    emit('custom-server-msg', {'data': emit_data})


if __name__ == '__main__':
    socket.run(app)

反应代码

import React from 'react'
import io from 'socket.io-client'

class App extends React.Component {
state = { startVar: true, setVar: false };

  setSocketListeners() {
    let socket = io.connect('ws://localhost:5000/logConsole');

    socket.emit('event_stream', () => {
      console.log("Websocket connected: " + socket.connected)
    })

    socket.on('custom-server-msg', (data) => {
      console.log("Data received: " + data.data)
      const setup_logs = data.data;
      this.setState({ setup_logs });
    })
  }
  
  render() {
    return (
      <div className="App">
        <h1>Data from log file</h1>
        <button type="button" onClick={() => this.setSocketListeners()}>Start</button>
            <p>{this.state.setup_logs}</p>
      </div>
    );
  }
}

export default App;

这就是我的浏览器控制台的样子-->

这是我的后端控制台-->

Answer 1

在您的烧瓶代码中，如果您想连续流式传输，则需要在循环中调用 next()，现在可以通过放置一个带有睡眠时间的无限循环来完成，

@socket.on('event_stream')
def test_connect():
    def generate():
        fname = "./src/console.log"
        with open(fname, "r+") as f:
            yield f.read()
    while True:
        emit_data = next(generate())
        socket.sleep(2)
        emit('custom-server-msg', {'data':emit_data})

否则，如果日志文件也在不断更新，可以使用 os.stat(FILE_NAME).st_mtime 来检查正在更新的文件的时间戳，如果日志文件有任何变化，将调用 next() 对其进行流式传输：

@socket.on('event_stream')
def test_connect():
    cached_stamp = 0
    def generate():
        fname = "./src/console.log"
        with open(fname, "r+") as f:
            yield f.read()
    while True:
        stamp = os.stat('./src/console.log').st_mtime
        if stamp != cached_stamp:
            cached_stamp = stamp
            emit_data = next(generate())
            emit('topo-server-msg', {'data':emit_data})