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);