Bagaimana untuk Mengemas kini Secara Dinamik dan Memaparkan Data Distrim daripada Paparan Kelalang?

Memaparkan Data yang Distrim daripada Flask View semasa Ia Kemas Kini

Pengenalan

Dalam aplikasi Flask, ia selalunya wajar untuk dipaparkan data yang dijana atau dikemas kini dalam masa nyata. Walaupun Flask mempunyai sokongan terbina dalam untuk respons penstriman, memasukkan data ini ke dalam templat HTML boleh menjadi mencabar. Artikel ini meneroka cara mengemas kini, memformat dan memaparkan data secara dinamik semasa ia distrim ke halaman.

Menstrim data dalam Flask

Untuk menstrim data dalam Flask, anda boleh menggunakan penjana sebagai tindak balas kepada laluan. Setiap kali tindak balas diulang, penjana menghasilkan sebahagian daripada data kepada pelanggan. Contohnya:

@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')

Kod ini mensimulasikan proses yang berjalan lama yang menjana nilai setiap saat. Nilai ini kemudiannya distrim ke respons sebagai serpihan HTML.

Mengendalikan data yang distrim dalam JavaScript

Sementara Flask menyokong respons penstriman, templat HTML dipaparkan sekali pada bahagian pelayan dan tidak boleh dikemas kini secara dinamik. Untuk mengendalikan data yang distrim dalam penyemak imbas, anda boleh menggunakan JavaScript untuk membuat permintaan ke titik akhir dan memproses data yang distrim apabila ia tiba.

Satu pendekatan ialah menggunakan objek XMLHttpRequest (XHR) untuk membuat permintaan untuk titik akhir penstriman. Anda kemudian boleh периодически membaca data daripada respons sehingga ia selesai. Berikut ialah contoh:

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

Kod JavaScript ini menggunakan objek XMLHttpRequest untuk membuat permintaan ke titik akhir penstriman. Ia kemudian menyediakan pemasa untuk menyemak data baharu secara berkala dan mengemas kini halaman dengan sewajarnya.

Menggunakan iframe untuk output HTML yang distrim

Satu lagi pendekatan untuk memaparkan data yang distrim daripada paparan Flask adalah menggunakan iframe. Iframe ialah dokumen berasingan yang boleh digunakan untuk memaparkan output HTML yang distrim. Berikut ialah contoh:

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

Kod ini menggunakan penghias stream_with_context untuk meningkatkan penjana bagi menyokong fungsi tambahan. Ia menyediakan CSS awal untuk menggayakan iframe dan terus menstrim kandungan HTML dalam iframe. Templat HTML dalam iframe boleh menjadi lebih kompleks dan boleh memasukkan pemformatan berbeza mengikut keperluan.

Atas ialah kandungan terperinci Bagaimana untuk Mengemas kini Secara Dinamik dan Memaparkan Data Distrim daripada Paparan Kelalang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!