Flask ビューからストリーミングされたデータを動的に更新して表示する方法

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) + '<br>\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('<link rel="stylesheet" href="%7B%7B%20url_for(" static filename="stream.css">')

        # Continuously stream HTML content within the iframe
        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())

<p>This is all the output:</p>
<iframe src="%7B%7B%20url_for('stream')%20%7D%7D"></iframe>

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

以上がFlask ビューからストリーミングされたデータを動的に更新して表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。