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

将数据流式传输到 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中文网其他相关文章！