《拍拍二手》微信小程序之环信接入

环信即时通讯云

已于 2024-01-30 14:41:00 修改

阅读量2.2k

点赞数 2

分类专栏：环信文章标签：微信小程序拍拍二手环信

于 2019-05-30 15:07:42 首次发布

本文链接：https://blog.csdn.net/huan132456765/article/details/90697551

版权

环信专栏收录该内容

47 篇文章 5 订阅

订阅专栏

拍拍二手闲置平台，可以将自己的闲置物品进行转让或者捐赠。想和卖家达成共识就需要涉及IM聊天。拍拍二手闲置平台目前接入的是环信IM聊天。下面我将从三个阶段带大家玩转环信IM会话。
前期
初识IM聊天
带着问题去调研
必须接入环信吗？除了环信是否可以接入其他即时通信?
环信目前有哪些功能呢？支持微信小程序吗？
如何接入小程序呢？

调研分析
必须接入环信吗？除了环信是否可以接入其他即时通信?

现状: 微信小程序API 提供了WebSocket 方法。
扩展: 如果服务端支持scoket通信,ios\android\H5 也全都支持Im聊天了
备注：专业第三方Im有融云、环信、云之讯等，底层实现均是基于scoket 通信。明白scoket通信后也可以自己写即时通信。

环信目前有哪些功能呢？支持微信小程序吗？
错误想法: 环信就是做im聊天的，咱们上去按照接入文档，开发就能搞定！！！
这种想法是很致命的。在所有的第三方组件接入中，如果我们不能跳出来看待问题，只是为了完成任务而完成任务。那么我们永远是最底层的低级码农。
环信目前是同行业里面做的算不错的。那么他的官网、接入规范都应该有的。微信小程序也是支持的。在后面小编会带领大家一切怎么去阅读一个官网

如何接入小程序？
接入小程序是否需要申请一个账号呢？我直接运行他们的demo可以吗？怎么去测试呢? 此时我们可以有很多的猜想。我认为在开始接入之前我们应该很好的进行一些思考，答案显而易见。
环信接入思考篇
快即时慢
在工作中，大家会经常遇到第三方组件的接入。当接收到任务后，为了尽快完成任务。上来就google，找攻略，找技巧。往往认为这样做速度是最快的。结果适得其反，做了很多无用的功。我们意识中的快，结果却变成了慢
慢即时快
在这里插入图片描述
逆向思维：任何一个第三方的组件，特别是一个大点的平台，他们为了推出自己的产品，一定会有各种各样的功能支持，接入文档说明。我们放慢速度，将这些资源用上半天的时间进行简单的梳理。后期的开发进度会有很大的提升。
上图是我在接入环信Im后进行的反思。因为在接入环信之前，其他团队成员用了很长的时间联调。假如他们在接入环信聊天之前，了解环信拥有自己的后台，可以直接给用户端发送测试消息;可以直接创建用户、创建聊天室、创建群组。他们还会花费那么久的时间去联调吗?完全不用依赖服务端。不用依赖ios，依赖android。自己使用环信后台，轻轻松松完成各种测试。
环信接入
环信官网注册自己的即时通讯云，并登陆后台
在这里插入图片描述
创建自己的应用，并记录关键信息

以下是关键信息哦！！！

备注：
应用标识应用接入时会使用
IM 用户可以创建、删除用户、发送消息
群组可以创建、删除群组信息、发送消息
聊天室可以创建、删除聊天室、发送消息
tip 通过这个后台管理系统，就可以玩转环信的接入测试了。
从环信下载小程序demo，替换 appkey 进行联调测试
在这里插入图片描述
测试走起
1.用户测试
在环信后台创建用户，在小程序端登录（用户demo1 密码：123456）
2.一对一会话测试
① 在环信后台创建用户demo2
② 点击操作，查看用户好友将demo1和demo2 添加为好友。
③ 在小程序端用demo1给demo2发送测试消息。
④ 退出demo1用户，登录demo2查看是否会接收到demo1发送的会话
在这里插入图片描述
由于环信工程师们相信码农的实力，在群组测试和聊天室测试这块为大家留下了想象空间。demo 中群组测试和聊天室测试为明确写出。让我继续带大家飞
3.群组测试
① 创建群组记录群组id，并给群组添加成员（demo2）
在这里插入图片描述
② 环信后台给群组发送测试消息

