使用Flask 進行串流資料更新
由於伺服器上呈現的範本的靜態特性，將即時資料流整合到HTML 範本中可能會帶來挑戰。但是，有一些方法可以實現此功能。
要在不動態修改模板的情況下傳輸數據，可以使用 JavaScript。透過向串流端點發出請求，客戶端 JavaScript 可以即時讀取並顯示資料。這種方法會帶來複雜性，但可以更好地控制輸出外觀。
例如，以下程式碼示範如何顯示最新值和所有接收到的值的日誌：
setInterval(() => {
var latest = document.getElementById('latest');
var output = document.getElementById('output');
var xhr = new XMLHttpRequest();
xhr.open('GET', '{{ url_for('stream') }}');
xhr.send();
var position = 0;
function handleNewData() {
var messages = xhr.responseText.split('\n');
messages.slice(position, -1).forEach(function(value) {
latest.textContent = value;
var item = document.createElement('li');
item.textContent = value;
output.appendChild(item);
});
position = messages.length - 1;
}
timer = setInterval(function() {
handleNewData();
if (xhr.readyState === XMLHttpRequest.DONE) {
clearInterval(timer);
latest.textContent = 'Done';
}
}, 1000);
}, 1000);或者，
<p>This is all the output:</p>
<iframe src="{{ url_for('stream') }}"></iframe>iframe {
width: 300px;
height: 200px;
}@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())最終，可以選擇透過 JavaScript 或
以上是如何有效地將即時資料更新傳輸到 Flask HTML 模板中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
