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

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

소개

실시간 데이터로 작업할 때 데이터를 사용할 수 있을 때 표시하는 것이 바람직한 경우가 많습니다. Flask를 사용하면 템플릿이 서버 측에서 한 번만 렌더링되므로 이것이 어려울 수 있습니다. 이 기사에서는 더 큰 템플릿 페이지에서 스트리밍 데이터를 동적으로 표시하여 이러한 제한을 극복하는 방법을 살펴봅니다.

JavaScript 및 XMLHttpRequest 활용

가장 다재다능한 접근 방식은 다음과 같습니다. JavaScript 및 XMLHttpRequest를 사용하여 스트리밍 엔드포인트에서 주기적으로 데이터를 검색합니다. 그러면 수신된 데이터가 페이지에 동적으로 추가될 수 있습니다. 이를 통해 출력과 해당 프레젠테이션을 완벽하게 제어할 수 있습니다.

# Stream endpoint that generates sqrt(i) and yields it as a string
@app.route("/stream")
def stream():
    def generate():
        for i in range(500):
            yield f"{math.sqrt(i)}\n"
            time.sleep(1)

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

<!-- Utilize JavaScript to handle streaming data updates -->
<script>
  // Retrieve latest and historical values from streamed endpoint
  xhr.open("GET", "{{ url_for('stream') }}");
  xhr.send();

  var latest = document.getElementById("latest");
  var output = document.getElementById("output");

  var position = 0;

  function handleNewData() {
    // Split response, retrieve new messages, and track position
    var messages = xhr.responseText.split("\n");
    messages.slice(position, -1).forEach(function (value) {
      latest.textContent = value; // Update latest value
      var item = document.createElement("li");
      item.textContent = value;
      output.appendChild(item);
    });
    position = messages.length - 1;
  }

  // Periodically check for new data and stop when stream ends
  var timer;
  timer = setInterval(function () {
    handleNewData();
    if (xhr.readyState == XMLHttpRequest.DONE) {
      clearInterval(timer);
      latest.textContent = "Done";
    }
  }, 1000);
</script>

Iframe** 접근 방식

사용 iframe은 스트리밍된 HTML 출력을 표시할 수 있습니다. 처음에는 구현하기 쉽지만 리소스 사용량이 늘어나고 스타일 옵션이 제한되는 등의 단점이 있습니다. 그럼에도 불구하고 특정 시나리오에서는 유용할 수 있습니다.

# Stream endpoint that generates html output
@app.route("/stream")
def stream():
    @stream_with_context
    def generate():
        yield render_template_string('<link rel=stylesheet href="{{ url_for("static", filename="stream.css") }}">')
        for i in range(500):
            yield render_template_string("<p>{{ i }}: {{ s }}</p>\n", i=i, s=math.sqrt(i))
            sleep(1)

    return app.response_class(generate())

<!-- Using an iframe for displaying streamed HTML -->
<p>This is all the output:</p>
<iframe src="{{ url_for("stream") }}"></iframe>

결론

JavaScript를 사용하든 iframe을 사용하든 Flask는 실시간 통합을 허용합니다. 템플릿 웹 페이지로 데이터 스트리밍. 이러한 기술을 사용하면 끊임없이 변화하는 데이터를 동적으로 표시하여 더욱 매력적인 실시간 사용자 경험을 제공할 수 있습니다.

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