Comment 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

Introduction

Lorsque vous travaillez avec des données en temps réel, il est il est souvent souhaitable d’afficher les données dès qu’elles deviennent disponibles. Avec Flask, cela peut être difficile car les modèles ne sont rendus qu'une seule fois côté serveur. Cet article explique comment surmonter cette limitation, en permettant l'affichage dynamique des données diffusées en continu dans une page modèle plus grande.

Utilisation de JavaScript et XMLHttpRequest

L'approche la plus polyvalente implique en utilisant JavaScript et XMLHttpRequest pour récupérer périodiquement des données à partir d'un point de terminaison diffusé en streaming. Les données reçues peuvent ensuite être ajoutées dynamiquement à la page. Cela garantit un contrôle complet sur la sortie et sa présentation.

# Stream endpoint that generates sqrt(i) and yields it as a string
@app.route("/stream")
def stream():
    def generate():
        for i in range(500):
            yield f"{math.sqrt(i)}\n"
            time.sleep(1)

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

<!-- Utilize JavaScript to handle streaming data updates -->
<script>
  // Retrieve latest and historical values from streamed endpoint
  xhr.open("GET", "{{ url_for('stream') }}");
  xhr.send();

  var latest = document.getElementById("latest");
  var output = document.getElementById("output");

  var position = 0;

  function handleNewData() {
    // Split response, retrieve new messages, and track position
    var messages = xhr.responseText.split("\n");
    messages.slice(position, -1).forEach(function (value) {
      latest.textContent = value; // Update latest value
      var item = document.createElement("li");
      item.textContent = value;
      output.appendChild(item);
    });
    position = messages.length - 1;
  }

  // Periodically check for new data and stop when stream ends
  var timer;
  timer = setInterval(function () {
    handleNewData();
    if (xhr.readyState == XMLHttpRequest.DONE) {
      clearInterval(timer);
      latest.textContent = "Done";
    }
  }, 1000);
</script>

Utilisation d'une approche Iframe**

Alternativement, une iframe peut afficher une sortie HTML en streaming. Bien qu'initialement plus facile à mettre en œuvre, il présente des inconvénients tels qu'une utilisation accrue des ressources et des options de style limitées. Néanmoins, il peut être utile pour certains scénarios.

# Stream endpoint that generates html output
@app.route("/stream")
def stream():
    @stream_with_context
    def generate():
        yield render_template_string('<link rel=stylesheet href="{{ url_for("static", filename="stream.css") }}">')
        for i in range(500):
            yield render_template_string("<p>{{ i }}: {{ s }}</p>\n", i=i, s=math.sqrt(i))
            sleep(1)

    return app.response_class(generate())

<!-- Using an iframe for displaying streamed HTML -->
<p>This is all the output:</p>
<iframe src="{{ url_for("stream") }}"></iframe>

Conclusion

Que ce soit en utilisant JavaScript ou des iframes, Flask permet l'intégration de données en temps réel diffusion de données en continu dans des pages Web modélisées. Ces techniques permettent l'affichage dynamique de données en constante évolution, offrant une expérience utilisateur plus engageante et 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!