Visualización de datos transmitidos desde una vista de Flask a medida que se actualiza

Introducción

En las aplicaciones de Flask, a menudo es deseable mostrar datos que se generan o actualizan en tiempo real. Si bien Flask tiene soporte integrado para la transmisión de respuestas, incorporar estos datos en una plantilla HTML puede resultar un desafío. Este artículo explora cómo actualizar, formatear y mostrar datos dinámicamente a medida que se transmiten a la página.

Transmisión de datos en Flask

Para transmitir datos en Flask, usted Puede utilizar un generador como respuesta a una ruta. Cada vez que se repite la respuesta, el generador proporciona una porción de datos al cliente. Por ejemplo:

@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 un proceso de larga duración que genera valores cada segundo. Estos valores luego se transmiten a la respuesta como fragmentos HTML.

Manejo de datos transmitidos en JavaScript

Si bien Flask admite la transmisión de respuestas, las plantillas HTML se representan una vez en el lado del servidor y no se puede actualizar dinámicamente. Para manejar datos transmitidos en el navegador, puede usar JavaScript para realizar una solicitud al punto final y procesar los datos transmitidos a medida que llegan.

Un enfoque es usar el objeto XMLHttpRequest (XHR) para crear una solicitud a el punto final de transmisión. Luego puede leer periódicamente los datos de la respuesta hasta que esté completa. Aquí hay un ejemplo:

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 utiliza el objeto XMLHttpRequest para crear una solicitud al punto final de transmisión. Luego configura un temporizador para comprobar periódicamente si hay nuevos datos y actualizar la página en consecuencia.

Usar un iframe para la salida HTML transmitida

Otro enfoque para mostrar datos transmitidos desde una vista Flask es utilizar un iframe. Un iframe es un documento independiente que se puede utilizar para mostrar resultados HTML transmitidos. Aquí hay un ejemplo:

@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 utiliza el decorador stream_with_context para mejorar el generador y admitir funciones adicionales. Sirve CSS inicial para diseñar el iframe y transmite continuamente contenido HTML dentro del iframe. La plantilla HTML en el iframe puede ser más compleja y puede incluir diferentes formatos según sea necesario.