Comment mettre à jour et afficher dynamiquement les données diffusées à partir d'une vue Flask ?

Affichage des données diffusées à partir d'une vue Flask lors de leur mise à jour

Introduction

Dans les applications Flask, il est souvent souhaitable d'afficher données générées ou mises à jour en temps réel. Bien que Flask prenne en charge de manière intégrée les réponses en continu, l'intégration de ces données dans un modèle HTML peut s'avérer difficile. Cet article explique comment mettre à jour, formater et afficher dynamiquement les données au fur et à mesure de leur diffusion sur la page.

Diffusion de données dans Flask

Pour diffuser des données dans Flask, vous peut utiliser un générateur comme réponse à un itinéraire. Chaque fois que la réponse est itérée, le générateur fournit un bloc de données au client. Par exemple :

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

Ce code simule un processus de longue durée qui génère des valeurs chaque seconde. Ces valeurs sont ensuite transmises à la réponse sous forme de fragments HTML.

Gestion des données diffusées en continu en JavaScript

Bien que Flask prenne en charge les réponses en continu, les modèles HTML sont rendus une fois côté serveur. et ne peut pas être mis à jour dynamiquement. Pour gérer les données diffusées en continu dans le navigateur, vous pouvez utiliser JavaScript pour adresser une requête au point de terminaison et traiter les données diffusées dès leur arrivée.

Une approche consiste à utiliser l'objet XMLHttpRequest (XHR) pour créer une requête pour le point de terminaison de streaming. Vous pouvez ensuite lire périodiquement les données de la réponse jusqu'à ce qu'elle soit complète. Voici un exemple :

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

Ce code JavaScript utilise l'objet XMLHttpRequest pour créer une requête adressée au point de terminaison de streaming. Il configure ensuite un minuteur pour vérifier périodiquement les nouvelles données et mettre à jour la page en conséquence.

Utiliser une iframe pour la sortie HTML diffusée

Une autre approche pour afficher les données diffusées depuis une vue Flask consiste à utiliser une iframe. Une iframe est un document distinct qui peut être utilisé pour afficher une sortie HTML en streaming. Voici un exemple :

@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="{{ url_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="{{ url_for('stream') }}"></iframe>

Ce code utilise le décorateur stream_with_context pour améliorer le générateur afin de prendre en charge des fonctionnalités supplémentaires. Il sert le CSS initial pour styliser l'iframe et diffuse en continu le contenu HTML dans l'iframe. Le modèle HTML dans l'iframe peut être plus complexe et inclure différents formats selon les besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!