| 拍拍二手闲置平台，可以将自己的闲置物品进行转让或者捐赠。想和卖家达成共识就需要涉及IM聊天。拍拍二手闲置平台目前接入的是环信IM聊天。下面我将从三个阶段带大家玩转环信IM会话。 前期初识IM聊天带着问题去调研
现状: 微信小程序API 提供了WebSocket 方法。
这种想法是很致命的。在所有的第三方组件接入中，如果我们不能跳出来看待问题，只是为了完成任务而完成任务。那么我们永远是最底层的低级码农。
接入小程序是否需要申请一个账号呢？我直接运行他们的demo可以吗？ 怎么去测试呢? 此时我们可以有很多的猜想。我认为在开始接入之前我们应该很好的进行一些思考，答案显而易见。环信接入思考篇快即时慢在工作中，大家会经常遇到第三方组件的接入。当接收到任务后，为了尽快完成任务。上来就google，找攻略，找技巧。往往认为这样做速度是最快的。结果适得其反，做了很多无用的功。我们意识中的快，结果却变成了慢 慢即时快  image 逆向思维： 任何一个第三方的组件，特别是一个大点的平台，他们为了推出自己的产品，一定会有各种各样的功能支持，接入文档说明。我们放慢速度，将这些资源用上半天的时间进行简单的梳理。后期的开发进度会有很大的提升。 上图是我在接入环信Im后进行的反思。因为在接入环信之前，其他团队成员用了很长的时间联调。假如他们在接入环信聊天之前，了解环信拥有自己的后台，可以直接给用户端发送测试消息;可以直接创建用户、创建聊天室、创建群组。他们还会花费那么久的时间去联调吗?完全不用依赖服务端。不用依赖ios，依赖android。自己使用环信后台，轻轻松松完成各种测试。 环信接入
备注：
由于环信工程师们相信码农的实力，在群组测试和聊天室测试这块为大家留下了想象空间。demo 中群组测试和聊天室测试为明确写出。让我继续带大家飞 通过以上4个简单的测试，android、ios、h5、小程序的聊天测试均可以参照以上4点进行顺利的测试。初期就此结束。下面带代价进行源码的解析 中期看源码前期思考  image 核心源码阅读  image 以上是环信sdk 基础代码结构。 通过简单阅读会发现： 环信核心代码阅读完成后，发现没有涉及到缓存。看来缓存的处理是在对应的业务逻辑中。 设想：
会话 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。详情如下：
答： 缓存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'); }};```
答： 通过接口获取环信的群组列表，通过自己的服务器端补全对应的会话信息。回顾整个环信接入，整体围绕 假设-->猜想-->实践完成的。仔细阅读官网，会为大家节约很多时间。 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
