Flask ビューからストリーミングされたリアルタイム データを使用して HTML テンプレートを動的に更新するにはどうすればよいですか?

動的に更新される HTML テンプレートへのデータのストリーミング

問題:

Flask ビュー。フォーマットされた HTML 内で動的に表示したいtemplate.

答え:

Flask 応答内でデータをストリーミングすることは可能ですが、クライアント側のコンテンツを直接更新することは現実的ではありません。目的を達成するには、JavaScript と次のメソッドを利用します。

XMLHttpRequest の使用:

1. XMLHttpRequest リクエストを実行して、エンドポイントからストリーミング データを取得します。
2. ポーリングを実装します。新しいものをチェックするメカニズム (setInterval など) data.
3. 新しいデータを受信すると、それを解析して HTML に表示します (例: DOM 操作を使用します)。
4. ストリームが終了する (または完了メッセージを表示する) までデータを継続的に処理します。

# Server-side Flask code
@app.route("/stream")
def stream():
    def generate():
        for i in range(500):
            yield "{}\n".format(sqrt(i))
            sleep(1)

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

# Client-side JavaScript
var timer = setInterval(function() {
    // Handle new data
    if (xhr.readyState == XMLHttpRequest.DONE) { clearInterval(timer); }
}, 1000);

2. Flask の stream_with_context デコレーター内でストリーミング HTML (CSS とコンテンツを含む) を送信します。
3. render_template_string または別のテンプレート ファイルを使用して、内部に HTML フラグメントを生成します。

# Server-side Flask code
@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=sqrt(i))
            sleep(1)

    return app.response_class(generate())

<!-- Client-side HTML -->
<iframe src="%7B%7B%20url_for(" stream></iframe>

注:

• XMLHttpRequest はより詳細な制御を提供しますが、より複雑なクライアント側ロジックが必要です。
• iframe は実装が簡単ですが、リソースの分離などの制限があり、場合によっては破壊的なスタイリング。

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