> 웹 프론트엔드 > JS 튜토리얼 > Flask 보기에서 스트리밍되는 실시간 데이터로 HTML 템플릿을 어떻게 동적으로 업데이트할 수 있나요?

Flask 보기에서 스트리밍되는 실시간 데이터로 HTML 템플릿을 어떻게 동적으로 업데이트할 수 있나요?

Barbara Streisand
풀어 주다: 2024-11-29 07:50:09
원래의
312명이 탐색했습니다.

How can I dynamically update an HTML template with real-time data streamed from a Flask view?

동적으로 업데이트되는 HTML 템플릿으로 데이터 스트리밍

문제:

Flask 보기, 형식화된 HTML 내에서 동적으로 표시하려고 합니다. template.

답변:

Flask 응답 내에서 데이터 스트리밍은 가능하지만 클라이언트측 콘텐츠를 직접 업데이트하는 것은 불가능합니다. 원하는 결과를 얻으려면 JavaScript와 다음 방법을 활용하세요.

XMLHttpRequest 사용:

  1. XMLHttpRequest 요청을 수행하여 엔드포인트에서 스트리밍 데이터를 가져옵니다.
  2. 폴링을 구현합니다. 메커니즘(예: setInterval)을 사용하여 새 데이터를 확인합니다.
  3. 새 데이터가 수신하여 HTML로 구문 분석하고 표시합니다(예: DOM 조작 사용).
  4. 스트림이 끝날 때까지 계속 데이터를 처리합니다(또는 완료 메시지 표시).
# Server-side Flask code
@app.route("/stream")
def stream():
    def generate():
        for i in range(500):
            yield "{}\n".format(sqrt(i))
            sleep(1)

    return app.response_class(generate(), mimetype="text/plain")

# Client-side JavaScript
var timer = setInterval(function() {
    // Handle new data
    if (xhr.readyState == XMLHttpRequest.DONE) { clearInterval(timer); }
}, 1000);
로그인 후 복사