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