使用 FastAPI WebSockets 更新 Jinja2 模板中的项目列表

在评论系统中，维护最新的评论列表至关重要提供无缝的用户体验。当添加新评论时，它应该反映在模板中，而不需要手动重新加载。

在Jinja2中，更新评论列表通常是通过API调用来实现的。然而，这种方法可能会引入延迟并损害用户界面的响应能力。更有效的解决方案涉及利用 WebSockets 等实时通信技术。

在 FastAPI 和 Jinja2 中实现 WebSockets

WebSockets 是 WebSocket 协议的子集，提供两种客户端（浏览器）和服务器（后端）之间的双向通信通道。这使我们能够向客户端广播实时更新，包括新添加的评论。

要在此场景中实现 WebSocket，我们将利用 FastAPI 及其内置 WebSocket 功能。下面的代码片段演示了如何创建 WebSocket 端点：

from fastapi import FastAPI, WebSocket, WebSocketDisconnect

app = FastAPI()

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

在 websocket_endpoint 函数中，我们与客户端建立 WebSocket 连接并处理传入数据。当收到新评论时，我们将使用broadcast()方法将其广播到所有连接的客户端。

更新 Jinja2 模板

更新 Jinja2 模板对于新评论，我们在前端 JavaScript 中使用 onmessage 事件侦听器。当收到新的评论消息时，我们动态创建一个新的