Flask ビューからストリーミングされたリアルタイム データを表示するにはどうすればよいですか?

Flask ビューからストリーミングされたデータをリアルタイムで表示する

はじめに

リアルタイム データを操作する場合、データが利用可能になったときに表示することが望ましい場合がよくあります。 Flask では、テンプレートがサーバー側で 1 回だけレンダリングされるため、これは困難になる可能性があります。この記事では、この制限を克服して、より大きなテンプレート ページでストリーミング データを動的に表示できるようにする方法について説明します。

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="{{ url_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="{{ url_for("stream") }}"></iframe>

結論

JavaScript を使用するか iframe を使用するかに関係なく、Flask はリアルタイムの統合を可能にします。テンプレート化された Web ページにデータをストリーミングします。これらの技術により、刻々と変化するデータの動的な表示が可能になり、より魅力的でリアルタイムのユーザー エクスペリエンスが提供されます。

以上がFlask ビューからストリーミングされたリアルタイム データを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。