小程序实现环信群聊

2024-12-10 约 405 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=78237917

小程序实现环信群聊

最近在研究小程序群聊，发现环信官方未发布小程序群聊，并且近期也没有发布的打算。so 自行根据单聊实现群聊。

话不多说，直接上图

新增了 msg.body.group = 'groupchat';

ok，发送搞定了，那么接收消息呢？、

onTextMessage: function (message) {
     console.log('收到txt消息');
     console.log(message);
     if (message) {
         if(message.type == 'chat'){
             //此处为单聊，暂不举例
         }else{
             var page = that.getGroupPage();
             if (page) {
                 page.receiveMsg(message, 'txt')
             } else {
                 var chatMsg = that.globalData.chatMsg || []
                 var value = WebIM.parseEmoji(message.data.replace(/\n/mg, ''))
                 var time = WebIM.time()
                 var msgData = {
                     info: {
                         from: message.from,
                         to: message.to
                     },
                     username: message.from,
                     yourname: message.from,
                     msg: {
                         type: 'txt',
                         data: value
                     },
                     style: '',
                     time: time,
                     mid: 'txt' + message.id,
                     userNickname : message.ext.userName,
                     userAvatar : message.ext.userPic,
                 }
                 chatMsg = wx.getStorageSync('group_' + message.to) || []
                 chatMsg.push(msgData)
                 wx.setStorageSync('group_' + message.to, chatMsg);
             }
         }
     }
 },

就是简单的判断了一下接受到的消息的类型，然后缓存的key换了一下。

还有一点就是聊天时的用户名和头像了。

两种方法:

接口获取，每次收到新消息时调用服务器接口获取（实时性强，不推荐）
扩展消息，通过消息主体外的扩展消息带过来头像和昵称

那么小程序的扩展消息如何设置呢

msg.body.ext.userNickname = wx.getStorageSync('myNickname');

msg.body.ext.userAvatar = wx.getStorageSync('myAvatar');

此处需注意一点，如果APP中同样使用了扩展消息，那么扩展消息的名字一定要统一哦。。

目录

小程序实现环信群聊

小程序实现环信群聊