Flask ビューからストリーミングされたデータを更新時に表示する

はじめに

Flask アプリケーションでは、多くの場合、リアルタイムで生成または更新されるデータ。 Flask にはストリーミング応答のサポートが組み込まれていますが、このデータを HTML テンプレートに組み込むのは困難な場合があります。この記事では、ページにストリーミングされるデータを動的に更新、フォーマット、表示する方法について説明します。

Flask でのデータのストリーミング

Flask でデータをストリーミングするには、ルートへの応答としてジェネレーターを使用できます。応答が反復されるたびに、ジェネレーターはデータのチャンクをクライアントに提供します。例:

@app.route('/')
def index():
    def inner():
        for i in range(500):
            # simulate a long process to watch
            j = math.sqrt(i)
            time.sleep(1)
            # this value should be inserted into an HTML template
            yield str(i)   '
\n'
    return flask.Response(inner(), mimetype='text/html')

このコードは、値を毎秒生成する長時間実行プロセスをシミュレートします。これらの値は、HTML フラグメントとして応答にストリーミングされます。

JavaScript でのストリーム データの処理

Flask はストリーミング応答をサポートしていますが、HTML テンプレートはサーバー側で 1 回レンダリングされます。動的に更新することはできません。ブラウザでストリーミング データを処理するには、JavaScript を使用してエンドポイントにリクエストを作成し、ストリーミング データが到着したときにそのデータを処理します。

1 つの方法は、XMLHttpRequest (XHR) オブジェクトを使用して、次のリクエストを作成することです。ストリーミングエンドポイント。その後、完了するまで応答からデータを読み取ることができます。次に例を示します。

var xhr = new XMLHttpRequest();
xhr.open('GET', '{{ url_for('stream') }}');
xhr.send();
var position = 0;

function handleNewData() {
    // the response text includes the entire response so far
    // split the messages, then take the messages that haven't been handled yet
    // position tracks how many messages have been handled
    // messages end with a newline, so split will always show one extra empty message at the end
    var messages = xhr.responseText.split('\n');
    messages.slice(position, -1).forEach(function(value) {
        // Update the displayed data using JavaScript
        latest.textContent = value;  // update the latest value in place
        // Append the current value to a list to log all output
        var item = document.createElement('li');
        item.textContent = value;
        output.appendChild(item);
    });
    position = messages.length - 1;
}

// Check for new data periodically
var timer;
timer = setInterval(function() {
    // check the response for new data
    handleNewData();
    // stop checking once the response has ended
    if (xhr.readyState == XMLHttpRequest.DONE) {
        clearInterval(timer);
        latest.textContent = 'Done';
    }
}, 1000);

この JavaScript コードは、XMLHttpRequest オブジェクトを使用して、ストリーミング エンドポイントへのリクエストを作成します。次に、タイマーを設定して新しいデータを定期的にチェックし、それに応じてページを更新します。

ストリーミング HTML 出力に iframe を使用する

ストリーミングされたデータを表示する別のアプローチFlask ビューでは iframe を使用します。 iframe は、ストリーミングされた HTML 出力を表示するために使用できる別個のドキュメントです。次に例を示します:

@app.route('/stream')
def stream():
    @stream_with_context
    def generate():
        # Serve initial CSS to style the iframe
        yield render_template_string('')

        # Continuously stream HTML content within the iframe
        for i in range(500):
            yield render_template_string('
{{ i }}: {{ s }}
\n', i=i, s=sqrt(i))
            sleep(1)

    return app.response_class(generate())

This is all the output:

このコードは、stream_with_context デコレータを使用してジェネレータを強化し、追加機能をサポートします。これは、iframe のスタイルを設定するための初期 CSS を提供し、iframe 内で HTML コンテンツを継続的にストリーミングします。 iframe の HTML テンプレートはより複雑になる可能性があり、必要に応じてさまざまな書式設定を含めることができます。