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

1. Rendez une page HTML initiale avec un
2. Envoyez du HTML en streaming (y compris CSS et contenu) dans le décorateur stream_with_context de Flask.
3. Utilisez render_template_string ou un fichier modèle distinct pour générer des fragments HTML à l'intérieur du stream.

# Server-side Flask code
@app.route("/stream")
def stream():
    @stream_with_context
    def generate():
        yield render_template_string('<link rel="stylesheet" href="%7B%7B%20url_for(" static filename="stream.css">')

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

<!-- Client-side HTML -->
<iframe src="%7B%7B%20url_for(" stream></iframe>

Remarque :

• XMLHttpRequest offre un contrôle plus fin mais nécessite une logique côté client plus complexe.
• Les iframes sont plus simples à mettre en œuvre, mais présentent des limites telles que la séparation des ressources et des risques potentiellement perturbateurs. style.

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!