③ 控制台能收到群组测试消息，怎么展示呢? 请阅读源码解析篇
4.聊天室测试
① 创建聊天室记录聊天室id,将demo1 设置为超级管理员，demo2设置为管理员
② 聊天室这里没有聊天室消息的发送。请阅读源码解析篇
通过以上4个简单的测试，android、ios、h5、小程序的聊天测试均可以参照以上4点进行顺利的测试。初期就此结束。下面带代价进行源码的解析
中期
看源码前期思考
在这里插入图片描述
核心源码阅读

以上是环信sdk 基础代码结构。通过简单阅读会发现：
环信的scoket 通信也使用了微信小程序暴露的scoket 通信（猜想 android、ios 其他端也有对应的scoket通信）
环信的api包装在connection.js 组件中，如果某些api没有，咱们可以扩展connection 中的方法
环信核心代码阅读完成后，发现没有涉及到缓存。看来缓存的处理是在对应的业务逻辑中。
设想：
消息应该在哪里缓存
哪里进行会话链接的监听注册

环信demo 代码阅读
会话、群组
通过前面提到的方式，大家可以在小程序控制台抓取到用户收到的会话和群组消息
会话
app.js
环信scoket 注册监听代码在app.js 中

核心代码如下：
{
//调用API从本地缓存中获取数据
var that = this
var logs = wx.getStorageSync(‘logs’) || []
logs.unshift(Date.now())
wx.setStorageSync(‘logs’, logs)

    WebIM.conn.listen({
        onOpened: function (message) {//连接成功回调
        // 如果isAutoLogin设置为false，那么必须手动设置上线，否则无法收消息
        // 手动上线指的是调用conn.setPresence(); 如果conn初始化时已将isAutoLogin设置为true
        // 则无需调用conn.setPresence();             
            WebIM.conn.setPresence()
        },
        onPresence: function (message) { //处理“广播”或“发布-订阅”消息，如联系人订阅请求、处理群组、聊天室被踢解散等消息
            switch(message.type){
                case "unsubscribe":
                    pages[0].moveFriend(message);
                    break;
                case "subscribe":
                    if (message.status === '[resp:true]') {
                        return
                    } else {
                        pages[0].handleFriendMsg(message)
                    }
                    break;
                case "joinChatRoomSuccess":
                    console.log('Message: ', message);
                    wx.showToast({
                        title: "JoinChatRoomSuccess",
                    });
                    break;
                case "memberJoinChatRoomSuccess":
                    console.log('memberMessage: ', message);
                    wx.showToast({
                        title: "memberJoinChatRoomSuccess",
                    });
                    break;
                case "memberLeaveChatRoomSuccess":
                    console.log("LeaveChatRoom");
                    wx.showToast({
                        title: "leaveChatRoomSuccess",
                    });
                    break;
            }
        },
        onRoster: function (message) { //处理好友申请
            var pages = getCurrentPages()
            if (pages[0]) {
                pages[0].onShow()
            }
        },

        onVideoMessage: function(message){ //视频处理
            console.log('onVideoMessage: ', message);
            var page = that.getRoomPage()
            if (message) {
                if (page) {
                    page.receiveVideo(message, 'video')
                } else {
                    var chatMsg = that.globalData.chatMsg || []
                    var time = WebIM.time()
                    var msgData = {
                        info: {
                            from: message.from,
                            to: message.to
                        },
                        username: message.from,
                        yourname: message.from,
                        msg: {
                            type: 'video',
                            data: message.url
                        },
                        style: '',
                        time: time,
                        mid: 'video' + message.id
                    }
                    msgData.style = ''
                    chatMsg = wx.getStorageSync(msgData.yourname + message.to) || []
                    chatMsg.push(msgData)
                    wx.setStorage({
                        key: msgData.yourname + message.to,
                        data: chatMsg,
                        success: function () {
                            //console.log('success')
                        }
                    })
                }
            }
        },

        onAudioMessage: function (message) { // 音频处理
            console.log('onAudioMessage', message)
            var page = that.getRoomPage()
            console.log(page)
            if (message) {
                if (page) {
                    page.receiveMsg(message, 'audio')
                } 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: 'audio',
                            data: value
                        },
                        style: '',
                        time: time,
                        mid: 'audio' + message.id
                    }
                    console.log("Audio msgData: ", msgData);
                    chatMsg = wx.getStorageSync(msgData.yourname + message.to) || []
                    chatMsg.push(msgData)
                    wx.setStorage({
                        key: msgData.yourname + message.to,
                        data: chatMsg,
                        success: function () {
                            //console.log('success')
                        }
                    })
                }
            }
        },

        onLocationMessage: function (message) { // 收到位置信息
            console.log("Location message: ", message);
        },

        onTextMessage: function (message) {//收到文本消息
            var page = that.getRoomPage()
            console.log(page)
            if (message) {
                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
                    }
                    chatMsg = wx.getStorageSync(msgData.yourname + message.to) || []
                    chatMsg.push(msgData)
                    wx.setStorage({
                        key: msgData.yourname + message.to,
                        data: chatMsg,
                        success: function () {
                            //console.log('success')
                        }
                    })
                }
            }
        },
        onEmojiMessage: function (message) { //收到表情信息
            //console.log('onEmojiMessage',message)
            var page = that.getRoomPage()
            //console.log(pages)
            if (message) {
                if (page) {
                    page.receiveMsg(message, 'emoji')
                } else {
                    var chatMsg = that.globalData.chatMsg || []
                    var time = WebIM.time()
                    var msgData = {
                        info: {
                            from: message.from,
                            to: message.to
                        },
                        username: message.from,
                        yourname: message.from,
                        msg: {
                            type: 'emoji',
                            data: message.data
                        },
                        style: '',
                        time: time,
                        mid: 'emoji' + message.id
                    }
                    msgData.style = ''
                    chatMsg = wx.getStorageSync(msgData.yourname + message.to) || [] //tip 从本地缓存中获取用户的消息  发消息+来源 适用于单人会话 msgData.yourname + message.to+当前登录人 群组/聊天室
                     
                    chatMsg.push(msgData)
                    //console.log(chatMsg)
                    wx.setStorage({
                        key: msgData.yourname + message.to,
                        data: chatMsg,
                        success: function () {
                            //console.log('success')
                        }
                    })
                }
            }
        },
        onPictureMessage: function (message) {//收到图片信息
            //console.log('Picture',message);
            var page = that.getRoomPage()
            if (message) {
                if (page) {
                    //console.log("wdawdawdawdqwd")
                    page.receiveImage(message, 'img')
                } else {
                    var chatMsg = that.globalData.chatMsg || []
                    var time = WebIM.time()
                    var msgData = {
                        info: {
                            from: message.from,
                            to: message.to
                        },
                        username: message.from,
                        yourname: message.from,
                        msg: {
                            type: 'img',
                            data: message.url
                        },
                        style: '',
                        time: time,
                        mid: 'img' + message.id
                    }
                    msgData.style = ''
                    chatMsg = wx.getStorageSync(msgData.yourname + message.to) || []
                    chatMsg.push(msgData)
                    wx.setStorage({
                        key: msgData.yourname + message.to,
                        data: chatMsg,
                        success: function () {
                            //console.log('success')
                        }
                    })
                }
            }
        },
        // 各种异常
        onError: function (error) {
            // 16: server-side close the websocket connection
            if (error.type == WebIM.statusCode.WEBIM_CONNCTION_DISCONNECTED) {
                if (WebIM.conn.autoReconnectNumTotal < WebIM.conn.autoReconnectNumMax) {
                    return;
                }

                wx.showToast({
                    title: 'server-side close the websocket connection',
                    duration: 1000
                });
                wx.redirectTo({
                    url: '../login/login'
                });
                return;
            }

            // 8: offline by multi login
            if (error.type == WebIM.statusCode.WEBIM_CONNCTION_SERVER_ERROR) {
                wx.showToast({
                    title: 'offline by multi login',
                    duration: 1000
                })
                wx.redirectTo({
                    url: '../login/login'
                })
                return;
            }
        },
    })

    
}

