Comment implémenter des WebSockets pour les mises à jour de données en temps réel dans Jinja2 avec FastAPI ?

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

Dans le modèle Jinja2, vous pouvez restituer des données existantes à l'aide de boucles, par exemple en affichant des commentaires sur un article de blog. Cependant, lorsque de nouveaux éléments sont ajoutés, Jinja2 ne fournit pas nativement un moyen de mettre à jour la liste de manière dynamique.

Solution potentielle utilisant WebSockets

Une solution courante pour les mises à jour en temps réel dans les applications Web est pour utiliser les WebSockets. Le code Python suivant fournit un point de terminaison WebSocket :

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

app = FastAPI()
templates = Jinja2Templates(directory="templates")

class ConnectionManager:
    def __init__(self):
        self.active_connections = []

    async def connect(self, websocket: WebSocket):
        await websocket.accept()
        self.active_connections.append(websocket)

    def disconnect(self, websocket: WebSocket):
        self.active_connections.remove(websocket)

    async def broadcast(self, message: str):
        for connection in self.active_connections:
            await connection.send_json(message)

manager = ConnectionManager()</code>

Dans le modèle index.html, nous établissons une connexion WebSocket et écoutons les messages entrants :

<code class="html"><script>
  var ws = new WebSocket("ws://localhost:8000/ws");
  ws.onmessage = function(event) {
    // Handle new data and update UI accordingly
  };
</script></code>

Le point de terminaison WebSocket peut alors diffuser les mises à jour aux clients connectés. Cela permet un affichage dynamique en temps réel de la liste des commentaires mise à jour.

Remarque :

Bien que les WebSockets soient une solution viable pour ce cas d'utilisation, il est important d'envisager des approches alternatives comme Alpine JS. Boucles x-for ou ReactJS pour des interactions d'interface utilisateur plus complexes.

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!