用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

3

主题

3

帖子

24

积分

攻城狮

Rank: 2

积分
24
2019-5-30 16:09:15 现实与理想 攻城狮 楼主 02214
拍拍二手闲置平台,可以将自己的闲置物品进行转让或者捐赠。想和卖家达成共识就需要涉及IM聊天。拍拍二手闲置平台目前接入的是环信IM聊天。下面我将从三个阶段带大家玩转环信IM会话。
前期初识IM聊天带着问题去调研
  • 必须接入环信吗?除了环信是否可以接入其他即时通信?
  • 环信目前有哪些功能呢?支持微信小程序吗?
  • 如何接入小程序呢?
调研分析
  • 必须接入环信吗?除了环信是否可以接入其他即时通信?
现状: 微信小程序API 提供了WebSocket 方法。
扩展: 如果服务端支持scoket通信,ios\android\H5 也全都支持Im聊天了
备注:专业第三方Im有融云、环信、云之讯等,底层实现均是基于scoket 通信。明白scoket通信后也可以自己写即时通信。
  • 环信目前有哪些功能呢?支持微信小程序吗?
    错误想法: 环信就是做im聊天的,咱们上去按照接入文档,开发就能搞定!!!
这种想法是很致命的。在所有的第三方组件接入中,如果我们不能跳出来看待问题,只是为了完成任务而完成任务。那么我们永远是最底层的低级码农。
环信目前是同行业里面做的算不错的。那么他的官网、接入规范都应该有的。微信小程序也是支持的。在后面小编会带领大家一切怎么去阅读一个官网
  • 如何接入小程序?
接入小程序是否需要申请一个账号呢?我直接运行他们的demo可以吗? 怎么去测试呢? 此时我们可以有很多的猜想。我认为在开始接入之前我们应该很好的进行一些思考,答案显而易见。
环信接入思考篇快即时慢在工作中,大家会经常遇到第三方组件的接入。当接收到任务后,为了尽快完成任务。上来就google,找攻略,找技巧。往往认为这样做速度是最快的。结果适得其反,做了很多无用的功。我们意识中的快,结果却变成了慢
慢即时快


image

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




    image

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




    image


    以下是关键信息哦!!!




    image


备注:
  • 应用标识 应用接入时会使用
  • IM 用户 可以创建、删除用户、发送消息
  • 群组 可以创建、删除群组信息、发送消息
  • 聊天室 可以创建、删除聊天室、发送消息
    tip 通过这个后台管理系统,就可以玩转环信的接入测试了。
  • 从环信下载小程序demo,替换 appkey 进行联调测试




    image

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




    image

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




    image



由于环信工程师们相信码农的实力,在群组测试和聊天室测试这块为大家留下了想象空间。demo 中群组测试和聊天室测试为明确写出。让我继续带大家飞
  • 群组测试
    ① 创建群组记录群组id,并给群组添加成员(demo2)




    image


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




    image


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


image

核心源码阅读


image

以上是环信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.name + myName) != '') {                array.push(wx.getStorageSync(member.name + myName)[wx.getStorageSync(member.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');  }};```
  • 会话列表如何实现?
答: 通过接口获取环信的群组列表,通过自己的服务器端补全对应的会话信息。
回顾整个环信接入,整体围绕 假设-->猜想-->实践完成的。仔细阅读官网,会为大家节约很多时间。




发新帖
    您需要登录后才可以回帖 登录 | 立即注册