ホームページ >ウェブフロントエンド >jsチュートリアル >Flask ビューからリアルタイムのストリーミング データを効果的に表示するにはどうすればよいですか?

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

Barbara Streisand
Barbara Streisandオリジナル
2024-12-05 10:26:101047ブラウズ

How to Effectively Display Real-time Streamed Data from a Flask View?

Flask ビューからストリーミング データを表示する方法

Web 開発における一般的なタスクの 1 つは、リアルタイムで生成されたデータを表示することです。このデータは、データベース、センサー、機械学習モデルなど、さまざまなソースから取得できます。

Flask では、yield キーワードを使用してビューからデータをストリーミングできます。これにより、応答全体が生成されるのを待つのではなく、データを分割してクライアントに送信できます。これは、メモリに収まらないほど大きすぎるデータを表示する場合や、常に変化するデータを表示する場合に便利です。

ただし、ストリーミング データの課題の 1 つは、HTML テンプレートを動的に更新できないことです。データが送信されます。テンプレートはサーバー側で一度レンダリングされてから、クライアントに送信されます。これは、JavaScript を使用してテンプレートをリアルタイムで更新できないことを意味します。

この問題を解決するには、主に 2 つの方法があります。

  1. JavaScript を使用してストリーミングされた応答を読み取り、クライアント側でデータを出力します。これにより複雑になりますが、ページを直接更新でき、出力の外観を完全に制御できるようになります。
  2. ストリーミングされた HTML 出力を表示するには、iframe を使用します。これはより簡単な解決策ですが、いくつかの欠点があります。 iframe は別個のドキュメントであるため、リソースの使用量が増加します。ストリーミング データを表示しているだけなので、ページの残りの部分と同じようにスタイルを設定するのは簡単ではない可能性があります。データを追加することしかできないため、長い出力は表示されるスクロール領域の下にレンダリングされます。各イベントに応じてページの他の部分を変更することはできません。

両方のソリューションを実装する方法の例をいくつか示します。

JavaScript を使用してページを直接表示

<script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/stream');
    xhr.send();
    xhr.onload = function() {
        if (xhr.status === 200) {
            var data = xhr.responseText;
            // Update the page with the new data
        }
    };
</script>

iframe を使用してストリーミングされた HTML を表示する出力

<iframe src="/stream"></iframe>

最適なソリューションは、特定の要件によって異なります。ページを直接更新し、出力を完全に制御する必要がある場合は、JavaScript を使用するのが最適なオプションです。より単純な解決策が必要な場合、またはページを直接更新する必要がない場合は、iframe を使用するのが良い選択です。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。