Wie aktualisiere ich die Kommentarliste in Jinja2-Vorlagen mithilfe von WebSockets mit FastAPI?

Wie erhalte ich die aktualisierte Liste der Elemente in der Jinja2-Vorlage mithilfe von FastAPI?

Problem:

Stellen Sie sich ein Szenario vor, in dem Sie bauen ein Kommentarsystem für einen Blog auf. Sie rendern vorhandene Kommentare mithilfe von Jinja2-Vorlagen. Wenn ein neuer Kommentar über eine FastAPI-Route gepostet wird, müssen Sie die Liste der in der Vorlage angezeigten Kommentare aktualisieren.

Lösung:

Jinja2 ist zwar nicht ideal für Bei der Handhabung von Echtzeit-Updates kann eine Lösung mithilfe von WebSockets gefunden werden. Dazu müssen sowohl das FastAPI-Backend als auch die Jinja2-Vorlage geändert werden:

FastAPI-Backend (app.py):

• Erstellen Sie eine ConnectionManager-Klasse, um WebSocket-Verbindungen zu verwalten.
• Definieren Sie eine send_personal_message-Methode, um Nachrichten an bestimmte Clients zu senden.
• Definieren Sie eine Broadcast-Methode, um Nachrichten an alle verbundenen Clients zu senden.
• Aktualisieren Sie die /-Route, um Verbindungen zu verarbeiten, und übergeben Sie die Kommentarliste an die Vorlage .
• Erstellen Sie einen WebSocket-Endpunkt (/ws), um eingehende WebSocket-Verbindungen zu verarbeiten und neue Kommentare zu senden.

Jinja2-Vorlage (index.html):

• Fügen Sie ein
  Element zum Anzeigen der Kommentare.
• Erstellen Sie eine JavaScript-Funktion addComment, um neue Kommentare über WebSocket zu senden.
• Erstellen Sie im onmessage-Ereignishandler für den WebSocket HTML-Elemente, um den neuen Kommentar anzuzeigen und anzuhängen zum
  Element.

Beispielcode:

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

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

Durch die Verwendung von WebSockets können Sie eine Echtzeitverbindung zwischen dem FastAPI-Backend und dem herstellen Jinja2-Vorlage, die die Anzeige der aktualisierten Kommentarliste in der Benutzeroberfläche ermöglicht.

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich die Kommentarliste in Jinja2-Vorlagen mithilfe von WebSockets mit FastAPI?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!