Bagaimana untuk Melaksanakan Kemas Kini Komen Masa Nyata dalam Templat Jinja2 Menggunakan WebSockets dan FastAPI?

Mendapatkan Senarai Item Kemas Kini dalam Templat Jinja2 Menggunakan FastAPI

Dalam tutorial ini, kami menunjukkan cara melaksanakan aplikasi sembang masa nyata menggunakan FastAPI dan Jinja2 untuk kemas kini dinamik senarai komen. Aplikasi ini memanfaatkan WebSockets untuk mewujudkan saluran komunikasi dua hala antara pelayan dan berbilang pelanggan.

Masalah:

Bayangkan membina sistem ulasan blog di mana ulasan baharu perlu dibuat secara dinamik ditambahkan pada bahagian hadapan tanpa memerlukan penyegaran halaman. Templat Jinja2 digunakan untuk memberikan ulasan sedia ada pada halaman, tetapi mekanisme diperlukan untuk mendapatkan dan memaparkan ulasan yang baru ditambah dalam masa nyata.

Penyelesaian:

Kepada mencapai fungsi ini, kami memperkenalkan WebSockets, teknologi yang membolehkan komunikasi dua hala masa nyata melalui sambungan TCP tunggal. Dengan melaksanakan WebSockets dengan FastAPI dan Jinja2, kami boleh mewujudkan sambungan berterusan antara pelayan dan klien, membolehkan pelayan menyiarkan ulasan baharu kepada semua pelanggan yang disambungkan dalam masa nyata.

Melaksanakan WebSockets:

Untuk menyediakan WebSockets dalam FastAPI, kami mencipta titik akhir WebSocket yang mengendalikan sambungan masuk dan mewujudkan sambungan khusus untuk setiap pelanggan. Kod berikut menunjukkan titik akhir WebSocket kami:

<code class="python">@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await manager.connect(websocket)
    try:
        while True:
            data = await websocket.receive_json()
            comments.append(Comment(data['author'], data['content']))
            await manager.broadcast(data)
    except (WebSocketDisconnect, ConnectionClosed):
        manager.disconnect(websocket)</code>

Dalam kod ini:

• pengurus ialah contoh ConnectionManager, yang mengendalikan senarai sambungan aktif dan mengurus penyiaran mesej.
• Apabila pelanggan menyambung ke titik akhir /ws, kaedah sambung dipanggil, menambah klien pada senarai sambungan aktif.
• Gelung sementara mengendalikan mesej masuk daripada klien. Apabila mesej baharu diterima, ulasan baharu dibuat dan ditambahkan pada senarai ulasan. Senarai yang dikemas kini kemudiannya disiarkan kepada semua pelanggan yang disambungkan menggunakan kaedah siaran.
• Jika pelanggan menutup sambungan atau pengecualian berlaku, kaedah putus sambungan dipanggil, mengalih keluar klien daripada senarai sambungan aktif.

Mengemas kini Templat Jinja2:

Untuk memaparkan ulasan yang dikemas kini dalam templat Jinja2, kami menggunakan JavaScript dan WebSockets untuk mendengar mesej masuk daripada pelayan dan menambah secara dinamik ulasan baharu pada halaman tersebut. Dalam templat index.html kami, kami memasukkan kod JavaScript berikut:

<code class="html"><script>
  var ws = new WebSocket("ws://localhost:8000/ws");
  ws.onmessage = function(event) {
    var comments = document.getElementById('comments');
    var comment = document.createElement('li');
    var jsonObj = JSON.parse(event.data);
    var authorNode = document.createElement('h3');
    authorNode.innerHTML = jsonObj.author;
    var contentNode = document.createElement('p');
    contentNode.innerHTML = jsonObj.content;
    comment.appendChild(authorNode);
    comment.appendChild(contentNode);
    comments.appendChild(comment);
  };
</script></code>

Kod JavaScript ini:

• Mewujudkan sambungan WebSocket ke pelayan menggunakan URL WebSocket yang disediakan.
• Mentakrifkan pendengar acara yang mendengar mesej masuk daripada pelayan.
• Apabila mesej diterima, ia menghuraikan data JSON daripada mesej dan mencipta elemen ulasan HTML baharu dengan pengarang dan kandungan yang diterima.
• Akhir sekali, elemen ulasan baharu dilampirkan pada bekas ulasan dalam HTML, mengemas kini halaman secara dinamik dengan ulasan baharu.

Kesimpulan

Dengan menyepadukan WebSockets dengan FastAPI dan Jinja2, kami telah melaksanakan sistem ulasan dinamik yang membenarkan kemas kini masa nyata. Teknik ini boleh digunakan pada pelbagai senario di mana anda perlu menghantar dan menerima mesej atau data antara pelanggan dan pelayan dalam masa nyata, memberikan pengalaman pengguna yang sangat interaktif dan responsif.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Kemas Kini Komen Masa Nyata dalam Templat Jinja2 Menggunakan WebSockets dan FastAPI?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!