nicegui的区域刷新广播功能

nicegui 非常适合做实时通信的页面。官方仓库的例子中，有一个聊天室的案例。今天我将带大家深入了解其细节。

本节需要一些前置知识，这些都在前面的章节有讲解：

• refreshable 的刷新机制
• 容器增删改
• 客户端连接

本节，我们将重点学习 refreshable 的广播机制。从利用上一节学会的客户端连接，一步步优化代码，最终得到官方提供的 refreshable 实现版本。

这个过程中，还会接触到 空容器 的使用。

本节使用的 nicegui 版本为 1.4.24

聊天室程序

为了更好理解，我去掉一些非必要的代码(布局)，下面动图展示了简化过后的聊天室：

功能类似 聊天群：

• 访问页面，就会得到一个用户名
• 允许多个用户访问
• 用户在输入框输入信息，回车后，所有人的界面都会看到最新的对话记录。
• 每个用户界面稍有不同，自己发出的消息会在右边，别人的消息在左边

首先，因为要求每个用户的页面都是独立状态，使用 ui.page 定义路由页面即可。

其次，需要一个全局数据记录所有用户的消息：

• 这里使用列表临时存放。你也可以换成数据库等其他持久化方式。
• 不管哪个用户，只要他发送消息，就把数据放入列表

示意图：

数据收集的流程非常简单直观，关键是，当用户A发送消息后，此时应该通知所有的用户刷新界面( 注意，只是聊天记录区域，而不是整个页面刷新 )。

所以，聊天室最关键的地方在于， 如何通知所有的界面(客户端连接)刷新特定的区域(可以理解为某个容器组件对象)

在上一节中，我们已经学会利用客户端连接，统一操作所有的页面。所以，我们有了第一个版本的实现：

先看界面代码：

• 行57：回车事件中，把消息发送给全局的消息列表
• 行61：调用方法刷新所有客户端
• 行70：在刷新客户端的方法中，我们需要找到这个 column 容器组件，使用 props 标记和记录信息

现在看看61行关键的函数 refresh_all_clients

• 行25：遍历所有连接的客户端
• 行31：利用前面的标记，找到 column 容器
• 行32：清空容器中的内容
• 行37-38：在 column 组件下，重新遍历全局列表，创建消息区域

上面遍历全局消息列表，创建消息界面的函数如下：

• 行21：使用内置组件 ui.chat_message

这一版实现，代码很繁琐，并且有许多缺陷。

• 需要在 column 组件上，利用 props 打标记和保存信息
• 在遍历所有客户端连接时，需要过滤不是聊天室的连接

现在看进一步优化的实现版本

空容器

既然用户访问页面的时候，就会执行路由函数里面的代码，从而创建一系列组件。我们可以在那个时候，把消息的 column 容器和相关信息(用户名)给全局保存起来：