云数据库与简易聊天室[下]

接上一篇文章《云数据库与简易聊天室[上]》

3、实现进入聊天室功能

现在，假设聊天室名称为“金属圈”，让我们来回顾一下从首页到登录页，全局变量、组件属性及数据库存储内容的变化，如表3所示。

表3_1 全局变量的变化

表3_2 组件属性值的变化

表3_3 数据库中存储值的变化

 表3_2中的第3、4行可以这样理解：如果用户是第一次使用聊天室应用，那么进入登录页时，用户名的显示文本为空，头像选框的选中项为首项；如果用户此前使用过聊天室应用，那么本地数据库中会保存以往使用过的用户名和头像，并且会在屏幕初始化时自动填写用户名，并设置头像选框的选中项（见图4：提取本地信息）。

在登录页，用户可以输入新的用户名，或采用旧的用户名；同样，用户可以选择新的头像，也可以沿用旧的头像，用户名及头像设置完成后，用户即可点击登录按钮，进入聊天室。登录按钮的点击事件处理程序如图12所示，其中包含了隐藏登录布局过程。 

图12  登录按钮的点击事件处理程序

需要说明的是，本案例中用组件的属性来充当全局变量，如聊天室成员列表的列表属性，在图12的代码中，局部变量“聊天室成员列表”的值来自于列表选择框“聊天室成员列表”的列表属性。当局部变量的值更新后，程序将更新后的结果保存到云数据库，但是此时列表选择框组件的列表属性并没有更新，直到云数据库的更新触发了另一个非常重要的事件——数据被改变事件，这是云数据库组件不同于原有的两个数据库组件的最显著的特征。当图12中更新后的成员列表信息被保存到云数据库时，触发了云数据库组件的数据被改变事件，在这个事件中，我们设置列表选择框“聊天室成员列表”的列表属性为更新后的数据。在图12中我们还向云数据库的聊天内容标记中追加了一条信息：“xxx加入聊天室”，聊天内容的更新同样会触发数据被改变事件，因此，我们会一并处理这两次触发，代码如图13所示。

图13 云数据库的数据改变事件处理程序

这里顺便解释一下云数据库追加操作的执行方式。追加操作默认的数据格式为列表，第一次追加操作是向空列表中添加第一个列表项，此后的追加操作是向列表的结尾追加新的列表项，如前所述，追加操作会触发云数据库组件的数据被改变事件。

图12的代码中还包括了向本地数据库存储用户名及头像信息，最后隐藏登录页，显示聊天页。测试结果如图14左图所示。注意图中标签显示的内容，括号表示数据为列表，其中包含了一个列表项。稍后我们会把列表转换为带换行的文本。此时如果点击页面右下角的“成员列表”，会发现其中只有一项，如图14右图所示。

图14 登录功能的测试结果

至此进入聊天室功能已经实现，下面来处理与聊天有关的各项操作。

4、实现聊天功能

聊天功能的核心技术是将某个用户的信息保存到云数据库，然后通过云数据库的数据被改变事件，将全体成员的聊天内容分发给每个成员。

（1）创建过程——显示聊天内容

如前所述，通过追加操作累积起来的聊天内容，是以列表方式存储在云数据库中，因此，在云数据库的数据被改变事件中，应用收到的也是列表类型的数据，我们需要将列表转换为文本，才能将聊天内容以人类便于阅读的方式呈现在聊天室中。过程的代码如图15所示。注意过程中的循环语句，为了使聊天内容按时间顺序自下而上排列，循环语句的起始值为列表长度，终止值为1，循环变量的步长为-1。

图15 定义过程——显示聊天内容

（2）提交按钮的点击事件

当用户在聊天室的发言框中输入文字后，点击提交按钮，即可将自己的发言广播给聊天室中的每一个人，这一功能的实现同样要依赖于云数据的数据被改变事件，具体的代码如图16所示。

图16 提交按钮的点击事件处理程序

注意，向云数据库提交的发言中，包含了用户头像、用户名以及具体的发言内容。不过，在上述程序中并没有直接显示用户的发言，因为发言不仅要显示在当前用户的屏幕上，更要显示在全体成员的屏幕上。这一功能要依赖于云数据库的数据被改变事件。

（3）完善云数据库的数据被改变事件

代码如图17所示，将图13中的最后一行代码替换成调用“显示聊天内容”过程。

图17 完善云数据库的数据被改变事件处理程序

上述程序的测试结果如图18所示。

图18 在两部手机上的测试结果

至此我们已经完成了聊天室的主要功能：创建/加入聊天室、进入聊天室、在聊天室发言等，此时，如果你点击屏幕右下角的“成员列表”，你会发现列表中有多行“金从军”，那是因为我在测试过程中多次进入到聊天室，每次进入列表都会增加一项，并将结果保存到云数据库。下面我们就来完成本应用的其他功能。

5、实现其他功能

（1）清空记录

只要将空列表保存到云数据库的“聊天内容存储标记”下，即可清空全部聊天内容，这项操作会影响到聊天室的全体成员，所有参与聊天的成员都会发现聊天内容消失了。代码如图19所示。

图19  清空本聊天室的聊天记录

（2）返回首页

返回首页的操作涉及到两个动作，一是将当前用户的用户名从成员列表中删除，并更新云数据库；二是通知聊天室的其他成员某人退出了聊天室。首先创建一个过程——退出聊天室，代码如图20所示。

图20 创建过程——退出聊天室

在返回首页按钮的点击事件中调用上述过程，代码如图21所示。

图21 返回首页按钮的点击事件处理程序

（3）退出应用

如果用户点击手机上的回退按键，视同用户退出聊天室，但是只有用户在聊天页面点击回退键时，才执行退出聊天室操作，代码如图22所示。

图22 处理退出应用操作

在准备测试上述程序之前，需要将聊天室成员列表做一下清空处理，具体方法如下：让程序停留在首页，在连接AI伴侣的前提下，分别对图23中的两个块进行单步执行操作。然后再进入聊天室，查看成员列表。这时列表中就只有当前用户一个人了。

图23  清空云数据库中的聊天室成员列表

（4）更新全体成员的聊天室列表

在测试过程中发现，如果有两个用户A、B同时打开聊天室应用，其中A创建了一个新的聊天室X，那么B是看不到X的，因此也无法加入X，这是因为B的应用中，聊天室列表并未更新。为了解决这一问题，需要在云数据库的数据被改变事件中，更新每个用户的聊天室列表数据，代码如图24所示。

图24 更新全体成员的聊天室列表数据

至此我们完成了简易聊天室的全部功能，测试结果如图1所示。这个应用虽然被冠以“简易”的名称，但其实其中的逻辑一点都不简单。期待读者能够在此基础上，开发出更具特色的聊天应用。