Comment puis-je mettre à jour dynamiquement un modèle HTML avec des données en temps réel diffusées à partir d'une vue Flask ?

Diffuser des données dans un modèle HTML mis à jour dynamiquement

Problème :

Générer et diffuser des données en temps réel à partir d'un Vue Flask, nous souhaitons l'afficher dynamiquement dans un HTML formaté modèle.

Réponse :

Le streaming de données dans une réponse Flask est possible, cependant, il n'est pas possible de mettre à jour directement le contenu côté client. Pour obtenir ce que vous souhaitez, utilisez JavaScript et les méthodes suivantes :

Utilisation de XMLHttpRequest :

1. Effectuez une requête XMLHttpRequest pour récupérer les données diffusées à partir du point de terminaison.
2. Mettez en œuvre une interrogation mécanisme (par exemple, setInterval) pour vérifier les nouvelles données.
3. Lorsque de nouvelles données est reçu, analysez-le et affichez-le dans le code HTML (par exemple, en utilisant la manipulation DOM).
4. Gérez les données en continu jusqu'à la fin du flux (ou affichez un message de fin).

# Server-side Flask code
@app.route("/stream")
def stream():
    def generate():
        for i in range(500):
            yield "{}\n".format(sqrt(i))
            sleep(1)

    return app.response_class(generate(), mimetype="text/plain")

# Client-side JavaScript
var timer = setInterval(function() {
    // Handle new data
    if (xhr.readyState == XMLHttpRequest.DONE) { clearInterval(timer); }
}, 1000);

À l'aide d'un