Comment puis-je diffuser efficacement des mises à jour de données en direct dans des modèles HTML Flask ?

Diffusion de mises à jour de données avec Flask

L'intégration de flux de données en direct dans des modèles HTML peut poser des défis en raison de la nature statique des modèles rendus sur le serveur . Cependant, il existe des approches pour obtenir cette fonctionnalité.

Pour diffuser des données sans modifier le modèle de manière dynamique, JavaScript peut être utilisé. En envoyant une requête à un point de terminaison de streaming, le JavaScript côté client peut lire et afficher les données en temps réel. Cette approche introduit de la complexité mais offre un meilleur contrôle sur l'apparence de la sortie.

Par exemple, le code suivant montre comment afficher à la fois la dernière valeur et un journal de toutes les valeurs reçues :

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);

Alternativement, un