实际开发过程中，在微信中，退出小程序，重新进入时，webscoket 通信并没有重新创建链接。存在用户收到不到消息的情况。可以将以上代码封装，例如addHXLIstener(…)。当用户重新打开后，再次注册环信监听即可。

拍拍二手闲置交易平台，主要集成的是文本聊天功能。
环信登录例如 initLoginHX();
var uin=wx.getStorageSync(‘hxuin’);
var pwd=wx.getStorageSync(‘hxpwd’);
console.log(‘initHX:’ + uin+“||”+pwd);
var options = {
apiUrl: ‘服务器url’,
user: ‘用户名’,// 用户名要是字符
pwd: ‘密码’,
grant_type: ‘password’,
appKey: ‘appkey’,
success: function (res) {
console.log(“环信创建连接成功”)
},
error: function (res) {
console.log(“环信创建连接失败”)
}
};
WebIM.conn.open(options);

chat 会话
环信的会话列表存储在本地，并没有调用服务器端数据
var that = this
var member = wx.getStorageSync(‘member’)
var myName = wx.getStorageSync(‘myUsername’)
var array = []
for (var i = 0; i < member.length; i++) {
if (wx.getStorageSync(member[i].name + myName) != ‘’) {
array.push(wx.getStorageSync(member[i].name + myName)[wx.getStorageSync(member[i].name + myName).length - 1])
}
}
//console.log(array，‘1’)
this.setData({
arr: array
})

