Wie implementiert man Echtzeit-Kommentaraktualisierungen in Jinja2-Vorlagen mithilfe von WebSockets und FastAPI?

Aktualisierte Liste der Elemente in der Jinja2-Vorlage mit FastAPI abrufen

In diesem Tutorial zeigen wir, wie Sie eine Echtzeit-Chat-Anwendung mit implementieren FastAPI und Jinja2 für dynamische Aktualisierungen von Kommentarlisten. Die Anwendung nutzt WebSockets, um einen bidirektionalen Kommunikationskanal zwischen dem Server und mehreren Clients einzurichten.

Problem:

Stellen Sie sich den Aufbau eines Blog-Kommentarsystems vor, bei dem neue Kommentare dynamisch sein müssen dem Frontend hinzugefügt werden, ohne dass eine Seitenaktualisierung erforderlich ist. Jinja2-Vorlagen werden zum Rendern vorhandener Kommentare auf der Seite verwendet, es ist jedoch ein Mechanismus erforderlich, um neu hinzugefügte Kommentare in Echtzeit abzurufen und anzuzeigen.

Lösung:

An Um diese Funktionalität zu erreichen, führen wir WebSockets ein, eine Technologie, die eine bidirektionale Kommunikation in Echtzeit über eine einzige TCP-Verbindung ermöglicht. Durch die Implementierung von WebSockets mit FastAPI und Jinja2 können wir eine dauerhafte Verbindung zwischen dem Server und dem Client herstellen, sodass der Server neue Kommentare in Echtzeit an alle verbundenen Clients senden kann.

Implementierung von WebSockets:

Um WebSockets in FastAPI einzurichten, erstellen wir einen WebSocket-Endpunkt, der eingehende Verbindungen verarbeitet und für jeden Client eine dedizierte Verbindung herstellt. Der folgende Code zeigt unseren WebSocket-Endpunkt:

<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>

In diesem Code:

• Manager ist eine Instanz von ConnectionManager, die die Liste der aktiven Verbindungen verwaltet und die Nachrichtenübermittlung verwaltet.
• Wenn ein Client eine Verbindung zum /ws-Endpunkt herstellt, wird die Verbindungsmethode aufgerufen und der Client zur Liste der aktiven Verbindungen hinzugefügt.
• Die while-Schleife verarbeitet eingehende Nachrichten vom Client. Beim Empfang einer neuen Nachricht wird ein neuer Kommentar erstellt und zur Kommentarliste hinzugefügt. Die aktualisierte Liste wird dann mithilfe der Broadcast-Methode an alle verbundenen Clients gesendet.
• Wenn ein Client die Verbindung schließt oder eine Ausnahme auftritt, wird die Trennmethode aufgerufen und der Client aus der Liste der aktiven Verbindungen entfernt.

Aktualisierung der Jinja2-Vorlage:

Um die aktualisierten Kommentare in der Jinja2-Vorlage anzuzeigen, verwenden wir JavaScript und WebSockets, um auf eingehende Nachrichten vom Server zu warten und diese dynamisch hinzuzufügen neue Kommentare zur Seite. In unsere index.html-Vorlage fügen wir den folgenden JavaScript-Code ein:

<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>

Dieser JavaScript-Code:

• Stellt mithilfe der bereitgestellten WebSocket-URL eine WebSocket-Verbindung zum Server her.
• Definiert einen Ereignis-Listener, der auf eingehende Nachrichten vom Server lauscht.
• Wenn eine Nachricht empfangen wird, Es analysiert die JSON-Daten aus der Nachricht und erstellt ein neues HTML-Kommentarelement mit dem empfangenen Autor und Inhalt.
• Schließlich wird das neue Kommentarelement an den Kommentarcontainer im HTML angehängt, wodurch die Seite dynamisch mit dem aktualisiert wird neuer Kommentar.

Fazit

Durch die Integration von WebSockets mit FastAPI und Jinja2 haben wir ein dynamisches Kommentarsystem implementiert, das Aktualisierungen in Echtzeit ermöglicht. Diese Technik kann auf verschiedene Szenarien angewendet werden, in denen Sie Nachrichten oder Daten zwischen Clients und einem Server in Echtzeit senden und empfangen müssen, um ein hochgradig interaktives und reaktionsschnelles Benutzererlebnis zu bieten.

Das obige ist der detaillierte Inhalt vonWie implementiert man Echtzeit-Kommentaraktualisierungen in Jinja2-Vorlagen mithilfe von WebSockets und FastAPI?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!