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

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

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

主要分三步:

目录

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

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

第三步:测试结果如图(手机与电脑通信)


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

下面是具体步骤:

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

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

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

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

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

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

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

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

第1步:定义监听函数doWatcher()。

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

第2步:启动监听函数。

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

第三步:测试结果如图(手机与电脑通信)

控制台输出的内容:

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

目录
相关文章
|
5天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的老孙电子点菜系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的老孙电子点菜系统的详细设计和实现
30 1
|
2天前
|
数据采集 小程序 数据挖掘
Matplotlib库模板学习,2024年最新微信小程序页面跳转方法总结
Matplotlib库模板学习,2024年最新微信小程序页面跳转方法总结
|
3天前
|
移动开发 监控 供应链
JAVA智慧工厂制造生产管理MES系统,全套源码,多端展示(app、小程序、H5、台后管理端)
一开始接触MES系统,很多人会和博主一样,对MES细节的应用不了解,这样很正常,因为MES系统相对于其他系统来讲应用比较多!
14 1
JAVA智慧工厂制造生产管理MES系统,全套源码,多端展示(app、小程序、H5、台后管理端)
|
4天前
|
小程序 应用服务中间件 Linux
【Nginx】微信小程序后端开发、一个域名访问多个服务
【Nginx】微信小程序后端开发、一个域名访问多个服务
16 0
|
5天前
|
存储 JSON 小程序
html在线预览CAD(手机小程序浏览DWG)二次开发图层表的方法
本文档介绍了DWG数据库中图层的存储结构及MxCAD库对图层的操作。图层信息存储于图层层表McDbLayerTable()中,每个记录对应一个图层,包含颜色、线型等属性,且有一个不可删除的默认"0"层。主要操作包括:通过MxCpp.getCurrentMxCAD()获取图层表,使用addLayer()添加图层,遍历图层,以及删除图层。此外,还展示了如何修改图层的关闭、冻结、锁定状态及颜色。提供了在线示例以演示这些功能。
html在线预览CAD(手机小程序浏览DWG)二次开发图层表的方法
|
5天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
13 1
|
5天前
|
小程序 前端开发 JavaScript
轻松学会微信小程序开发(一)
轻松学会微信小程序开发(一)
|
5天前
|
JSON 小程序 JavaScript
微信小程序开发1
微信小程序开发1
|
5天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
50 4
|
5天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的汽车保养系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的汽车保养系统的详细设计和实现
11 1

热门文章

最新文章