APICloud平台的融云2.0优化
来源：互联网 发布：金蝶软件年销售额 编辑：程序博客网 时间：2024/05/16 10:00
最近一段时间博主忙于各种问题,所以一直没有更新融云集成的文章.之前的文章只是刚刚集成融云后,做的简单的记录,所以代码中存在很多bug和需要优化的地方.在此也谢谢看我文章的开发者对我的支持!博主也是刚刚起步,希望在今后的道路上与大家一同成长,有什么问题还望多多指正!接下来我们具体谈一谈需要优化的地方吧!
一.融云的init,connect等代码
融云的init,connect以及setOnReceiveMessageListener方法的代码要放在index页面完成.前两个方法执行完后,就要编写setOnReceiveMessageListener方法了.切记,APP中收到的消息是以api.sendEvent这个方法通信到其他页面的.
rong.setOnReceiveMessageListener(function (ret, err) { /****1.融云的消息以sendEvent的方式通信到其他页面****/ api.sendEvent({ name: 'rongMsg', extra: { msgNoti: ret.result.message } }); var notiMsg; var name = getNickNameA($api.getStorage("name" + ret.result.message.senderUserId)); //如果有聊过天 if (name == "匿名者") { name = "有位新朋友"; } /*****2.判断消息类型********/ if (ret.result.message.objectName == "RC:TxtMsg") { if (!(ret.result.message.content.text.indexOf("<img"))) { notiMsg = name + "发来了一个表情，快去看看吧"; } else { notiMsg = name + ":" + ret.result.message.content.text; } } else { notiMsg = name + "发来了一张图片，快去看看吧"; } //在手机通知栏进行状态栏通知 api.notification({ notify: { content: notiMsg } }, function (ret, err) {// console.log(JSON.stringify(ret));// $api.setStorage("notiID" + ret.result.message.senderUserId, ret.id); }); });在聊天界面通过如下代码接收event方法传递来的消息.//接收信息 api.addEventListener({ name: 'rongMsg' }, function (ret, err) {// alert(JSON.stringify(ret)); var msg; msg = ret.value;// console.log(JSON.stringify(msg.msgNoti)); var tag; var para; if (msg.msgNoti.objectName == "RC:TxtMsg") { tag = "TxtMsg"; } else if (msg.msgNoti.objectName == "RC:ImgMsg") { tag = "ImgMsg"; } else if (msg.msgNoti.objectName == "RC:VcMsg") { tag = "VcMsg"; } else if (msg.msgNoti.objectName == "RC:LBSMsg") { tag = "LBSMsg"; } para = { firstSendType: "aui-chat-receiver", secondSendType: "aui-chat-receiver-avatar", thirdSendType: "aui-chat-receiver-cont", fourthSendType: "aui-chat-left-triangle", content: msg.msgNoti.content, tag: tag, receivedTime: getTrueTime(msg.msgNoti.receivedTime), messageDirection: "RECEIVE", receiveIcon: receiver_icon }; if (!timeTag) { para.receivedTime = ""; } //与他聊天 if (targetId == msg.msgNoti.targetId) { //通过doT进行设置 //如果是文字 if (tag == "TxtMsg") { var interText = doT.template($("#text-message-content-template").text()); $("#message-content").append(interText(para)); } if (tag == "ImgMsg") { var interText = doT.template($("#img-message-content-template").text()); $("#message-content").append(interText(para)); } goBottom(); timeTag = false; } });二.出现键盘聊天frame页面高度的变化
在项目中的聊天键盘用到的是UIChatBox控件,这里我们可以通过监听他的状态从而实现对frame高度的改变.<span style="font-size:18px;">/******1.监听键盘聊天框键盘弹出,用于调整聊天窗口高度*****/ //move（输入框所在区域弹动事件） 就是输入框收起和弹出变化 UIChatBox.addEventListener({ target: 'inputBar', name: 'move' }, function (ret, err) { //api.toast({msg: JSON.stringify(ret),location: 'top'}); //50 //api.toast({msg: JSON.stringify(err),location:'middle'}); //283 //点击输入框时会话界面高度发生变化 setChatFrameByInputMove(ret.inputBarHeight, ret.panelHeight); });</span>function setChatFrameByInputChange(inputBarHeight, panelHeight) { api.setFrameAttr({ name: 'chat_frm', rect: { x: 0, y: header_h, w: api.winWidth, h: api.winHeight - header_h - inputBarHeight - panelHeight - 35, }, }); setTimeout('setBottom()', 200); }//进入到底部 function setBottom() { api.sendEvent({ name: 'chatFrm_goBottom', extra: {} }); }
上述代码可以实现出现聊天键盘,改变聊天frame的高度.我的思路是这样,大家有其他的方法可以评论中贴出来一起讨论.三.优化聊天文字信息中的表情符号
整个聊天界面使用的是AUI中的聊天UI,在此感谢流浪男提供了这么好的前端UI框架!之后在sendTextMessage方法中,将文本用transText方法进行转换.var sourcePath = "widget://image/emotion";//表情存放目录 var emotionData;//存储表情 //表情符转换为表情 function transText(text, imgWidth, imgHeight) { //表情大小定义为18*18 var imgWidth = 18; var imgHeight = 18; var regx = /\[(.*?)\]/gm; var textTransed = text.replace(regx, function (match) { var imgSrc = emotionData[match]; if (!imgSrc) { /* 说明不对应任何表情,直接返回即可.*/ return match; } var img = "<img src='" + imgSrc + "' width='" + imgWidth + "' height ='" + imgHeight + "' />"; return img; }); return textTransed; } /*获取所有表情图片的名称和真实URL地址，以JSON对象形式返回。其中以表情文本为 属性名，以图片真实路径为属性值*/ function getImgsPaths(sourcePathOfChatBox, callback) { var jsonPath = sourcePathOfChatBox + "/emotion.json";//表情的JSON数组 api.readFile({ path: jsonPath }, function (ret, err) { if (ret.status) { var emotionArray = JSON.parse(ret.data); var emotion = {}; for (var i in emotionArray) { var emotionItem = emotionArray[i]; var emotionText = emotionItem["text"]; var emotionUrl = "../image/emotion/" + emotionItem["name"] + ".png"; emotion[emotionText] = emotionUrl; } /*把emotion对象 回调出去*/ if ("function" === typeof(callback)) { callback(emotion); } } }); }首先要先将表情存到制定路径下widget://image/emotion";//表情存放目录<span style="white-space:pre"></span>rong.sendTextMessage({ conversationType: 'PRIVATE', targetId: targetId, text: transText(msg_txt, 15, 15), extra: '' }, function (ret, err) {<span style="white-space:pre"></span>});这样就实现了表情的发送了.四.一些开发者提出的问题答疑
1.msgObj变量msgObj是一个全局变量,用于接收新的消息.因为优化了消息接收机制,所以升级的版本这个变量已经不存在.2.关于时间戳的添加时间戳的添加实现的思路是这样的:每一条消息,融云都会返回一个时间,首先将这个时间转换成hh:mm的形式并保存,如果再接受的新消息与之前保存的时间相差3分钟(这个时间间隔自己设定),那么通过time_flag这个bool值来判断是否在聊天界面加上时间戳.3.关于消息接受方接受时间的延迟 (16-11-17补充)很多朋友都遇到了这个问题,APP 关掉之后收不到消息发送方发出的消息.我觉得(仅代表个人观点)因为融云的初始化方法是在程序打开后实现的,而消息接受的前提是 init 方法与 connect 都正确执行.这一点与原生 app 有着不同.在 iOS 原生 APP 中,消息还可以通过远程通知的方式发送给接受者.即使关掉 app,保证网络环境畅通的状态下仍然可以收到消息.消息接受,发送的思路就是这样,文章随着项目的推进还会不断更新,谢谢大家的关注与支持!有什么不对的地方欢迎批评指正!我的微信:656593047 有什么问题一起探讨!1 0
- APICloud平台的融云2.0优化
- APICloud平台的融云2.0集成
- APICLOUD平台初体验（一个任务系统的开发）
- 网易云音乐APP（基于APICloud平台）
- ApiCloud的云api探究之旅
- apicloud融云模块文档笔记
- 跨平台APP----对Cordova,APPCan,DCloud,APICloud四大平台的分析（系列二）
- 跨平台APP----对Cordova,APPCan,DCloud,APICloud四大平台的分析
- 跨平台APP----对Cordova,APPCan,DCloud,APICloud四大平台的分析
- 跨平台APP----对Cordova,APPCan,DCloud,APICloud四大平台的分析
- 跨平台APP----对Cordova,APPCan,DCloud,APICloud四大平台的分析
- 跨平台APP----对Cordova,APPCan,DCloud,APICloud四大平台的分析
- ApiCloud开发的注意事项
- APICloud的ajax请求
- APICloud
- APICloud
- 【先锋】APICloud是一朵面对移动开发的PaaS云
- APICloud 的版本更新怎么用，云修复怎么用？
- HTTP协议
- redis命令行
- Android之Fragment懒加载分析
- 【代码笔记】iOS-旋转的风扇
- 前景检测算法（六）--平均背景原理
- APICloud平台的融云2.0优化
- 共享一个phpstrom10破解版安装包
- android 6.0 healthd vold接收uevent
- iOS数据持久化1
- javascript基础：动态加载脚本和样式
- idea 使用tomcat打指定包到tomcat
- Android系统启动过程
- 帝国CMS修改[!----morepic--] 图集默认显示模板格式
- Windows驱动开发之线程与同步事件
原创粉丝点击
热门IT博客
