如何使用 WebSockets 和 FastAPI 在 Jinja2 模板中实现实时评论更新？

使用 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代码：

• 使用提供的 WebSocket URL 建立到服务器的 WebSocket 连接。
• 定义一个事件侦听器，用于侦听来自服务器的传入消息。
• 收到消息时，它解析消息中的 JSON 数据，并使用接收到的作者和内容创建一个新的 HTML 评论元素。
• 最后，新的评论元素被附加到 HTML 中的评论容器，动态更新页面新评论。

结论

通过将 WebSockets 与 FastAPI 和 Jinja2 集成，我们实现了一个允许实时更新的动态评论系统。该技术可以应用于需要在客户端和服务器之间实时发送和接收消息或数据的各种场景，提供高度交互和响应灵敏的用户体验。

以上是如何使用 WebSockets 和 FastAPI 在 Jinja2 模板中实现实时评论更新？的详细内容。更多信息请关注PHP中文网其他相关文章！