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

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

DDD

Libérer： 2024-10-21 06:16:02

original

596 Les gens l'ont consulté

How to Maintain Real-Time Comment List in Jinja2 Template Using FastAPI WebSockets?

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>

Copier après la connexion

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

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>

Copier après la connexion

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!