通过以上代码得出结论：环信的会话是通过遍历用户id+对方id 构成的数据。
那群组和聊天室的怎么处理呢？

环信小程序demo中只提供了聊天室列表的获取接口我们可以轻松实现聊天室列表，并没有提供群组列表的获取方式。我们需要在conection中扩展调用群组列表的接口，来实现群组列表。参照聊天室列表获取即可实现。聊天室列表实现方式如下：
connection.prototype.getChatRooms = function (options) {

var conn = this,
    token = options.accessToken || this.context.accessToken;

if (token) {
    var apiUrl = this.apiUrl;
    var appName = this.context.appName;
    var orgName = this.context.orgName;

    if (!appName || !orgName) {
        conn.onError({
            type: _code.WEBIM_CONNCTION_AUTH_ERROR
        });
        return;
    }

    var suc = function (data, xhr) {
        typeof options.success === 'function' && options.success(data);
    };

    var error = function (res, xhr, msg) {
        if (res.error && res.error_description) {
            conn.onError({
                type: _code.WEBIM_CONNCTION_LOAD_CHATROOM_ERROR,
                msg: res.error_description,
                data: res,
                xhr: xhr
            });
        }
    };

    var pageInfo = {
        pagenum: parseInt(options.pagenum) || 1,
        pagesize: parseInt(options.pagesize) || 20
    };
    // 想要实现群组列表，修改对应接口即可
    var opts = {
        url: apiUrl + '/' + orgName + '/' + appName + '/chatrooms',
        dataType: 'json',
        type: 'GET',
        header: {'Authorization': 'Bearer ' + token},
        data: pageInfo,
        success: suc || _utils.emptyfn,
        fail: error || _utils.emptyfn
    };
    wx.request(opts);
} else {
    conn.onError({
        type: _code.WEBIM_CONNCTION_TOKEN_NOT_ASSIGN_ERROR
    });
}

chatroom
从本地缓存中获取聊天记录，并展示
// 环信demo 发送消息

sendMessage: function () {

    if (!this.data.userMessage.trim()) return;


    var that = this
    // //console.log(that.data.userMessage)
    // //console.log(that.data.sendInfo)
    var myName = wx.getStorageSync('myUsername')
    var id = WebIM.conn.getUniqueId();
    var msg = new WebIM.message('txt', id);
    msg.set({
        msg: that.data.sendInfo,
        to: that.data.yourname,
        roomType: false,
        success: function (id, serverMsgId) {
            console.log('send text message success')
        }
    });
    // //console.log(msg)
    console.log("Sending textmessage")
    msg.body.chatType = 'singleChat'; // 群组聊天 groupRoom
    WebIM.conn.send(msg.body);
    // 消息发送完成

    if (msg) {
        var value = WebIM.parseEmoji(msg.value.replace(/\n/mg, '')) // 环信表情处理
        var time = WebIM.time()
        var msgData = {
            info: {
                to: msg.body.to
            },
            username: that.data.myName,
            yourname: msg.body.to,
            msg: {
                type: msg.type,
                data: value
            },
            style: 'self',
            time: time,
            mid: msg.id
        }
        that.data.chatMsg.push(msgData)
        // console.log(that.data.chatMsg)
        
        // 存储聊天记录 
        // 注： 单独单聊天 key 对方环信uin+自己的uin
        // 注： 群组聊天 key 群组id\聊天室id+对方环信uin+自己的uin
        wx.setStorage({
            key: that.data.yourname + myName,
            data: that.data.chatMsg,
            success: function () {
                //console.log('success', that.data)
                that.setData({
                    chatMsg: that.data.chatMsg,
                    emojiList: [],
                    inputMessage: ''
                })
                setTimeout(function () {
                    that.setData({
                        toView: that.data.chatMsg[that.data.chatMsg.length - 1].mid
                    })
                }, 100)
            }
        })
        that.setData({
            userMessage: ''
        })
    }
},

// 环信demo 收到消息
receiveMsg: function (msg, type) {
var that = this
var myName = wx.getStorageSync(‘myUsername’)
if (msg.from == that.data.yourname || msg.to == that.data.yourname) {
if (type == ‘txt’) {
var value = WebIM.parseEmoji(msg.data.replace(/\n/mg, ‘’))
} else if (type == ‘emoji’) {
var value = msg.data
} else if(type == ‘audio’){
// 如果是音频则请求服务器转码
console.log('Audio Audio msg: ', msg);
var token = msg.accessToken;
console.log('get token: ', token)
var options = {
url: msg.url,
header: {
‘X-Requested-With’: ‘XMLHttpRequest’,
‘Accept’: ‘audio/mp3’,
‘Authorization’: 'Bearer ’ + token
},
success: function(res){
console.log(‘downloadFile success Play’, res);
// wx.playVoice({
// filePath: res.tempFilePath
// })
msg.url = res.tempFilePath
var msgData = {
info: {
from: msg.from,
to: msg.to
},
username: ‘’,
yourname: msg.from,
msg: {
type: type,
data: value,
url: msg.url
},
style: ‘’,
time: time,
mid: msg.type + msg.id
}

                    if (msg.from == that.data.yourname) {
                        msgData.style = ''
                        msgData.username = msg.from
                    } else {
                        msgData.style = 'self'
                        msgData.username = msg.to
                    }

                    var msgArr = that.data.chatMsg;
                    msgArr.pop();
                    msgArr.push(msgData);

                    that.setData({
                        chatMsg: that.data.chatMsg,
                    })
                    console.log("New audio");
                },
                fail: function(e){
                    console.log('downloadFile failed', e);
                }
            };
            console.log('Download');
            wx.downloadFile(options);
        }
        //console.log(msg)
        //console.log(value)
        var time = WebIM.time()
        var msgData = {
            info: {
                from: msg.from,
                to: msg.to
            },
            username: '',
            yourname: msg.from,
            msg: {
                type: type,
                data: value,
                url: msg.url
            },
            style: '',
            time: time,
            mid: msg.type + msg.id
        }
        console.log('Audio Audio msgData: ', msgData);
        if (msg.from == that.data.yourname) {
            msgData.style = ''
            msgData.username = msg.from
        } else {
            msgData.style = 'self'
            msgData.username = msg.to
        }
        //console.log(msgData, that.data.chatMsg, that.data)
        that.data.chatMsg.push(msgData)

        // 存储聊天记录 
        // 注： 单独单聊天 key 对方环信uin+自己的uin
        // 注： 群组聊天 key 群组id\聊天室id+对方环信uin+自己的uin

        wx.setStorage({
            key: that.data.yourname + myName,
            data: that.data.chatMsg,
            success: function () {
                if(type == 'audio')
                    return;
                //console.log('success', that.data)
                that.setData({
                    chatMsg: that.data.chatMsg,
                })
                setTimeout(function () {
                    that.setData({
                        toView: that.data.chatMsg[that.data.chatMsg.length - 1].mid
                    })
                }, 100)
            }
        })
    }
},

环信聊天页面，聊天数据全部存储在缓存当中，跟进聊天类型的不同，主要需要调整缓存的key。详情如下：

单对单聊天对方uin+自己的uin
群组聊天（针对某个商品，不需要好友关系，只需要临时聊天）群组id+对方uin+自己的uin
聊天室（同群组聊天）

问题大杂烩
群组聊天缓存如何存储？
答：缓存key 设置为群组id+对方uin+自己的uin
聊天时，如何在聊天中携带扩展信息
答：消息内容中，ext 支持用户自定义参数传递

var option = {
  msg: data.userMessage.trim(),          // 消息内容
  to: data.groupId,            // 接收消息对象(聊天室id)
  roomType: true,
  chatType: 'groupRoom',
  from: data.myuin,
  ext: {
   //todo 需要补充的字符哦
  },
  success: function () {
    console.log('send room text success');
  },
  fail: function () {
    console.log('failed');
  }
};