如何使用 Flask 视图中流式传输的实时数据动态更新 HTML 模板？

将数据流式传输到动态更新的 HTML 模板

问题：

从Flask 视图，我们希望在格式化的 HTML 中动态显示它template.

答案：

在 Flask 响应中流式传输数据是可能的，但是直接更新客户端内容是不可行的。要实现所需的效果，请利用 JavaScript 和以下方法：

使用 XMLHttpRequest：

1. 执行 XMLHttpRequest 请求以从端点获取流数据。
2. 实现轮询机制（例如 setInterval）来检查新数据。
3. 当新数据出现时接收、解析并在 HTML 中显示它（例如，使用 DOM 操作）。
4. 持续处理数据，直到流结束（或显示完成消息）。

# Server-side Flask code
@app.route("/stream")
def stream():
    def generate():
        for i in range(500):
            yield "{}\n".format(sqrt(i))
            sleep(1)

    return app.response_class(generate(), mimetype="text/plain")

# Client-side JavaScript
var timer = setInterval(function() {
    // Handle new data
    if (xhr.readyState == XMLHttpRequest.DONE) { clearInterval(timer); }
}, 1000);

使用

1. 使用以下内容渲染初始 HTML 页面
2. 在 Flask 的stream_with_context 装饰器中发送流式 HTML（包括 CSS 和内容）。
3. 使用 render_template_string 或单独的模板文件在内部生成 HTML 片段

# Server-side Flask code
@app.route("/stream")
def stream():
    @stream_with_context
    def generate():
        yield render_template_string('<link rel=stylesheet href="{{ url_for("static", filename="stream.css") }}">')

        for i in range(500):
            yield render_template_string("<p>{{ i }}: {{ s }}</p>\n", i=i, s=sqrt(i))
            sleep(1)

    return app.response_class(generate())

<!-- Client-side HTML -->
<iframe src="{{ url_for("stream") }}"></iframe>

注意：

• XMLHttpRequest 提供更精细的控制，但需要更复杂的客户端逻辑。
• iframe 更容易实现，但存在资源分离和潜在破坏性等限制造型。

以上是如何使用 Flask 视图中流式传输的实时数据动态更新 HTML 模板？的详细内容。更多信息请关注PHP中文网其他相关文章！