Comment implémenter des mises à jour de commentaires en temps réel dans les modèles Jinja2 à l'aide de WebSockets et FastAPI ?

Obtention d'une liste mise à jour des éléments dans le modèle Jinja2 à l'aide de FastAPI

Dans ce didacticiel, nous montrons comment implémenter une application de chat en temps réel à l'aide de FastAPI et Jinja2 pour les mises à jour dynamiques des listes de commentaires. L'application exploite WebSockets pour établir un canal de communication bidirectionnel entre le serveur et plusieurs clients.

Problème :

Imaginez créer un système de commentaires de blog dans lequel les nouveaux commentaires doivent être dynamiquement ajouté au frontend sans nécessiter une actualisation de la page. Les modèles Jinja2 sont utilisés pour afficher les commentaires existants sur la page, mais un mécanisme est nécessaire pour récupérer et afficher les commentaires nouvellement ajoutés en temps réel.

Solution :

Pour Pour atteindre cette fonctionnalité, nous introduisons WebSockets, une technologie qui permet une communication bidirectionnelle en temps réel sur une seule connexion TCP. En implémentant WebSockets avec FastAPI et Jinja2, nous pouvons établir une connexion persistante entre le serveur et le client, permettant au serveur de diffuser de nouveaux commentaires à tous les clients connectés en temps réel.

Implémentation de WebSockets :

Pour configurer WebSockets dans FastAPI, nous créons un point de terminaison WebSocket qui gère les connexions entrantes et établit une connexion dédiée pour chaque client. Le code suivant montre notre point de terminaison WebSocket :

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

Dans ce code :

• manager est une instance de ConnectionManager, qui gère la liste des connexions actives et gère la diffusion des messages.
• Lorsqu'un client se connecte au point de terminaison /ws, la méthode connect est appelée, ajoutant le client à la liste des connexions actives.
• La boucle while gère les messages entrants du client. Lorsqu'un nouveau message est reçu, un nouveau commentaire est créé et ajouté à la liste des commentaires. La liste mise à jour est ensuite diffusée à tous les clients connectés à l'aide de la méthode de diffusion.
• Si un client ferme la connexion ou qu'une exception se produit, la méthode de déconnexion est appelée, supprimant le client de la liste des connexions actives.

Mise à jour du modèle Jinja2 :

Pour afficher les commentaires mis à jour dans le modèle Jinja2, nous utilisons JavaScript et WebSockets pour écouter les messages entrants du serveur et ajouter dynamiquement nouveaux commentaires sur la page. Dans notre modèle index.html, nous incluons le code JavaScript suivant :

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

Ce code JavaScript :

• Établit une connexion WebSocket au serveur à l'aide de l'URL WebSocket fournie.
• Définit un écouteur d'événements qui écoute les messages entrants du serveur.
• Lorsqu'un message est reçu, il analyse les données JSON du message et crée un nouvel élément de commentaire HTML avec l'auteur et le contenu reçus.
• Enfin, le nouvel élément de commentaire est ajouté au conteneur de commentaires dans le HTML, mettant à jour dynamiquement la page avec le nouveau commentaire.

Conclusion

En intégrant WebSockets avec FastAPI et Jinja2, nous avons implémenté un système de commentaires dynamique qui permet des mises à jour en temps réel. Cette technique peut être appliquée à divers scénarios dans lesquels vous devez envoyer et recevoir des messages ou des données entre des clients et un serveur en temps réel, offrant ainsi une expérience utilisateur hautement interactive et réactive.

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!