>웹 프론트엔드 >JS 튜토리얼 >Flask 보기에서 실시간 스트리밍 데이터를 효과적으로 표시하는 방법은 무엇입니까?

Flask 보기에서 실시간 스트리밍 데이터를 효과적으로 표시하는 방법은 무엇입니까?

Barbara Streisand
Barbara Streisand원래의
2024-12-05 10:26:101047검색

How to Effectively Display Real-time Streamed Data from a Flask View?

Flask 뷰에서 스트리밍 데이터를 표시하는 방법

웹 개발의 일반적인 작업 중 하나는 실시간으로 생성되는 데이터를 표시하는 것입니다. 이 데이터는 데이터베이스, 센서 또는 기계 학습 모델과 같은 다양한 소스에서 나올 수 있습니다.

Flask에서는 Yield 키워드를 사용하여 뷰에서 데이터를 스트리밍할 수 있습니다. 이를 통해 전체 응답이 생성될 때까지 기다리지 않고 클라이언트에 데이터를 청크로 보낼 수 있습니다. 이는 메모리에 담기에는 너무 큰 데이터를 표시하거나 끊임없이 변화하는 데이터를 표시하는 데 유용할 수 있습니다.

그러나 스트리밍 데이터의 한 가지 과제는 HTML 템플릿을 다음과 같이 동적으로 업데이트할 수 없다는 것입니다. 데이터가 전송됩니다. 템플릿은 서버 측에서 한 번 렌더링된 다음 클라이언트로 전송됩니다. 즉, JavaScript를 사용하여 템플릿을 실시간으로 업데이트할 수 없습니다.

이 문제를 해결하는 두 가지 주요 방법이 있습니다.

  1. JavaScript를 사용하여 스트리밍된 응답을 읽고 클라이언트측에서 데이터를 출력합니다. 이로 인해 복잡성이 발생하지만 페이지를 직접 업데이트할 수 있고 출력 모양을 완벽하게 제어할 수 있습니다.
  2. iframe을 사용하여 스트리밍된 HTML 출력을 표시합니다. 이는 더 간단한 솔루션이지만 몇 가지 단점이 있습니다. iframe은 리소스 사용량을 늘리는 별도의 문서입니다. 스트리밍된 데이터만 표시하기 때문에 페이지의 나머지 부분처럼 스타일을 지정하기가 쉽지 않을 수 있습니다. 데이터만 추가할 수 있으므로 긴 출력은 보이는 스크롤 영역 아래에 렌더링됩니다. 각 이벤트에 대한 응답으로 페이지의 다른 부분을 수정할 수 없습니다.

다음은 두 가지 솔루션을 구현하는 방법에 대한 몇 가지 예입니다.

JavaScript를 사용하여 업데이트 페이지 직접

<script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/stream');
    xhr.send();
    xhr.onload = function() {
        if (xhr.status === 200) {
            var data = xhr.responseText;
            // Update the page with the new data
        }
    };
</script>

iframe을 사용하여 스트리밍된 HTML 표시 출력

<iframe src="/stream"></iframe>

가장 적합한 솔루션은 특정 요구 사항에 따라 달라집니다. 페이지를 직접 업데이트하고 출력을 완전히 제어해야 하는 경우 JavaScript를 사용하는 것이 가장 좋습니다. 더 간단한 솔루션이 필요하거나 페이지를 직접 업데이트할 필요가 없다면 iframe을 사용하는 것이 좋은 선택입니다.

위 내용은 Flask 보기에서 실시간 스트리밍 데이터를 효과적으로 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.