Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Memaparkan Data Masa Nyata yang Distrim daripada Pandangan Kelalang?

Bagaimanakah Saya Boleh Memaparkan Data Masa Nyata yang Distrim daripada Pandangan Kelalang?

Patricia Arquette
Patricia Arquetteasal
2024-12-09 09:43:07564semak imbas

How Can I Display Real-Time Data Streamed from a Flask View?

Memaparkan Data yang Distrim daripada Paparan Kelalang dalam Masa Nyata

Dalam Kelalang, penstriman data daripada paparan adalah mudah. Walau bagaimanapun, adalah tidak mungkin untuk mengemas kini templat HTML secara dinamik dengan strim ini.

JavaScript dan XMLHttpRequest

Satu penyelesaian ialah menggunakan JavaScript dan XMLHttpRequest. Kami boleh:

  1. Gunakan XMLHttpRequest untuk mewujudkan sambungan dengan titik akhir menstrim data.
  2. Baca dari strim secara berkala sehingga selesai.
  3. Kemas kini HTML terus dengan yang diterima data.

Contoh:

# App
app = flask.Flask(__name__)

# Streaming view
@app.route('/')
def index():
    def generate():
        # Simulate data generation
        for i in range(500):
            yield str(i) + '<br/>\n'
    return flask.Response(generate(), mimetype='text/html')

# Run the app
app.run(debug=True)
<!-- Template -->
<p>Latest output: <span>

Menggunakan Iframe

Pendekatan lain melibatkan penggunaan iframe untuk memaparkan output HTML penstriman. Walaupun ini membolehkan fleksibiliti penggayaan dan kelebihan lain, ia juga memperkenalkan kelemahan:

  • Penggunaan sumber yang lebih tinggi
  • Dokumen berasingan, lebih sukar untuk disepadukan dengan lancar
  • Potensi isu skrol dengan panjang output

Contoh:

index.html (Templat Utama)

<p>All output:</p>
<iframe src=&quot;{{ url_for('stream') }}&quot;></iframe>

Penstriman Lihat

@app.route('/stream')
def stream():
    @stream_with_context
    def generate():
        yield '<link rel=stylesheet href=&quot;{{ url_for('static', filename='stream.css') }}&quot;>'
        for i in range(500):
            yield '<p>{{ i }}: {{ s }}</p>\n'.format(i=i, s=math.sqrt(i))
            sleep(1)

strim.css (Lembaran Gaya Pilihan)

body {
  font-family: sans-serif;
}
p {
  margin-bottom: 10px;
}

Dengan menggunakan sama ada JavaScript/XMLHttpRequest atau kaedah iframe, anda boleh memaparkan data yang distrim dengan berkesan daripada paparan Flask anda dan mengekalkan kemas kini dalam masa nyata.

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn