使用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 事件偵聽器。當收到新的評論訊息時，我們動態創建一個新的