Exibindo dados transmitidos de uma visualização do Flask à medida que são atualizados

Introdução

Em aplicativos Flask, geralmente é desejável exibir dados gerados ou atualizados em tempo real. Embora o Flask tenha suporte integrado para respostas de streaming, incorporar esses dados em um modelo HTML pode ser um desafio. Este artigo explora como atualizar, formatar e exibir dados dinamicamente à medida que são transmitidos para a página.

Streaming de dados no Flask

Para transmitir dados no Flask, você pode usar um gerador como resposta a uma rota. Cada vez que a resposta é iterada, o gerador fornece uma parte dos dados ao cliente. Por exemplo:

@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')

Este código simula um processo de longa execução que gera valores a cada segundo. Esses valores são então transmitidos para a resposta como fragmentos HTML.

Tratamento de dados transmitidos em JavaScript

Embora o Flask suporte respostas de streaming, os modelos HTML são renderizados uma vez no lado do servidor e não pode ser atualizado dinamicamente. Para lidar com dados transmitidos no navegador, você pode usar JavaScript para fazer uma solicitação ao endpoint e processar os dados transmitidos conforme eles chegam.

Uma abordagem é usar o objeto XMLHttpRequest (XHR) para criar uma solicitação para o ponto de extremidade de streaming. Você pode então ler periodicamente os dados da resposta até que ela seja concluída. Aqui está um exemplo:

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

Este código JavaScript usa o objeto XMLHttpRequest para criar uma solicitação para o endpoint de streaming. Em seguida, ele configura um cronômetro para verificar periodicamente novos dados e atualizar a página de acordo.

Usando um iframe para saída HTML transmitida

Outra abordagem para exibir dados transmitidos de uma visualização Flask é usar um iframe. Um iframe é um documento separado que pode ser usado para exibir saída HTML transmitida. Aqui está um exemplo:

@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:

Este código usa o decorador stream_with_context para aprimorar o gerador e oferecer suporte a funcionalidades adicionais. Ele serve CSS inicial para estilizar o iframe e transmite continuamente conteúdo HTML dentro do iframe. O modelo HTML no iframe pode ser mais complexo e incluir formatação diferente conforme necessário.