Bagaimana untuk Mengekalkan Senarai Komen Masa Nyata dalam Templat Jinja2 Menggunakan FastAPI WebSockets?

Mengemas kini Senarai Item dalam Templat Jinja2 Menggunakan FastAPI WebSockets

Dalam sistem ulasan, mengekalkan senarai komen terkini adalah penting untuk menyampaikan pengalaman pengguna yang lancar. Apabila ulasan baharu ditambahkan, ia harus ditunjukkan dalam templat tanpa perlu memuat semula manual.

Dalam Jinja2, pengemaskinian senarai ulasan biasanya dicapai melalui panggilan API. Walau bagaimanapun, pendekatan ini boleh memperkenalkan kependaman dan menjejaskan tindak balas antara muka pengguna. Penyelesaian yang lebih cekap melibatkan memanfaatkan teknologi komunikasi masa nyata seperti WebSockets.

Melaksanakan WebSockets dalam FastAPI dan Jinja2

WebSockets, subset Protokol WebSocket, menyediakan dua -cara saluran komunikasi antara klien (pelayar) dan pelayan (belakang). Ini membolehkan kami menyiarkan kemas kini masa nyata kepada pelanggan, termasuk ulasan yang baru ditambah.

Untuk melaksanakan WebSockets dalam senario ini, kami akan menggunakan FastAPI dan kefungsian WebSocket terbina dalamnya. Coretan kod di bawah menunjukkan cara membuat titik akhir WebSocket:

<code class="python">from fastapi import FastAPI, WebSocket, WebSocketDisconnect

app = FastAPI()

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    # WebSocket handling
    ...</code>

Dalam fungsi titik_akhir websocket, kami mewujudkan sambungan WebSocket dengan pelanggan dan mengendalikan data masuk. Apabila ulasan baharu diterima, kami akan menyiarkannya kepada semua pelanggan yang disambungkan menggunakan kaedah broadcast().

Mengemas kini Templat Jinja2

Untuk mengemas kini templat Jinja2 dengan ulasan baharu, kami menggunakan pendengar acara onmessage dalam JavaScript bahagian hadapan. Apabila mesej ulasan baharu diterima, kami mencipta <li> elemen secara dinamik dan isikannya dengan pengarang dan kandungan ulasan. Elemen itu kemudiannya dilampirkan pada <ul id='komen'> dalam templat.

Berikut ialah contoh cara mengemas kini templat dalam Jinja2:

<code class="html">&lt;script&gt;
    // ...WebSocket initialization

    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)
    };
&lt;/script&gt;</code>

Dengan melaksanakan WebSockets dengan FastAPI dan Jinja2, kami mencapai sistem ulasan yang responsif dan masa nyata di mana komen yang baru ditambah ditunjukkan serta-merta dalam templat tanpa memerlukan muat semula manual atau panggilan API.

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