首页 > web前端 > js教程 > 如何显示从 Flask 视图流式传输的实时数据?

如何显示从 Flask 视图流式传输的实时数据?

Patricia Arquette
发布: 2024-12-09 09:43:07
原创
601 人浏览过

How Can I Display Real-Time Data Streamed from a Flask View?

实时显示从 Flask 视图流式传输的数据

在 Flask 中,从视图流式传输数据非常简单。但是,无法使用此流动态更新 HTML 模板。

JavaScript 和 XMLHttpRequest

一种解决方案是使用 JavaScript 和 XMLHttpRequest。我们可以:

  1. 使用 XMLHttpRequest 与流式传输数据的端点建立连接。
  2. 定期从流中读取数据直至完成。
  3. 直接更新 HTML收到的data.

示例:

# App
app = flask.Flask(__name__)

# Streaming view
@app.route('/')
def index():
    def generate():
        # Simulate data generation
        for i in range(500):
            yield str(i) + '<br/>\n'
    return flask.Response(generate(), mimetype='text/html')

# Run the app
app.run(debug=True)
登录后复制
<!-- Template -->
<p>Latest output: <span>
登录后复制

使用 Iframe

另一种方法涉及使用用于显示流式 HTML 输出的 iframe。虽然这允许样式灵活性和其他优点,但它也带来了缺点:

  • 更高的资源使用
  • 单独的文档,更难无缝集成
  • 潜在的滚动问题长的输出

示例:

index.html(主模板)

<p>All output:</p>
<iframe src=&quot;{{ url_for('stream') }}&quot;></iframe>
登录后复制

流式传输View

@app.route('/stream')
def stream():
    @stream_with_context
    def generate():
        yield '<link rel=stylesheet href=&quot;{{ url_for('static', filename='stream.css') }}&quot;>'
        for i in range(500):
            yield '<p>{{ i }}: {{ s }}</p>\n'.format(i=i, s=math.sqrt(i))
            sleep(1)
登录后复制

stream.css(可选样式表)

body {
  font-family: sans-serif;
}
p {
  margin-bottom: 10px;
}
登录后复制

通过使用 JavaScript/XMLHttpRequest 或 iframe 方法,您可以有效地显示 Flask 视图中的流数据并实时维护更新。

以上是如何显示从 Flask 视图流式传输的实时数据?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板