如何使用 FastAPI WebSockets 維護 Jinja2 範本中的即時評論清單？

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

在評論系統中，維護最新的評論清單至關重要提供無縫的使用者體驗。當新增評論時，它應該反映在模板中，而不需要手動重新加載。

在 Jinja2 中，更新評論清單通常是透過 API 呼叫來實現的。然而，這種方法可能會引入延遲並損害使用者介面的回應能力。更有效率的解決方案涉及利用 WebSocket 等即時通訊技術。

在FastAPI 和Jinja2 中實作WebSocket

WebSocket 是WebSocket 協定的子集，提供兩種客戶端（瀏覽器）和伺服器（後端）之間的雙向通信通道。這使我們能夠向客戶端廣播即時更新，包括新添加的評論。

要在此場景中實作 WebSocket，我們將利用 FastAPI 及其內建 WebSocket 功能。下面的程式碼片段示範如何建立 WebSocket 端點：

<code class="python">from fastapi import FastAPI, WebSocket, WebSocketDisconnect

app = FastAPI()

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

在 websocket_endpoint 函數中，我們與客戶端建立 WebSocket 連線並處理傳入資料。當收到新評論時，我們將使用廣播（）方法將其廣播給所有連接的用戶端。

更新 Jinja2 範本

更新 Jinja2 範本對於新評論，我們在前端 JavaScript 中使用 onmessage 事件偵聽器。當收到新的評論訊息時，我們會建立一個新的

動態元素並用評論的作者和內容填滿它。然後將該元素附加到現有的

中。

以下是如何在Jinja2 中更新模板的範例：

<code class="html"><script>
    // ...WebSocket initialization

    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>

透過使用FastAPI 和Jinja2 實現WebSocket，我們實現了一個響應式即時評論系統，其中新添加的評論會立即反映在模板中，無需手動重新載入或API 呼叫。

以上是如何使用 FastAPI WebSockets 維護 Jinja2 範本中的即時評論清單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！