下面介绍一种微信小程序云开发中实时聊天系统的实现方法。
主要分三步:
目录
大家参考的话,可以根据所存在的问题直接定位到相应的步骤参考即可。
下面是具体步骤:
第一步:聊天界面的设计与实现
这一步中,不涉及具体的实时聊天内容,主要是聊天界面的设计与编码。所以,我直接以具体的项目界面为展示区,给大家分析一下。
图中红色区域部分,一个是聊天消息展示区,该区域中会显示自己发送的消息以及对方发送给我的消息。一个是聊天按钮,实现消息的发送。具体的代码非常简单,这里我就不展示了。
好,下面我们来看一下第二步。
第二步:实时消息的监听与显示
实时消息的实现,主要借助云开发中提供的watch函数来实现对数据库中数据更新的监听。如图。
具体的函数使用方法可以参考微信小程序文档中的说明:Collection: Object | 微信开放文档
在编写过程中具体的步骤分两步:
第1步:定义监听函数doWatcher()。
在该函数中,我们watch的是云数据库中名为‘chats’的集合,通过onChange事件判定集合‘chats’中数据是否有变化,如果发生了变化,那么所有的用户都会收到云端数据变化的通知(这个通知是云端自动发送的到客户端的),客户端收到消息后,在根据dataType来判定数据的更新是什么状态,如果是符合自己要求的状态,就可以在此处写上自己的逻辑。dataType的取值可以参考官方文档。如图。
第2步:启动监听函数。
在需要开始监听的地方开启监听函数,一般情况下,都会放到页面加载onload函数中。
第三步:测试结果如图(手机与电脑通信)
控制台输出的内容:
欢迎关注,点赞、收藏。如有问题可留言或加入QQ交流:3110689397。