【微信小程序7】云开发中实时聊天系统的实现方法

秒速五厘米 2024-03-03 03:26 38阅读 0赞

下面介绍一种微信小程序云开发中实时聊天系统的实现方法。

主要分三步：

**目录**

第一步：聊天界面的设计与实现

第二步：实时消息的监听与显示

第三步：测试结果如图（手机与电脑通信）

--------------------

大家参考的话，可以根据所存在的问题直接定位到相应的步骤参考即可。

下面是具体步骤：

### 第一步：聊天界面的设计与实现 ###

这一步中，不涉及具体的实时聊天内容，主要是聊天界面的设计与编码。所以，我直接以具体的项目界面为展示区，给大家分析一下。

![ac00ad3cd5d647e0ac0aaca81a5abf9a.png][]

图中红色区域部分，一个是聊天消息展示区，该区域中会显示自己发送的消息以及对方发送给我的消息。一个是聊天按钮，实现消息的发送。具体的代码非常简单，这里我就不展示了。

好，下面我们来看一下第二步。

### 第二步：实时消息的监听与显示 ###

实时消息的实现，主要借助云开发中提供的watch函数来实现对数据库中数据更新的监听。如图。

![450c50b492f644c288b8c91b382c9cab.png][]

具体的函数使用方法可以参考微信小程序文档中的说明：[Collection: Object | 微信开放文档][Collection_ Object _]

在编写过程中具体的步骤分两步：

第1步：定义监听函数doWatcher（）。

![4d0393b330324bb0a31066446b402b58.png][]

在该函数中，我们watch的是云数据库中名为‘chats’的集合，通过onChange事件判定集合‘chats’中数据是否有变化，如果发生了变化，那么所有的用户都会收到云端数据变化的通知（这个通知是云端自动发送的到客户端的），客户端收到消息后，在根据dataType来判定数据的更新是什么状态，如果是符合自己要求的状态，就可以在此处写上自己的逻辑。dataType的取值可以参考官方文档。如图。

![2139a37f0d96493dac65ad2cec48b583.png][]

第2步：启动监听函数。

在需要开始监听的地方开启监听函数，一般情况下，都会放到页面加载onload函数中。

![98a2ce476b5c4db4b2fc52d5b6d37a9a.png][]

### 第三步：测试结果如图（手机与电脑通信） ###

![5e06d06fc706484dbd2b9e22e2f72ac3.png][]

控制台输出的内容：

![dcee98b1fbff44deb63cf808778e0fb9.png][]

欢迎关注，点赞、收藏。如有问题可留言或加入QQ交流：3110689397。

[ac00ad3cd5d647e0ac0aaca81a5abf9a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/5691c6c33cee4f5e8c1a1c9e050d5170.png
[450c50b492f644c288b8c91b382c9cab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/33c76f66a99a491781b4fa598be1a7aa.png
[Collection_ Object _]: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.watch.html
[4d0393b330324bb0a31066446b402b58.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/cd9b59ab4b08406d99abdb014b9c8bd7.png
[2139a37f0d96493dac65ad2cec48b583.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/64542ef8dd8a4e3ca31692db3d034dfb.png
[98a2ce476b5c4db4b2fc52d5b6d37a9a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/1d18d185e15b4c71a1f938ca05c5ebb3.png
[5e06d06fc706484dbd2b9e22e2f72ac3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/378f2ef5cd844b49bac4dc2c058c98ca.png
[dcee98b1fbff44deb63cf808778e0fb9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/c9f3bb1fb956442780c8ec340425a251.png