拍拍二手闲置平台,可以将自己的闲置物品进行转让或者捐赠。想和卖家达成共识就需要涉及IM聊天。拍拍二手闲置平台目前接入的是环信IM聊天。下面我将从三个阶段带大家玩转环信IM会话。

1.jpg

前期

初识IM聊天

带着问题去调研

  • 必须接入环信吗?除了环信是否可以接入其他即时通信?

  • 环信目前有哪些功能呢?支持微信小程序吗?

  • 如何接入小程序呢?

调研分析

  1. 必须接入环信吗?除了环信是否可以接入其他即时通信?

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

  1. 环信目前有哪些功能呢?支持微信小程序吗?
    错误想法: 环信就是做im聊天的,咱们上去按照接入文档,开发就能搞定!!!

这种想法是很致命的。在所有的第三方组件接入中,如果我们不能跳出来看待问题,只是为了完成任务而完成任务。那么我们永远是最底层的低级码农。
环信目前是同行业里面做的算不错的。那么他的官网、接入规范都应该有的。微信小程序也是支持的。在后面小编会带领大家一切怎么去阅读一个官网

  1. 如何接入小程序?

接入小程序是否需要申请一个账号呢?我直接运行他们的demo可以吗? 怎么去测试呢? 此时我们可以有很多的猜想。我认为在开始接入之前我们应该很好的进行一些思考,答案显而易见。

环信接入思考篇

快即时慢

在工作中,大家会经常遇到第三方组件的接入。当接收到任务后,为了尽快完成任务。上来就google,找攻略,找技巧。往往认为这样做速度是最快的。结果适得其反,做了很多无用的功。我们意识中的快,结果却变成了慢

慢即时快

1.jpg

逆向思维: 任何一个第三方的组件,特别是一个大点的平台,他们为了推出自己的产品,一定会有各种各样的功能支持,接入文档说明。我们放慢速度,将这些资源用上半天的时间进行简单的梳理。后期的开发进度会有很大的提升。
上图是我在接入环信Im后进行的反思。因为在接入环信之前,其他团队成员用了很长的时间联调。假如他们在接入环信聊天之前,了解环信拥有自己的后台,可以直接给用户端发送测试消息;可以直接创建用户、创建聊天室、创建群组。他们还会花费那么久的时间去联调吗?完全不用依赖服务端。不用依赖ios,依赖android。自己使用环信后台,轻轻松松完成各种测试。

环信接入

  1. 环信官网注册自己的即时通讯云,并登陆后台

2.jpg



2.创建自己的应用,并记录关键信息

1.png

以下是关键信息哦!!!

2.png

备注:

  1. 应用标识 应用接入时会使用

  2. IM 用户 可以创建、删除用户、发送消息

  3. 群组 可以创建、删除群组信息、发送消息

  4. 聊天室 可以创建、删除聊天室、发送消息
    tip 通过这个后台管理系统,就可以玩转环信的接入测试了。

  1. 从环信下载小程序demo,替换 appkey 进行联调测试

    3.png

  2. 测试走起

  1. 用户测试 在环信后台创建用户,在小程序端登录 (用户demo1 密码:123456)

    4.png

  2. 一对一会话测试
    ① 在环信后台创建用户demo2
    ② 点击操作,查看用户好友将demo1和demo2 添加为好友。
    ③ 在小程序端用demo1给demo2发送测试消息。
    ④ 退出demo1用户,登录demo2查看是否会接收到demo1发送的会话

    5.png


由于环信工程师们相信码农的实力,在群组测试和聊天室测试这块为大家留下了想象空间。demo 中群组测试和聊天室测试为明确写出。让我继续带大家飞

  1. 群组测试
    ① 创建群组记录群组id,并给群组添加成员(demo2)

    6.png

    ② 环信后台给群组发送测试消息

7.png

③ 控制台能收到群组测试消息,怎么展示呢? 请阅读源码解析篇

4.聊天室测试
① 创建聊天室记录聊天室id,将demo1 设置为超级管理员,demo2设置为管理员
② 聊天室这里没有聊天室消息的发送。请阅读源码解析篇

通过以上4个简单的测试,android、ios、h5、小程序的聊天测试均可以参照以上4点进行顺利的测试。初期就此结束。下面带代价进行源码的解析

中期

看源码前期思考

8.png

核心源码阅读

9.png

以上是环信sdk 基础代码结构。 通过简单阅读会发现:

  1. 环信的scoket 通信也使用了微信小程序暴露的scoket 通信 (猜想 android、ios 其他端也有对应的scoket通信)

  2. 环信的api包装在connection.js 组件中,如果某些api没有,咱们可以扩展connection 中的方法

环信核心代码阅读完成后,发现没有涉及到缓存。看来缓存的处理是在对应的业务逻辑中。

设想:

  1. 消息应该在哪里缓存

  2. 哪里进行会话链接的监听注册

环信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。详情如下:

  1. 单对单聊天 对方uin+自己的uin

  2. 群组聊天(针对某个商品,不需要好友关系,只需要临时聊天) 群组id+对方uin+自己的uin

  3. 聊天室(同群组聊天)

问题大杂烩

  1. 群组聊天缓存如何存储?

答: 缓存key 设置为 群组id+对方uin+自己的uin

  1. 聊天时,如何在聊天中携带扩展信息

答: 消息内容中,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');
  }
};```
  1. 会话列表如何实现?

答: 通过接口获取环信的群组列表,通过自己的服务器端补全对应的会话信息。

回顾

整个环信接入,整体围绕 假设-->猜想-->实践完成的。仔细阅读官网http://www.easemob.com,会为大家节约很多时间



作者:贾慧斌
链接:https://www.jianshu.com/p/8919316d26b8
来源:简书