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!