如何使用 WebSocket 和 FastAPI 更新 Jinja2 模板中的评论列表？

如何使用 FastAPI 获取 Jinja2 模板中更新的项目列表？

问题：

考虑一个场景：您正在博客上构建评论系统。您正在使用 Jinja2 模板呈现现有注释。当通过 FastAPI 路由发布新评论时，您需要更新模板中显示的评论列表。

解决方案：

虽然 Jinja2 并不理想处理实时更新，可以使用 WebSockets 找到解决方案。这需要修改 FastAPI 后端和 Jinja2 模板：

FastAPI 后端 (app.py):

• 创建一个 ConnectionManager 类来管理 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中文网其他相关文章！