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

問(wèn)題:

Flask ビュー。フォーマットされた HTML 內(nèi)で動(dòng)的に表示したいtemplate.

答え:

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

XMLHttpRequest の使用:

1. XMLHttpRequest リクエストを?qū)g行して、エンドポイントからストリーミング データを取得します。
2. ポーリングを?qū)g裝します。新しいものをチェックするメカニズム (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);