簡介
在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) + '<br/>\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('<link rel=stylesheet href="{{ url_for("static", filename="stream.css") }}">')
# Continuously stream HTML content within the iframe
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())<p>This is all the output:</p>
<iframe src="{{ url_for('stream') }}"></iframe>此程式碼使用stream_with_context 裝飾器來增強生成器以支援其他功能。它提供初始 CSS 來設定 iframe 的樣式，並在 iframe 中持續串流 HTML 內容。 iframe 中的 HTML 範本可以更複雜，並且可以根據需要包含不同的格式。
以上是如何動態更新和顯示從 Flask 視圖串流的資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
