如何解决在用户界面中显示不断变化的文件的内容
在我的项目中,我使用的是 React 前端和 Flask 后端。基本功能是flask(api.py)读取文件(log.txt)的数据,然后React(App.js)从flask中获取数据,当点击日志按钮时,log.txt的内容出现用户界面。但是,如果向 log.txt 添加更多内容,则必须再次单击日志按钮才能查看更新的结果。当单击日志按钮时,我想要诸如从 log.txt 到用户界面的连续实时数据流。如何才能做到这一点?我是反应的新手,烧瓶并且已经通过 socket.io 和 websocket 但找不到任何合适的解决方案。任何帮助将不胜感激!
这是我的烧瓶代码(api.py)
from flask import Flask
from flask_cors import CORS,cross_origin
import time
app = Flask(__name__)
CORS(app)
@app.route('/log')
def stream():
def generate():
fname = "./log.txt"
with open(fname) as f:
yield f.read()
return(app.response_class(generate(),mimetype='text/plain'))
app.run()
这是我的 React 代码(App.js)
import React,{ Component } from 'react';
import './App.css';
export default class App extends Component {
constructor() {
super()
this.state = {
pyResp: []
}
}
fetch_log() {
console.log("fetching python localhost");
fetch('http://localhost:5000/log',{
method: 'GET',dataType: 'text'
})
.then(r => r.text())
.then(r => {
console.log(r)
this.setState({
pyResp: r
})
})
.catch(err => console.log(err))
}
render() {
return (
<div className="App">
<button onClick={() => this.fetch_log()}>Log</button>
<p>
{this.state.pyResp}
</p>
</div>
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。