首页 > web前端 > js教程 > 如何有效地将实时数据从 Flask 视图传输到 HTML 模板中?

如何有效地将实时数据从 Flask 视图传输到 HTML 模板中?

Susan Sarandon
发布: 2024-12-26 12:55:14
原创
1006 人浏览过

How to Efficiently Stream Real-time Data from a Flask View into an HTML Template?

将数据流式传输到 HTML 模板

使用从 Flask 视图流式传输的实时数据时,很自然地希望将其显示在动态 HTML 模板中。然而,传统的模板渲染技术存在不足,因为模板在服务器端渲染一次并完整发送到客户端。

使用 JavaScript 进行动态显示

解决此问题的一种方法是利用 JavaScript 进行客户端更新。通过向流端点发出 XMLHttpRequest 请求,您可以增量读取数据并将其直接输出到页面。这种方法允许实时更新并完全控制显示格式。

这是一个使用 JavaScript 的示例:

Python(服务器端):

from flask import Flask, Response

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/stream')
def stream():
    def generate():
        for i in range(10):
            yield str(i) + '\n'
    return Response(generate(), mimetype='text/plain')
登录后复制

HTML(客户端):

<p>This is the latest output: <span>
登录后复制

使用 HTML 的 Iframe流式传输

另一种方法是使用 iframe 来显示流式 HTML 输出。虽然这种技术允许动态渲染,但它也有缺点:

  • 由于单独的文档上下文而增加了复杂性
  • 有限的样式选项
  • 长输出的潜在渲染问题

在此方法中,index.html 文件将包含:

<p>This is all the output:</p>
<iframe src="{{ url_for('stream') }}"></iframe>
登录后复制

Python 中的流视图将是:

from flask import stream_with_context

@app.route('/stream')
def stream():
    @stream_with_context
    def generate():
        yield '<link rel=stylesheet href="{{ url_for('static', filename='stream.css') }}">'
        for i in range(10):
            yield render_template_string('<p>{{ i }}: {{ s }}</p>\n', i=i, s=sqrt(i))
登录后复制

在此示例中,CSS 首先使用 render_template_string 加载到 iframe 中,然后增量传输 HTML 内容.

以上是如何有效地将实时数据从 Flask 视图传输到 HTML 模板中?的详细内容。更多信息请关注PHP中文网其他相关文章!

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