Wie kann ich Live-Datenaktualisierungen effizient in Flask-HTML-Vorlagen streamen?

Streaming von Datenaktualisierungen mit Flask

Die Integration von Live-Datenströmen in HTML-Vorlagen kann aufgrund der statischen Natur der auf dem Server gerenderten Vorlagen eine Herausforderung darstellen . Es gibt jedoch Ansätze, diese Funktionalität zu erreichen.

Um Daten zu streamen, ohne die Vorlage dynamisch zu ändern, kann JavaScript eingesetzt werden. Durch Senden einer Anfrage an einen Streaming-Endpunkt kann das clientseitige JavaScript die Daten in Echtzeit lesen und anzeigen. Dieser Ansatz erhöht die Komplexität, bietet aber eine bessere Kontrolle über das Erscheinungsbild der Ausgabe.

Der folgende Code zeigt beispielsweise, wie sowohl der neueste Wert als auch ein Protokoll aller empfangenen Werte angezeigt werden:

setInterval(() => {
  var latest = document.getElementById('latest');
  var output = document.getElementById('output');
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '{{ url_for('stream') }}');
  xhr.send();
  var position = 0;

  function handleNewData() {
    var messages = xhr.responseText.split('\n');
    messages.slice(position, -1).forEach(function(value) {
      latest.textContent = value;
      var item = document.createElement('li');
      item.textContent = value;
      output.appendChild(item);
    });
    position = messages.length - 1;
  }

  timer = setInterval(function() {
    handleNewData();
    if (xhr.readyState === XMLHttpRequest.DONE) {
      clearInterval(timer);
      latest.textContent = 'Done';
    }
  }, 1000);
}, 1000);

Alternativ kann ein