Menstrim Kemas Kini Data dengan Flask

Menyepadukan aliran data langsung ke dalam templat HTML boleh menimbulkan cabaran kerana sifat statik templat yang diberikan pada pelayan . Walau bagaimanapun, terdapat pendekatan untuk mencapai fungsi ini.

Untuk menstrim data tanpa mengubah suai templat secara dinamik, JavaScript boleh digunakan. Dengan mengeluarkan permintaan kepada titik akhir penstriman, JavaScript pihak klien boleh membaca dan memaparkan data dalam masa nyata. Pendekatan ini memperkenalkan kerumitan tetapi menawarkan kawalan yang lebih besar ke atas penampilan output.

Sebagai contoh, kod berikut menunjukkan cara untuk memaparkan kedua-dua nilai terkini dan log semua nilai yang diterima:

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

Sebagai alternatif,