Bagaimana untuk Memaparkan Data Masa Nyata yang Distrim daripada Pandangan Kelalang?

Memaparkan Data Distrim daripada Pandangan Kelalang dalam Masa Nyata

Pengenalan

Apabila bekerja dengan data masa nyata, ia selalunya wajar untuk memaparkan data apabila ia tersedia. Dengan Flask, ini boleh mencabar kerana templat dipaparkan sekali sahaja di bahagian pelayan. Artikel ini meneroka cara untuk mengatasi had ini, membenarkan paparan dinamik data yang distrim dalam halaman templat yang lebih besar.

Menggunakan JavaScript dan XMLHttpRequest

Pendekatan yang paling serba boleh melibatkan menggunakan JavaScript dan XMLHttpRequest untuk mengambil data secara berkala daripada titik akhir yang distrim. Data yang diterima kemudiannya boleh ditambah secara dinamik pada halaman. Ini memberikan kawalan sepenuhnya ke atas output dan pembentangannya.

# 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>

Menggunakan Iframe** Pendekatan

Sebagai alternatif, iframe boleh memaparkan output HTML yang distrim. Walaupun pada mulanya lebih mudah untuk dilaksanakan, ia memperkenalkan kelemahan seperti peningkatan penggunaan sumber dan pilihan penggayaan terhad. Namun begitu, ia boleh berguna untuk senario tertentu.

# 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>

Kesimpulan

Sama ada menggunakan JavaScript atau iframe, Flask membenarkan penyepaduan masa nyata penstriman data ke dalam halaman web templat. Teknik ini membolehkan paparan dinamik data yang sentiasa berubah, memberikan pengalaman pengguna yang lebih menarik dan masa nyata.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Data Masa Nyata yang Distrim daripada Pandangan Kelalang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!