开发工具 如何在微信小程序里实现聊天室的功能?

huanxin · 2019年04月28日 · 最后由 kxu1988 回复于 2019年04月28日 · 10090 次阅读

准备工作 下载环信 小程序 demo+sdk git clone https://github.com/easemob/webim-weixin-xcx 创建一个文件夹,将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件,文件目录说明

集成 登录环信没什么可说的,这里选择的是使用 username/password 登录,和 demo 中的一样,文件没有进行任何更改

在 app.js 中注册的 WebIM.conn.listen, 然后在 登陆成功的回调 onOpened 设置的跳转页面,并将登陆的 username 赋给 myName,传到新的页面中使用

修改 roomlist.js 获取聊天室列表,是分页获取的,这里先偷个懒,获取了第一页 20 个聊天室

然后将 listChatrooms() 分别在 onLoad、onShow 内,更改下,将原有的 listGroups() 替换掉 然后在 roomlist.wxml 修改对应的 变量绑定名称

demo 中的 group.js 中,获取到的是当前登陆账号已加入的群组,咱们做的是聊天室功能,所以需要有一个加入的操作,找 roomlist.js 中找到 into_room: function (event),然后填写加入聊天室的方法,我是直接在当前这个里面加的跳转到聊天页面,并将当前登陆的 IDmyName,聊天室 IDgroupID,聊天室名称 your 传给新页面

Ex:监听是否加入聊天室成功的回调是在 onPresence 中,type:memberJoinChatRoomSuccess,正常是监听这个回调跳转页面,有点麻烦就直接这样吧 到会话页面后,需要修改一下对应的消息格式,在 comps/chat/suit 目录下,将里面的文件对应的 js 文件根据文档给聊天室发送消息 格式进行修改,聊天室消息和群组消息不同,所以我目前是直接将 getSendToParam()、isGroupChat() 注释,改成下面这样,demo 中下面还有代码的,这里就用 …… 代替了

就这样了,简单集成聊天室功能,demo 中的 UI 是开源的,可以根据自己的需求更改~下面是具体实现过程。代码也放在 github 上了,有需要的兄弟自取。demo 下载地址:https://github.com/lizgDonkey/room-xcx

我开始是用 Action Cable 来做的小程序跟电脑端之间的聊天功能,后来因为还有视频通话的功能,调研了一圈,最后选了腾讯的云通信,感觉价格最划算。但是腾讯云没有 ruby 的示例,中间踩了不少坑

需要 登录 后方可回复, 如果你还没有账号请 注册新账号