如何使用 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中文网其他相关文章！