실시간 데이터 업데이트를 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);

대안적으로,