Aktualisieren der Elementliste in der Jinja2-Vorlage mithilfe von FastAPI-WebSockets

In einem Kommentarsystem ist die Pflege einer aktuellen Liste von Kommentaren von entscheidender Bedeutung für die Bereitstellung eines nahtlosen Benutzererlebnisses. Wenn ein neuer Kommentar hinzugefügt wird, sollte dieser in der Vorlage angezeigt werden, ohne dass ein manuelles Neuladen erforderlich ist.

In Jinja2 erfolgt die Aktualisierung der Kommentarliste normalerweise über API-Aufrufe. Allerdings kann dieser Ansatz zu Latenz führen und die Reaktionsfähigkeit der Benutzeroberfläche beeinträchtigen. Eine effizientere Lösung besteht in der Nutzung von Echtzeit-Kommunikationstechnologien wie WebSockets.

Implementieren von WebSockets in FastAPI und Jinja2

WebSockets, eine Teilmenge des WebSocket-Protokolls, bieten zwei -Wege-Kommunikationskanal zwischen einem Client (Browser) und einem Server (Backend). Dadurch können wir Aktualisierungen in Echtzeit an Kunden senden, einschließlich neu hinzugefügter Kommentare.

Um WebSockets in diesem Szenario zu implementieren, verwenden wir FastAPI und seine integrierte WebSocket-Funktionalität. Der folgende Codeausschnitt zeigt, wie ein WebSocket-Endpunkt erstellt wird:

from fastapi import FastAPI, WebSocket, WebSocketDisconnect

app = FastAPI()

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

Innerhalb der websocket_endpoint-Funktion stellen wir eine WebSocket-Verbindung mit dem Client her und verarbeiten eingehende Daten. Wenn ein neuer Kommentar eingeht, senden wir ihn mit der Methode „broadcast()“ an alle verbundenen Clients.

Aktualisieren der Jinja2-Vorlage

Um die Jinja2-Vorlage zu aktualisieren Mit dem neuen Kommentar verwenden wir den Onmessage-Ereignis-Listener im Front-End-JavaScript. Wenn eine neue Kommentarnachricht empfangen wird, erstellen wir dynamisch ein neues