如何使用 WebSockets 和 FastAPI 在 Jinja2 模板中實現即時評論更新？

使用FastAPI 取得Jinja2 範本中更新的項目清單

在本教學中，我們示範如何使用FastAPI 和Jinja2 用於動態更新評論列表。該應用程式利用 WebSockets 在伺服器和多個客戶端之間建立雙向通訊通道。

問題：

想像一下建立一個部落格評論系統，其中需要動態地添加新評論添加到前端，無需刷新頁面。 Jinja2 範本用於渲染頁面上現有的評論，但需要一種機制來即時檢索並顯示新添加的評論。

解決方案：

到為了實現此功能，我們引入了 WebSockets，這是一種允許透過單一 TCP 連接進行即時、雙向通訊的技術。透過使用 FastAPI 和 Jinja2 實現 WebSockets，我們可以在伺服器和用戶端之間建立持久連接，使伺服器能夠即時向所有連接的客戶端廣播新評論。

實作 WebSockets:

為了在 FastAPI 中設定 WebSocket，我們建立一個 WebSocket 端點來處理傳入連線並為每個客戶端建立專用連線。以下程式碼顯示了我們的 WebSocket 端點：

<code class="python">@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await manager.connect(websocket)
    try:
        while True:
            data = await websocket.receive_json()
            comments.append(Comment(data['author'], data['content']))
            await manager.broadcast(data)
    except (WebSocketDisconnect, ConnectionClosed):
        manager.disconnect(websocket)</code>

在此程式碼中：

• manager 是 ConnectionManager 的一個實例，它處理活動連線清單並管理訊息廣播。
• 當客戶端連接到 /ws 端點時，將呼叫 connect 方法，將客戶端新增至活動連線清單中。
• while 迴圈處理來自客戶端的傳入訊息。當收到新訊息時，將建立新評論並將其新增至評論清單。然後使用廣播方法將更新的清單廣播到所有已連線的用戶端。
• 如果用戶端關閉連線或發生異常，則會呼叫斷開連線方法，將該用戶端從活動連線清單中刪除。

更新Jinja2 範本：

為了在Jinja2 範本中顯示更新的註釋，我們使用JavaScript 和WebSockets 監聽來自伺服器的傳入訊息並添加動態頁面有新評論。在我們的index.html範本中，我們包含以下JavaScript程式碼：

<code class="html"><script>
  var ws = new WebSocket("ws://localhost:8000/ws");
  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>

此JavaScript程式碼：

• 使用提供的 WebSocket URL 建立到伺服器的 WebSocket 連線。
• 定義一個事件偵聽器，用於偵聽來自伺服器的傳入訊息。
• 收到訊息時，它解析訊息中的 JSON 數據，並使用接收到的作者和內容創建一個新的 HTML 評論元素。
• 最後，新的評論元素被附加到 HTML 中的評論容器，動態更新頁面新評論。

結論

透過將 WebSockets 與 FastAPI 和 Jinja2 集成，我們實現了一個允許即時更新的動態評論系統。該技術可以應用於需要在客戶端和伺服器之間即時發送和接收訊息或資料的各種場景，提供高度互動和回應靈敏的使用者體驗。

以上是如何使用 WebSockets 和 FastAPI 在 Jinja2 模板中實現即時評論更新？的詳細內容。更多資訊請關注PHP中文網其他相關文章！