如何使用 WebSocket 和 FastAPI 更新 Jinja2 範本中的評論清單？

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

問題：

考慮一個場景：您正在部落格上建立評論系統。您正在使用 Jinja2 範本呈現現有註解。當透過 FastAPI 路由發布新評論時，您需要更新範本中顯示的評論清單。

解決方案：

雖然 Jinja2 並不理想處理即時更新，可以使用 WebSockets 找到解決方案。這需要修改 FastAPI 後端和 Jinja2 範本：

FastAPI 後端 (app.py):

• 建立一個 Manager 類別來管理 WebSocket 連線。
• 定義一個 send_personal_message 方法來傳送訊息給特定客戶端。
• 定義一個廣播方法來傳送訊息給所有連線的客戶端。
• 更新 / 路由來處理連接並將評論清單傳遞給範本.
• 建立 WebSocket 端點 (/ws) 來處理傳入的 WebSocket 連線並廣播新評論。

Jinja2 範本 (index.html):

• 新增
  ;元素來顯示註解。
• 建立 JavaScript 函數 addComment 以透過 WebSocket 發送新評論。
• 在WebSocket 的onmessage 事件處理程序中，創建HTML 元素來顯示新評論並將其附加到

示例代碼：

<code class="html"><!-- app.py -->
@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>

<code class="html"><!-- index.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)
    };
    function addComment(event) {
        var author = document.getElementById("author")
        var content = document.getElementById("content")
        ws.send(JSON.stringify({
            "author": author.value,
            "content": content.value
        }))
        author.value = ''
        content.value = ''
        event.preventDefault()
    }
</script></code>

透過使用WebSockets，您可以在FastAPI 後端和Jinja2 模板，允許在UI 中顯示更新的評論清單。

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