如何使用 WebSockets 和 FastAPI 在 Jinja2 模板中實現即時評論更新？-Python教學-PHP中文網

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

Susan Sarandon

發布： 2024-10-21 06:13:02

原創

761 人瀏覽過

How to Implement Real-Time Comment Updates in Jinja2 Templates Using WebSockets and FastAPI?

使用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程式碼：