APICloud平台的融云2.0优化

最新推荐文章于 2021-05-30 07:13:59 发布

原创最新推荐文章于 2021-05-30 07:13:59 发布 · 置顶 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

APICloud 专栏收录该内容

5 篇文章

订阅专栏

 最近一段时间博主忙于各种问题,所以一直没有更新融云集成的文章.之前的文章只是刚刚集成融云后,做的简单的记录,所以代码中存在很多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框架!

    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";//表情存放目录

之后在sendTextMessage方法中,将文本用transText方法进行转换.

<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 有什么问题一起探讨!