Comment mettre à jour la liste des commentaires dans les modèles Jinja2 à l'aide de WebSockets avec FastAPI ?

Comment obtenir la liste mise à jour des éléments dans le modèle Jinja2 à l'aide de FastAPI ?

Problème :

Envisagez un scénario dans lequel vous construisez un système de commentaires sur un blog. Vous restituez les commentaires existants à l'aide des modèles Jinja2. Lorsqu'un nouveau commentaire est publié via une route FastAPI, vous devez mettre à jour la liste des commentaires affichés dans le modèle.

Solution :

Bien que Jinja2 ne soit pas idéal pour gérant les mises à jour en temps réel, une solution peut être trouvée en utilisant WebSockets. Cela nécessite de modifier à la fois le backend FastAPI et le modèle Jinja2 :

FastAPI Backend (app.py) :

• Créez une classe ConnectionManager pour gérer les connexions WebSocket.
• Définissez une méthode send_personal_message pour envoyer des messages à des clients spécifiques.
• Définissez une méthode de diffusion pour envoyer des messages à tous les clients connectés.
• Mettez à jour la route / pour gérer les connexions et transmettez la liste des commentaires au modèle. .
• Créez un point de terminaison WebSocket (/ws) pour gérer les connexions WebSocket entrantes et diffuser de nouveaux commentaires.

Modèle Jinja2 (index.html) :

• Ajouter un
  élément pour afficher les commentaires.
  • Créez une fonction JavaScript addComment pour envoyer de nouveaux commentaires via WebSocket.
  • Dans le gestionnaire d'événements onmessage pour WebSocket, créez des éléments HTML pour afficher le nouveau commentaire et ajoutez-le au
    élément.

    Exemple de code :

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

    En utilisant WebSockets, vous pouvez établir une connexion en temps réel entre le backend FastAPI et le Modèle Jinja2, permettant d'afficher la liste mise à jour des commentaires dans l'interface utilisateur.

    Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!