>웹 프론트엔드 >JS 튜토리얼 >Flask 보기에서 스트리밍된 실시간 데이터를 어떻게 표시할 수 있나요?

Flask 보기에서 스트리밍된 실시간 데이터를 어떻게 표시할 수 있나요?

Patricia Arquette
Patricia Arquette원래의
2024-12-09 09:43:07576검색

How Can I Display Real-Time Data Streamed from a Flask View?

Flask 뷰에서 스트리밍된 데이터를 실시간으로 표시

Flask에서는 뷰에서 데이터를 스트리밍하는 것이 간단합니다. 그러나 이 스트림으로 HTML 템플릿을 동적으로 업데이트하는 것은 불가능합니다.

JavaScript 및 XMLHttpRequest

한 가지 해결책은 JavaScript와 XMLHttpRequest를 사용하는 것입니다. 다음을 수행할 수 있습니다.

  1. XMLHttpRequest를 사용하여 데이터를 스트리밍하는 엔드포인트와의 연결을 설정합니다.
  2. 완료될 때까지 스트림에서 주기적으로 읽습니다.
  3. HTML을 직접 업데이트합니다. 받은 data.

예:

# App
app = flask.Flask(__name__)

# Streaming view
@app.route('/')
def index():
    def generate():
        # Simulate data generation
        for i in range(500):
            yield str(i) + '<br/>\n'
    return flask.Response(generate(), mimetype='text/html')

# Run the app
app.run(debug=True)
<!-- Template -->
<p>Latest output: <span>

Iframe 사용

또 다른 접근 방식은 다음을 사용하는 것입니다. 스트리밍 HTML 출력을 표시하는 iframe. 스타일링 유연성과 기타 장점이 있지만 단점도 있습니다.

  • 리소스 사용량이 더 높음
  • 별도의 문서, 원활한 통합이 더 어려움
  • 잠재적인 스크롤 문제 긴 출력

예:

index.html(기본 템플릿)

<p>All output:</p>
<iframe src=&quot;{{ url_for('stream') }}&quot;></iframe>

스트리밍 보기

@app.route('/stream')
def stream():
    @stream_with_context
    def generate():
        yield '<link rel=stylesheet href=&quot;{{ url_for('static', filename='stream.css') }}&quot;>'
        for i in range(500):
            yield '<p>{{ i }}: {{ s }}</p>\n'.format(i=i, s=math.sqrt(i))
            sleep(1)

stream.css(선택적 스타일시트)

body {
  font-family: sans-serif;
}
p {
  margin-bottom: 10px;
}

JavaScript/XMLHttpRequest 또는 iframe 메소드를 활용하면 다음을 효과적으로 수행할 수 있습니다. Flask 보기에서 스트리밍된 데이터를 표시하고 실시간으로 업데이트를 유지합니다.

위 내용은 Flask 보기에서 스트리밍된 실시간 데이터를 어떻게 표시할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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