Rumah >hujung hadapan web >tutorial js >Bagaimana Menstrim Data Masa Nyata dengan Cekap daripada Pandangan Kelalang ke dalam Templat HTML?

Bagaimana Menstrim Data Masa Nyata dengan Cekap daripada Pandangan Kelalang ke dalam Templat HTML?

Susan Sarandon
Susan Sarandonasal
2024-12-26 12:55:141041semak imbas

How to Efficiently Stream Real-time Data from a Flask View into an HTML Template?

Menstrim Data ke dalam Templat HTML

Apabila bekerja dengan data masa nyata yang distrim daripada paparan Flask, adalah wajar jika anda mahu memaparkannya dalam templat HTML dinamik. Walau bagaimanapun, teknik pemaparan templat tradisional gagal kerana templat dipaparkan sekali pada bahagian pelayan dan dihantar sepenuhnya kepada pelanggan.

Menggunakan JavaScript untuk Paparan Dinamik

Satu penyelesaian untuk isu ini adalah untuk menggunakan JavaScript untuk kemas kini pihak pelanggan. Dengan membuat permintaan XMLHttpRequest ke titik akhir penstriman, anda boleh membaca data secara berperingkat dan mengeluarkannya terus ke halaman. Pendekatan ini membolehkan kemas kini masa nyata dan kawalan sepenuhnya ke atas format paparan.

Berikut ialah contoh menggunakan JavaScript:

Python (sebelah pelayan):

from flask import Flask, Response

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/stream')
def stream():
    def generate():
        for i in range(10):
            yield str(i) + '\n'
    return Response(generate(), mimetype='text/plain')

HTML (sebelah pelanggan):

<p>This is the latest output: <span>

Menggunakan Iframe untuk HTML Penstriman

Pendekatan alternatif melibatkan penggunaan iframe untuk memaparkan output HTML yang distrim. Walaupun teknik ini membenarkan pemaparan dinamik, ia datang dengan kelemahan:

  • Menambahkan kerumitan disebabkan oleh konteks dokumen yang berasingan
  • Pilihan penggayaan terhad
  • Isu pemaparan yang berpotensi dengan output yang panjang

Dalam kaedah ini, fail index.html akan mengandungi:

<p>This is all the output:</p>
<iframe src="{{ url_for('stream') }}"></iframe>

Dan paparan strim dalam Python ialah:

from flask import stream_with_context

@app.route('/stream')
def stream():
    @stream_with_context
    def generate():
        yield '<link rel=stylesheet href="{{ url_for('static', filename='stream.css') }}">'
        for i in range(10):
            yield render_template_string('<p>{{ i }}: {{ s }}</p>\n', i=i, s=sqrt(i))

Dalam contoh ini, CSS dimuatkan dahulu dalam iframe menggunakan render_template_string dan kandungan HTML distrim secara berperingkat .

Atas ialah kandungan terperinci Bagaimana Menstrim Data Masa Nyata dengan Cekap daripada Pandangan Kelalang ke dalam Templat HTML?. 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