Atualizando a lista de itens no modelo Jinja2 usando FastAPI WebSockets

Em um sistema de comentários, manter uma lista atualizada de comentários é crucial para fornecer uma experiência de usuário perfeita. Quando um novo comentário é adicionado, ele deve ser refletido no modelo sem a necessidade de recarregamento manual.

No Jinja2, a atualização da lista de comentários normalmente é feita por meio de chamadas de API. Contudo, esta abordagem pode introduzir latência e comprometer a capacidade de resposta da interface do usuário. Uma solução mais eficiente envolve o aproveitamento de tecnologias de comunicação em tempo real, como WebSockets.

Implementação de WebSockets em FastAPI e Jinja2

WebSockets, um subconjunto do protocolo WebSocket, fornece dois canal de comunicação entre um cliente (navegador) e um servidor (backend). Isso nos permite transmitir atualizações em tempo real aos clientes, incluindo comentários recém-adicionados.

Para implementar WebSockets neste cenário, utilizaremos FastAPI e sua funcionalidade WebSocket integrada. O trecho de código abaixo demonstra como criar um endpoint WebSocket:

from fastapi import FastAPI, WebSocket, WebSocketDisconnect

app = FastAPI()

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

Dentro da função websocket_endpoint, estabelecemos uma conexão WebSocket com o cliente e tratamos os dados recebidos. Quando um novo comentário for recebido, iremos transmiti-lo para todos os clientes conectados usando o método broadcast().

Atualizando o modelo Jinja2

Para atualizar o modelo Jinja2 com o novo comentário, usamos o ouvinte de evento onmessage no JavaScript front-end. Quando uma nova mensagem de comentário é recebida, criamos um novo elemento