Bagaimanakah saya boleh mengemas kini templat HTML secara dinamik dengan data masa nyata yang distrim daripada paparan Flask?

Strim Data ke dalam Templat HTML Dikemas Kini Secara Dinamik

Masalah:

Menjana dan menstrim data dalam masa nyata daripada Paparan kelalang, kami mahu memaparkannya secara dinamik dalam HTML berformat templat.

Jawapan:

Penstriman data dalam respons Flask adalah mungkin, walau bagaimanapun, anda tidak boleh mengemas kini kandungan sebelah pelanggan secara langsung. Untuk mencapai yang diingini, gunakan JavaScript dan kaedah berikut:

Menggunakan XMLHttpRequest:

1. Lakukan permintaan XMLHttpRequest untuk mengambil data yang distrim dari titik akhir.
2. Laksanakan tinjauan pendapat mekanisme (cth., setInterval) untuk menyemak yang baharu data.
3. Apabila data baharu diterima, huraikan dan paparkannya dalam HTML (cth., menggunakan manipulasi DOM).
4. Kendalikan data secara berterusan sehingga strim tamat (atau paparkan mesej penyiapan).

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

Menggunakan an

1. Memberikan halaman HTML awal dengan
2. Hantar HTML penstriman (termasuk CSS dan kandungan) dalam penghias stream_with_context Flask.
3. Gunakan render_template_string atau fail templat yang berasingan untuk menjana serpihan HTML di dalam strim.

# Server-side Flask code
@app.route("/stream")
def stream():
    @stream_with_context
    def generate():
        yield render_template_string('<link rel="stylesheet" href="%7B%7B%20url_for(" static filename="stream.css">')

        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())

<!-- Client-side HTML -->
<iframe src="%7B%7B%20url_for(" stream></iframe>

Nota:

• XMLHttpRequest menawarkan kawalan yang lebih halus tetapi memerlukan logik pihak klien yang lebih kompleks.
• iframe lebih mudah untuk dilaksanakan, tetapi mempunyai had seperti pengasingan sumber dan berpotensi mengganggu penggayaan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengemas kini templat HTML secara dinamik dengan data masa nyata yang distrim daripada paparan Flask?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!