顯示更新時從Flask 視圖串流的資料

簡介

在Flask 應用程式中，通常需要顯示即時產生或更新的資料。雖然 Flask 內建了對串流響應的支持，但將此資料合併到 HTML 模板中可能具有挑戰性。本文探討如何在資料串流傳輸到頁面時動態更新、格式化和顯示資料。

在 Flask 中串流數據

要在 Flask 中串流數據，您需要可以使用生成器作為對路線的響應。每次迭代回應時，生成器都會向客戶端產生一塊資料。例如：

@app.route('/')
def index():
    def inner():
        for i in range(500):
            # simulate a long process to watch
            j = math.sqrt(i)
            time.sleep(1)
            # this value should be inserted into an HTML template
            yield str(i)   '
\n'
    return flask.Response(inner(), mimetype='text/html')

此程式碼模擬一個每秒產生值的長時間運行的進程。然後這些值以 HTML 片段的形式串流傳輸到回應。

在 JavaScript 處理串流資料

雖然 Flask 支援串流回應，但 HTML 範本在伺服器端渲染一次且無法動態更新。要在瀏覽器中處理串流數據，您可以使用 JavaScript 向端點發出請求，並在串流資料到達時進行處理。

一種方法是使用 XMLHttpRequest (XHR) 物件建立一個請求流端點。然後，您可以從回應中讀取數據，直至完成。這是一個例子：

var xhr = new XMLHttpRequest();
xhr.open('GET', '{{ url_for('stream') }}');
xhr.send();
var position = 0;

function handleNewData() {
    // the response text includes the entire response so far
    // split the messages, then take the messages that haven't been handled yet
    // position tracks how many messages have been handled
    // messages end with a newline, so split will always show one extra empty message at the end
    var messages = xhr.responseText.split('\n');
    messages.slice(position, -1).forEach(function(value) {
        // Update the displayed data using JavaScript
        latest.textContent = value;  // update the latest value in place
        // Append the current value to a list to log all output
        var item = document.createElement('li');
        item.textContent = value;
        output.appendChild(item);
    });
    position = messages.length - 1;
}

// Check for new data periodically
var timer;
timer = setInterval(function() {
    // check the response for new data
    handleNewData();
    // stop checking once the response has ended
    if (xhr.readyState == XMLHttpRequest.DONE) {
        clearInterval(timer);
        latest.textContent = 'Done';
    }
}, 1000);

此 JavaScript 程式碼使用 XMLHttpRequest 物件建立對流端點的請求。然後，它會設定一個計時器來定期檢查新資料並相應地更新頁面。

使用 iframe 進行串流 HTML 輸出

顯示串流資料的另一種方法Flask視圖就是使用iframe。 iframe 是一個單獨的文檔，可用於顯示串流 HTML 輸出。這是一個例子：

@app.route('/stream')
def stream():
    @stream_with_context
    def generate():
        # Serve initial CSS to style the iframe
        yield render_template_string('')

        # Continuously stream HTML content within the iframe
        for i in range(500):
            yield render_template_string('
{{ i }}: {{ s }}
\n', i=i, s=sqrt(i))
            sleep(1)

    return app.response_class(generate())

This is all the output:

此程式碼使用stream_with_context裝飾器來增強生成器以支援附加功能。它提供初始 CSS 來設定 iframe 的樣式，並在 iframe 中持續串流 HTML 內容。 iframe 中的 HTML 範本可以更複雜，並且可以根據需要包含不同的格式。