Bagaimana untuk Mengemas kini Senarai Komen dalam Templat Jinja2 Menggunakan WebSockets dengan FastAPI?

Bagaimana untuk Mendapatkan Senarai Item yang Dikemas Kini dalam Templat Jinja2 Menggunakan FastAPI?

Masalah:

Pertimbangkan senario di mana anda sedang membina sistem ulasan pada blog. Anda memberikan ulasan sedia ada menggunakan templat Jinja2. Apabila ulasan baharu disiarkan melalui laluan FastAPI, anda perlu mengemas kini senarai ulasan yang dipaparkan dalam templat.

Penyelesaian:

Walaupun Jinja2 tidak sesuai untuk mengendalikan kemas kini masa nyata, penyelesaian boleh didapati menggunakan WebSockets. Ini memerlukan pengubahsuaian kedua-dua bahagian belakang FastAPI dan templat Jinja2:

FastAPI Backend (app.py):

• Buat kelas ConnectionManager untuk mengurus sambungan WebSocket.
• Tentukan kaedah send_personal_message untuk menghantar mesej kepada pelanggan tertentu.
• Tentukan kaedah penyiaran untuk menghantar mesej kepada semua pelanggan yang disambungkan.
• Kemas kini laluan / untuk mengendalikan sambungan dan hantar senarai ulasan ke templat .
• Buat titik akhir WebSocket (/ws) untuk mengendalikan sambungan WebSocket masuk dan menyiarkan ulasan baharu.

Templat Jinja2 (index.html):

• Tambah
  elemen untuk memaparkan ulasan.
  • Buat fungsi JavaScript addComment untuk menghantar ulasan baharu melalui WebSocket.
  • Dalam pengendali acara onmessage untuk WebSocket, buat elemen HTML untuk memaparkan ulasan baharu dan tambahkannya kepada
    elemen.

    Contoh Kod:

    <code class="html"><!-- app.py -->
    @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>

    Salin selepas log masuk

    <code class="html"><!-- index.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)
        };
        function addComment(event) {
            var author = document.getElementById("author")
            var content = document.getElementById("content")
            ws.send(JSON.stringify({
                "author": author.value,
                "content": content.value
            }))
            author.value = ''
            content.value = ''
            event.preventDefault()
        }
    </script></code>

    Salin selepas log masuk

    Dengan menggunakan WebSockets, anda boleh mewujudkan sambungan masa nyata antara bahagian belakang FastAPI dan Templat Jinja2, membenarkan senarai ulasan yang dikemas kini dipaparkan dalam UI.

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