Wie zeige ich Echtzeitdaten an, die aus einer Flask-Ansicht gestreamt werden?

Anzeigen von aus einer Flask-Ansicht gestreamten Daten in Echtzeit

Einführung

Wenn Sie mit Echtzeitdaten arbeiten, ist dies der Fall Oft ist es wünschenswert, die Daten anzuzeigen, sobald sie verfügbar sind. Bei Flask kann dies eine Herausforderung sein, da Vorlagen nur einmal auf der Serverseite gerendert werden. In diesem Artikel wird untersucht, wie diese Einschränkung überwunden werden kann, indem die dynamische Anzeige gestreamter Daten auf einer größeren Vorlagenseite ermöglicht wird.

Verwendung von JavaScript und XMLHttpRequest

Der vielseitigste Ansatz umfasst Verwenden von JavaScript und XMLHttpRequest, um regelmäßig Daten von einem gestreamten Endpunkt abzurufen. Die empfangenen Daten können dann dynamisch zur Seite hinzugefügt werden. Dies gewährt vollständige Kontrolle über die Ausgabe und deren 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>

Verwendung eines Iframe**-Ansatzes

Alternativ ein iframe kann gestreamte HTML-Ausgaben anzeigen. Obwohl es zunächst einfacher zu implementieren ist, bringt es Nachteile wie einen erhöhten Ressourcenverbrauch und begrenzte Gestaltungsmöglichkeiten mit sich. Nichtsdestotrotz kann es für bestimmte Szenarien nützlich sein.

# 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>

Fazit

Ob bei der Verwendung von JavaScript oder Iframes, Flask ermöglicht die Integration von Echtzeit Daten-Streaming in vorgefertigte Webseiten. Diese Techniken ermöglichen die dynamische Anzeige sich ständig ändernder Daten und sorgen so für ein ansprechenderes Benutzererlebnis in Echtzeit.

Das obige ist der detaillierte Inhalt vonWie zeige ich Echtzeitdaten an, die aus einer Flask-Ansicht gestreamt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!