Comment puis-je afficher les données en temps réel diffusées à partir d'une vue Flask ?

Affichage des données diffusées à partir d'une vue Flask en temps réel

Dans Flask, la diffusion de données à partir d'une vue est simple. Cependant, il n'est pas possible de mettre à jour dynamiquement un modèle HTML avec ce flux.

JavaScript et XMLHttpRequest

Une solution consiste à utiliser JavaScript et XMLHttpRequest. Nous pouvons :

1. Utiliser XMLHttpRequest pour établir une connexion avec le point de terminaison diffusant les données.
2. Lire périodiquement à partir du flux jusqu'à la fin.
3. Mettre à jour le code HTML directement avec le reçu données.

Exemple :

# App
app = flask.Flask(__name__)

# Streaming view
@app.route('/')
def index():
    def generate():
        # Simulate data generation
        for i in range(500):
            yield str(i) + '<br/>\n'
    return flask.Response(generate(), mimetype='text/html')

# Run the app
app.run(debug=True)

<!-- Template -->
<p>Latest output: <span>

Utiliser un Iframe

Une autre approche consiste à utiliser une iframe pour afficher la sortie HTML en streaming. Bien que cela permet une flexibilité de style et d'autres avantages, cela présente également des inconvénients :

• Utilisation plus élevée des ressources
• Document séparé, plus difficile à intégrer de manière transparente
• Problèmes de défilement potentiels avec long sortie

Exemple :

index.html (modèle principal)

<p>All output:</p>
<iframe src=&quot;{{ url_for('stream') }}&quot;></iframe>

Streaming Voir

@app.route('/stream')
def stream():
    @stream_with_context
    def generate():
        yield '<link rel=stylesheet href=&quot;{{ url_for('static', filename='stream.css') }}&quot;>'
        for i in range(500):
            yield '<p>{{ i }}: {{ s }}</p>\n'.format(i=i, s=math.sqrt(i))
            sleep(1)

stream.css (Feuille de style facultative)

body {
  font-family: sans-serif;
}
p {
  margin-bottom: 10px;
}

En utilisant les méthodes JavaScript/XMLHttpRequest ou iframe, vous pouvez afficher efficacement les données diffusées à partir de votre vue Flask et maintenir les mises à jour en temps réel.

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!