Отображение данных, передаваемых в потоковом режиме из представления 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-шаблоны обрабатываются один раз на стороне сервера. и не может быть динамически обновлено. Чтобы обрабатывать потоковые данные в браузере, вы можете использовать JavaScript для отправки запроса к конечной точке и обработки потоковых данных по мере их поступления.

Один из подходов — использовать объект 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 для создания запроса к конечной точке потоковой передачи. Затем он устанавливает таймер для периодической проверки новых данных и соответствующего обновления страницы.

Использование iframe для потокового вывода HTML

Другой подход к отображению потоковых данных из Представление 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 для улучшения генератора для поддержки дополнительных функций. Он использует исходный CSS для стилизации iframe и непрерывно передает HTML-контент внутри iframe. HTML-шаблон в iframe может быть более сложным и при необходимости включать различное форматирование.