Anzeigen von Daten, die aus einer Flask-Ansicht gestreamt werden, während sie aktualisiert werden

Einführung

In Flask-Anwendungen ist es oft wünschenswert, sie anzuzeigen Daten, die in Echtzeit generiert oder aktualisiert werden. Obwohl Flask über eine integrierte Unterstützung für das Streamen von Antworten verfügt, kann die Integration dieser Daten in eine HTML-Vorlage eine Herausforderung darstellen. In diesem Artikel wird erläutert, wie Sie Daten dynamisch aktualisieren, formatieren und anzeigen, während sie auf die Seite gestreamt werden.

Daten in Flask streamen

Um Daten in Flask zu streamen, müssen Sie kann einen Generator als Antwort auf eine Route verwenden. Jedes Mal, wenn die Antwort wiederholt wird, liefert der Generator einen Datenblock an den Client. Zum Beispiel:

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

Dieser Code simuliert einen lang andauernden Prozess, der jede Sekunde Werte generiert. Diese Werte werden dann als HTML-Fragmente an die Antwort gestreamt.

Verarbeitung gestreamter Daten in JavaScript

Während Flask Streaming-Antworten unterstützt, werden HTML-Vorlagen einmal auf der Serverseite gerendert und kann nicht dynamisch aktualisiert werden. Um gestreamte Daten im Browser zu verarbeiten, können Sie JavaScript verwenden, um eine Anfrage an den Endpunkt zu stellen und die gestreamten Daten bei ihrem Eintreffen zu verarbeiten.

Ein Ansatz besteht darin, das XMLHttpRequest (XHR)-Objekt zu verwenden, um eine Anfrage an zu erstellen der Streaming-Endpunkt. Sie können dann regelmäßig Daten aus der Antwort lesen, bis sie vollständig ist. Hier ist ein Beispiel:

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

Dieser JavaScript-Code verwendet das XMLHttpRequest-Objekt, um eine Anfrage an den Streaming-Endpunkt zu erstellen. Anschließend wird ein Timer eingerichtet, um regelmäßig nach neuen Daten zu suchen und die Seite entsprechend zu aktualisieren.

Verwenden eines Iframes für die gestreamte HTML-Ausgabe

Ein weiterer Ansatz zum Anzeigen von gestreamten Daten Eine Flask-Ansicht besteht darin, einen Iframe zu verwenden. Ein Iframe ist ein separates Dokument, das zum Anzeigen gestreamter HTML-Ausgaben verwendet werden kann. Hier ist ein Beispiel:

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

Dieser Code verwendet den Stream_with_context-Dekorator, um den Generator zu erweitern und zusätzliche Funktionen zu unterstützen. Es dient als anfängliches CSS zur Gestaltung des Iframes und streamt kontinuierlich HTML-Inhalte innerhalb des Iframes. Die HTML-Vorlage im Iframe kann komplexer sein und je nach Bedarf unterschiedliche Formatierungen enthalten.