如何有效地將即時資料從 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中文網其他相關文章！