Comment diffuser efficacement des données en temps réel à partir d'une vue Flask vers un modèle HTML ?

Diffusion de données dans un modèle HTML

Lorsque vous travaillez avec des données en temps réel diffusées à partir d'une vue Flask, il est naturel de vouloir les afficher dans un modèle HTML dynamique. Cependant, les techniques traditionnelles de rendu de modèles ne suffisent pas, car le modèle est rendu une fois côté serveur et envoyé dans son intégralité au client.

Utilisation de JavaScript pour l'affichage dynamique

Une solution à ce problème consiste à utiliser JavaScript pour les mises à jour côté client. En envoyant une requête XMLHttpRequest au point de terminaison de streaming, vous pouvez lire les données de manière incrémentielle et les afficher directement sur la page. Cette approche permet des mises à jour en temps réel et un contrôle complet sur le format d'affichage.

Voici un exemple utilisant JavaScript :

Python (côté serveur) :

from flask import Flask, Response

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/stream')
def stream():
    def generate():
        for i in range(10):
            yield str(i) + '\n'
    return Response(generate(), mimetype='text/plain')

HTML (côté client) :

<p>This is the latest output: <span>

Utiliser un Iframe pour le streaming HTML

Une alternative L'approche implique l'utilisation d'une iframe pour afficher la sortie HTML en streaming. Bien que cette technique permette un rendu dynamique, elle présente des inconvénients :

• Ajoute de la complexité en raison du contexte de document séparé
• Options de style limitées
• Problèmes de rendu potentiels avec une sortie longue

Dans cette méthode, le fichier index.html serait contain :

<p>This is all the output:</p>
<iframe src="{{ url_for('stream') }}"></iframe>

Et la vue du flux en Python serait :

from flask import stream_with_context

@app.route('/stream')
def stream():
    @stream_with_context
    def generate():
        yield '<link rel=stylesheet href="{{ url_for('static', filename='stream.css') }}">'
        for i in range(10):
            yield render_template_string('<p>{{ i }}: {{ s }}</p>\n', i=i, s=sqrt(i))

Dans cet exemple, CSS est chargé en premier dans l'iframe à l'aide de render_template_string, et le contenu HTML est diffusé de manière incrémentielle .

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!