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
Lepaskan: 2024-12-26 12:55:14
asal
1037 orang telah melayarinya

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')
Salin selepas log masuk

HTML (sebelah pelanggan):

<p>This is the latest output: <span>
Salin selepas log masuk

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>
Salin selepas log masuk

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))
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan