如何顯示從 Flask 視圖串流的即時資料？

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

簡介

處理即時資料時，通常希望在資料

處理即時資料時，通常希望在資料

處理即時資料時，通常希望在資料可用時顯示數據。對於 Flask，這可能具有挑戰性，因為模板僅在伺服器端渲染一次。本文探討如何克服此限制，允許在更大的模板頁面中動態顯示流資料。

# Stream endpoint that generates sqrt(i) and yields it as a string
@app.route("/stream")
def stream():
    def generate():
        for i in range(500):
            yield f"{math.sqrt(i)}\n"
            time.sleep(1)

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

<!-- Utilize JavaScript to handle streaming data updates -->
<script>
  // Retrieve latest and historical values from streamed endpoint
  xhr.open("GET", "{{ url_for('stream') }}");
  xhr.send();

  var latest = document.getElementById("latest");
  var output = document.getElementById("output");

  var position = 0;

  function handleNewData() {
    // Split response, retrieve new messages, and track position
    var messages = xhr.responseText.split("\n");
    messages.slice(position, -1).forEach(function (value) {
      latest.textContent = value; // Update latest value
      var item = document.createElement("li");
      item.textContent = value;
      output.appendChild(item);
    });
    position = messages.length - 1;
  }

  // Periodically check for new data and stop when stream ends
  var timer;
  timer = setInterval(function () {
    handleNewData();
    if (xhr.readyState == XMLHttpRequest.DONE) {
      clearInterval(timer);
      latest.textContent = "Done";
    }
  }, 1000);
</script>

利用 JavaScript 和 XMLHttpRequest

最通用的方法包括使用 JavaScript 和 XMLHttpRequest 定期從串流端點擷取資料。然後可以將接收到的資料動態新增到頁面中。這可以完全控制輸出及其呈現。

使用

# Stream endpoint that generates html output
@app.route("/stream")
def stream():
    @stream_with_context
    def generate():
        yield render_template_string('<link rel="stylesheet" href="%7B%7B%20url_for(" static filename="stream.css">')
        for i in range(500):
            yield render_template_string("<p>{{ i }}: {{ s }}</p>\n", i=i, s=math.sqrt(i))
            sleep(1)

    return app.response_class(generate())

Iframe

<!-- Using an iframe for displaying streamed HTML -->
<p>This is all the output:</p>
<iframe src="%7B%7B%20url_for(" stream></iframe>

** 方法

或者， iframe 可以顯示流式 HTML 輸出。雖然最初更容易實現，但它帶來了一些缺點，例如增加資源使用和有限的樣式選項。儘管如此，它對於某些場景還是很有用的。

結論無論是使用 JavaScript 或 iframe，Flask 都允許整合即時資料流入模板化網頁。這些技術可以動態顯示不斷變化的數據，提供更具吸引力的即時使用者體驗。

以上是如何顯示從 Flask 視圖串流的即時資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！