如何显示从 Flask 视图流式传输的实时数据？

实时显示从 Flask 视图流式传输的数据

简介

处理实时数据时，通常希望在数据可用时显示数据。对于 Flask，这可能具有挑战性，因为模板仅在服务器端渲染一次。本文探讨了如何克服此限制，允许在更大的模板页面中动态显示流数据。

利用 JavaScript 和 XMLHttpRequest

最通用的方法包括使用 JavaScript 和 XMLHttpRequest 定期从流式端点检索数据。然后可以将接收到的数据动态添加到页面中。这可以完全控制输出及其呈现。

# 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>

使用 Iframe** 方法

或者， iframe 可以显示流式 HTML 输出。虽然最初更容易实现，但它带来了一些缺点，例如增加资源使用和有限的样式选项。尽管如此，它对于某些场景还是很有用的。

# 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())

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

结论

无论是使用 JavaScript 还是 iframe，Flask 都允许集成实时数据流入模板化网页。这些技术可以动态显示不断变化的数据，提供更具吸引力的实时用户体验。

以上是如何显示从 Flask 视图流式传输的实时数据？的详细内容。更多信息请关注PHP中文网其他相关文章！