ライブ データの更新を Flask HTML テンプレートに効率的にストリーミングするにはどうすればよいですか?

Flask を使用したスト​​リーミング データの更新

ライブ データ ストリームを HTML テンプレートに統合すると、サーバー上でレンダリングされるテンプレートの静的な性質により課題が生じる可能性があります。ただし、この機能を実現するアプローチはあります。

テンプレートを動的に変更せずにデータをストリーミングするには、JavaScript を使用できます。ストリーミング エンドポイントにリクエストを発行することにより、クライアント側 JavaScript はデータをリアルタイムで読み取って表示できます。このアプローチでは複雑さが生じますが、出力の外観をより詳細に制御できます。

たとえば、次のコードは、最新の値と受信したすべての値のログの両方を表示する方法を示しています。

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

あるいは、