Comment gérer la liste de commentaires en temps réel dans le modèle Jinja2 à l'aide des WebSockets FastAPI ?

Mise à jour de la liste d'éléments dans le modèle Jinja2 à l'aide des WebSockets FastAPI

Dans un système de commentaires, il est crucial de maintenir une liste de commentaires à jour pour offrir une expérience utilisateur transparente. Lorsqu'un nouveau commentaire est ajouté, il doit être reflété dans le modèle sans qu'il soit nécessaire de recharger manuellement.

Dans Jinja2, la mise à jour de la liste des commentaires est généralement réalisée via des appels API. Cependant, cette approche peut introduire de la latence et compromettre la réactivité de l'interface utilisateur. Une solution plus efficace consiste à tirer parti des technologies de communication en temps réel telles que WebSockets.

La mise en œuvre de WebSockets dans FastAPI et Jinja2

WebSockets, un sous-ensemble du protocole WebSocket, fournit deux canal de communication à sens unique entre un client (navigateur) et un serveur (backend). Cela nous permet de diffuser des mises à jour en temps réel aux clients, y compris les commentaires nouvellement ajoutés.

Pour implémenter WebSockets dans ce scénario, nous utiliserons FastAPI et sa fonctionnalité WebSocket intégrée. L'extrait de code ci-dessous montre comment créer un point de terminaison WebSocket :

<code class="python">from fastapi import FastAPI, WebSocket, WebSocketDisconnect

app = FastAPI()

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    # WebSocket handling
    ...</code>

Dans la fonction websocket_endpoint, nous établissons une connexion WebSocket avec le client et traitons les données entrantes. Lorsqu'un nouveau commentaire est reçu, nous le diffuserons à tous les clients connectés à l'aide de la méthode Broadcast().

Mise à jour du modèle Jinja2

Pour mettre à jour le modèle Jinja2 avec le nouveau commentaire, nous utilisons l'écouteur d'événement onmessage dans le JavaScript frontal. Lorsqu'un nouveau message de commentaire est reçu, nous créons un nouveau message

élément dynamiquement et remplissez-le avec l'auteur et le contenu du commentaire. L'élément est ensuite ajouté au

dans le modèle.

Voici un exemple de mise à jour du modèle dans Jinja2 :

<code class="html"><script>
    // ...WebSocket initialization

    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>

En implémentant WebSockets avec FastAPI et Jinja2, nous obtenons un système de commentaires réactif et en temps réel où les commentaires nouvellement ajoutés sont instantanément reflétés dans le modèle sans qu'il soit nécessaire de recharger manuellement ou d'appeler l'API.

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!