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

DDD
Lepaskan: 2024-10-21 06:16:02
asal
493 orang telah melayarinya

How to Maintain Real-Time Comment List in Jinja2 Template Using 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>
Salin selepas log masuk

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

  • elemen secara dinamik dan isikannya dengan pengarang dan kandungan ulasan. Elemen itu kemudiannya dilampirkan pada
      dalam templat.

      Berikut ialah contoh cara mengemas kini templat dalam Jinja2:

      <code class="html"><script>
          // ...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)
          };
      </script></code>
      Salin selepas log masuk

      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!

  • sumber:php
    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
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!