Flask 보기에서 스트리밍된 데이터를 동적으로 업데이트하고 표시하는 방법은 무엇입니까?

업데이트 시 Flask 뷰에서 스트리밍된 데이터 표시

소개

Flask 애플리케이션에서는 표시하는 것이 종종 바람직합니다. 실시간으로 생성되거나 업데이트되는 데이터입니다. Flask에는 스트리밍 응답에 대한 지원이 내장되어 있지만 이 데이터를 HTML 템플릿에 통합하는 것은 어려울 수 있습니다. 이 문서에서는 페이지에 스트리밍되는 데이터를 동적으로 업데이트하고 형식을 지정하고 표시하는 방법을 살펴봅니다.

Flask에서 데이터 스트리밍

Flask에서 데이터를 스트리밍하려면 경로에 대한 응답으로 생성기를 사용할 수 있습니다. 응답이 반복될 때마다 생성기는 클라이언트에 데이터 덩어리를 생성합니다. 예:

@app.route('/')
def index():
    def inner():
        for i in range(500):
            # simulate a long process to watch
            j = math.sqrt(i)
            time.sleep(1)
            # this value should be inserted into an HTML template
            yield str(i) + '<br>\n'
    return flask.Response(inner(), mimetype='text/html')

이 코드는 매초 값을 생성하는 장기 실행 프로세스를 시뮬레이션합니다. 그런 다음 이러한 값은 HTML 조각으로 응답에 스트리밍됩니다.

JavaScript에서 스트리밍 데이터 처리

Flask는 스트리밍 응답을 지원하지만 HTML 템플릿은 서버 측에서 한 번 렌더링됩니다. 동적으로 업데이트할 수 없습니다. 브라우저에서 스트리밍 데이터를 처리하려면 JavaScript를 사용하여 엔드포인트에 요청하고 스트리밍 데이터가 도착하면 처리할 수 있습니다.

한 가지 접근 방식은 XMLHttpRequest(XHR) 개체를 사용하여 엔드포인트에 대한 요청을 생성하는 것입니다. 스트리밍 엔드포인트. 그런 다음 응답이 완료될 때까지 응답에서 데이터를 읽을 수 있습니다. 예는 다음과 같습니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', '{{ url_for('stream') }}');
xhr.send();
var position = 0;

function handleNewData() {
    // the response text includes the entire response so far
    // split the messages, then take the messages that haven't been handled yet
    // position tracks how many messages have been handled
    // messages end with a newline, so split will always show one extra empty message at the end
    var messages = xhr.responseText.split('\n');
    messages.slice(position, -1).forEach(function(value) {
        // Update the displayed data using JavaScript
        latest.textContent = value;  // update the latest value in place
        // Append the current value to a list to log all output
        var item = document.createElement('li');
        item.textContent = value;
        output.appendChild(item);
    });
    position = messages.length - 1;
}

// Check for new data periodically
var timer;
timer = setInterval(function() {
    // check the response for new data
    handleNewData();
    // stop checking once the response has ended
    if (xhr.readyState == XMLHttpRequest.DONE) {
        clearInterval(timer);
        latest.textContent = 'Done';
    }
}, 1000);

이 JavaScript 코드는 XMLHttpRequest 개체를 사용하여 스트리밍 엔드포인트에 대한 요청을 생성합니다. 그런 다음 타이머를 설정하여 정기적으로 새 데이터를 확인하고 이에 따라 페이지를 업데이트합니다.

스트리밍된 HTML 출력에 iframe 사용

스트리밍된 데이터를 표시하는 또 다른 접근 방식 Flask 보기는 iframe을 사용하는 것입니다. iframe은 스트리밍된 HTML 출력을 표시하는 데 사용할 수 있는 별도의 문서입니다. 예는 다음과 같습니다.

@app.route('/stream')
def stream():
    @stream_with_context
    def generate():
        # Serve initial CSS to style the iframe
        yield render_template_string('<link rel="stylesheet" href="%7B%7B%20url_for(" static filename="stream.css">')

        # Continuously stream HTML content within the iframe
        for i in range(500):
            yield render_template_string('<p>{{ i }}: {{ s }}</p>\n', i=i, s=sqrt(i))
            sleep(1)

    return app.response_class(generate())

<p>This is all the output:</p>
<iframe src="%7B%7B%20url_for('stream')%20%7D%7D"></iframe>

이 코드는 stream_with_context 데코레이터를 사용하여 생성기가 추가 기능을 지원하도록 향상합니다. iframe의 스타일을 지정하는 초기 CSS를 제공하고 iframe 내에서 HTML 콘텐츠를 지속적으로 스트리밍합니다. iframe의 HTML 템플릿은 더 복잡할 수 있으며 필요에 따라 다른 형식을 포함할 수 있습니다.

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