[技術分享] 融雲開發案例核心代碼分享


該套代碼為從項目案例中提取的,可以直接拿去使用,主要包含了單聊及消息的處理。主要分三個頁面處理完成,入口首頁(index)、消息列表頁(message)、會話頁面(chat)
index.html 頁面(app入口頁面)

 

var rong;
apiready=function(){
    rong = api.require('rongCloud2');
    //判斷用戶登錄成功后執行方法
    rongCloud();
}

function rongCloud(){
    //初始化
    init();
    //消息的監聽,監聽到新消息后將消息廣播出去,在會話頁面監聽接收並判斷
    setOnReceiveMessageListener();
    //連接融雲服務器
    connect();
    //監聽獲取某一會話最新消息記錄
    api.addEventListener({
        name: 'getLatestMessages'
    }, function(ret){
        if(ret && ret.value){
            var value = ret.value;
            getLatestMessages(value.targetId,value.type);
        }
    });
    //監聽獲取某一會話歷史消息記錄
    api.addEventListener({
        name: 'getHistoryMessages'
    }, function(ret){
        if(ret && ret.value){
            var value = ret.value;
            getHistoryMessages(value.targetId,value.type,value.oldestMessageId);
        }
    });
    //監聽發送新消息,監聽完成后將消息再次廣播出去,列表級會話頁面監聽接收
    api.addEventListener({
        name:'sendMessage'
    },function(ret){
        if(ret && ret.value){
            var data = ret.value;
            //目標id,消息內容,消息類型
            sendMessage(data.targetId,data.conversationType,data.objectName,data.message);
        }
    })
}

//初始化融雲
    function init(){
        rong.init(function(ret, err){
        });
    }

/**
*全局消息監聽
*整個app項目中,所有的消息監聽事件都在此方法中完成,如果正在會話,監聽到消息后通過api.sendEvent方法廣播出去
*/
function setOnReceiveMessageListener(){
    rong.setOnReceiveMessageListener(function (ret, err) {
        if(ret){
            //將監聽到的消息廣播出去,在會話頁面接收
            api.sendEvent({
                name: 'setOnReceiveMessageListener',
                extra: {result:ret.result}
            });
            switch(ret.result.message.objectName){
                //文字消息
                case 'RC:TxtMsg':
                   var notificationMessage = ret.result.message.content.text;
                break;
                //圖片消息
                case 'RC:ImgMsg':
                    var notificationMessage = '[圖片]';
                break;
                //語音消息
                case 'RC:VcMsg':
                    var notificationMessage = '[語音]';
                break;
            }
            
        }
    })
}

/**
*連接融雲服務器
*連接成功后使用getConversationList獲取會話列表
*/
function connect(){
    //根據本地用戶id,從服務器端獲取用戶融雲的token
    var token = $api.getStorage('rongCloudToken');
    rong.connect({
        token: ''+token+''
    },function(ret, err){
            if (ret.status == 'success'){
                //連接成功后獲取會話列表
                getConversationList();
            }
    });
}

//獲取會話列表
function getConversationList(){
    rong.getConversationList(function (ret, err) {
        if(ret.status=='success'){
            //廣播會話列表事件
            api.sendEvent({
                name: 'getConversationList',
                extra: {result:ret.result,status:ret.status}
            });
        }
    })
}

//獲取某一會話的最新消息記錄
function getLatestMessages(targetId,type){
    rong.getLatestMessages({
            conversationType: ''+type+'',
            targetId: ''+targetId+'',
            count: 20
        }, function (ret, err) {
            if(ret.status=='success'){
                //將獲得的歷史消息廣播出去,在會話頁面接收
                api.sendEvent({
                    name: 'backLatestMessages',
                    extra: {result:ret.result,status:ret.status}
                });
            }
    })
}

//獲取某一會話歷史消息記錄
function getHistoryMessages(targetId,type,oldestMessageId){
    rong.getHistoryMessages({
            conversationType: ''+type+'',
            targetId: ''+targetId+'',
            oldestMessageId: ''+oldestMessageId+'',
            count: 20
        }, function (ret, err) {
            if(ret.status=='success'){
                //將獲得的歷史消息廣播出去,在會話頁面接收
                api.sendEvent({
                    name: 'backHistoryMessages',
                    extra: {result:ret.result,status:ret.status}
                });
            }
    })
}

//發送消息
function sendMessage(targetId,conversationType,objectName,message){
    switch(objectName){
        //文字消息
        case 'RC:TxtMsg':
            rong.sendTextMessage({
                conversationType: ''+conversationType+'',
                targetId: ''+targetId+'',
                text: ''+message+'',
                extra: ''
            }, function (ret, err) {
                if (ret.status == 'prepare'){
                    //發送准備,廣播出去,在會話頁面監聽接收
                    api.sendEvent({
                        name: 'backSendMessage',
                        extra: {result:ret.result}
                    });
                    insertMessage(targetId,conversationType,objectName,ret.result);
                }else if (ret.status == 'success'){
                    //發送成功的處理
                }else if (ret.status == 'error'){
                    //發送失敗的處理
                    //api.toast({ msg: err.code });
                }
            })
        break;
        //圖片消息
        case 'RC:ImgMsg':
            rong.sendImageMessage({
                    conversationType: ''+conversationType+'',
                    targetId: ''+targetId+'',
                    imagePath: ''+message+'',
                    extra: ''
                }, function (ret, err) {
                    if (ret.status == 'prepare'){
                        //發送准備,廣播出去,在會話頁面監聽接收
                        api.sendEvent({
                            name: 'backSendMessage',
                            extra: {result:ret.result}
                        });
                        insertMessage(targetId,conversationType,objectName,ret.result);
                    }else if (ret.status == 'progress'){
                        //廣播圖片的進度
                        
                    }else if (ret.status == 'success'){
                        api.sendEvent({
                            name: 'backSendMessageSuccess',
                            extra: {messageId:ret.result.message.messageId}
                        });
                    }else if (ret.status == 'error'){
                        api.toast({ msg: err.code });
                    }
            });
        break;
        //語音消息
        case 'RC:VcMsg':
            rong.sendVoiceMessage({
                    conversationType: ''+conversationType+'',
                    targetId: ''+targetId+'',
                    voicePath: ''+message.path+'',
                    duration: ''+message.duration+'',
                    extra: ''
                }, function (ret, err) {
                    if (ret.status == 'prepare'){
                        //發送准備,廣播出去,在會話頁面監聽接收
                        api.sendEvent({
                            name: 'backSendMessage',
                            extra: {result:ret.result}
                        });
                        insertMessage(targetId,conversationType,objectName,ret.result);
                    }else if (ret.status == 'success'){
                        api.toast({ msg: ret.result.message.messageId });
                    }
                    else if (ret.status == 'error'){
                        api.toast({ msg: err.code });
                    }
                }
            );
        break;
    }
    
}

 

消息列表頁核心代碼

HTML
<div class="aui-content">
        <ul class="aui-user-view" id="messageList"></ul>
 </div>

JS核心代碼
apiready=function(){
    //請求獲取會話列表
    api.sendEvent({
        name: 'requestConversationList'
    });
    //監聽新消息
    api.addEventListener({
        name: 'setOnReceiveMessageListener'
    }, function(ret, err){
        if(ret && ret.value){
            var result = ret.value.result;
            if($api.byId("target-"+result.message.targetId)){
                //如果存在更新消息內容
                //此處也定義個id,更消息內容類型做個判斷
                switch(result.message.objectName){
                    //文字消息
                    case 'RC:TxtMsg':
                       $api.text($api.byId("targetMessage-"+result.message.targetId),result.message.content.text);
                    break;
                    //圖片消息
                    case 'RC:ImgMsg':
                        $api.text($api.byId("targetMessage-"+result.message.targetId),"[圖片]");
                    break;
                    //語音消息
                    case 'RC:VcMsg':
                        $api.text($api.byId("targetMessage-"+result.message.targetId),"[語音]");
                    break;
                }
                //將當前消息容器移動到頂部
                if(result.message.conversationType!='CUSTOMER_SERVICE' && $api.dom("#messageList > li")){
                    $api.byId("messageList").insertBefore($api.byId("target-"+result.message.targetId),$api.byId("messageList").childNodes[0]);
                }
            }else{
                //如果不存在寫入
                var html='';
                if(result.message.conversationType=='CUSTOMER_SERVICE'){
                }else if(result.message.conversationType=='PRIVATE'){
                    html += '<li class="aui-user-view-cell aui-img" id="target-'+result.message.targetId+'" tapmode onclick="openChat('+result.message.targetId+')">';
                    html += '<img class="aui-img-object aui-pull-left" src="../../image/noavatar.gif" id="avatar-'+result.message.targetId+'">';
                    html += '<div class="aui-img-body aui-arrow-right">'
                    html += '<span id="realname-'+result.message.targetId+'"></span>';
                    //此處也定義個id,更消息內容類型做個判斷
                    switch(result.message.objectName){
                        //文字消息
                        case 'RC:TxtMsg':
                            html += '<p class="aui-ellipsis-1" id="targetMessage-'+result.message.targetId+'">'+result.message.content.text+'</p>';
                        break;
                        //圖片消息
                        case 'RC:ImgMsg':
                            html += '<p class="aui-ellipsis-1" id="targetMessage-'+result.message.targetId+'">[圖片]</p>';
                        break;
                        //語音消息
                        case 'RC:VcMsg':
                            html += '<p class="aui-ellipsis-1" id="targetMessage-'+result.message.targetId+'">[語音]</p>';
                        break;
                    }
                    
                    html += '</div>';
                    html += '</li>';
                    $api.prepend($api.byId("messageList"),html);
                    getUserInfo(result.message.targetId);
                }
                api.parseTapmode();
            }
            
        }
    });
    //監聽會話列表事件 getConversationList
    api.addEventListener({
        name: 'getConversationList'
    }, function(ret, err){
        if(ret && ret.value){
            var status = ret.value.status;
            var result = ret.value.result;
            if(status=='success'){
                //獲取成功后將消息內容插入至容器
                var targetIds='',
                    html='',
                    messageList = result;
                for(var i in messageList){
                    if(messageList[i].conversationType=='CUSTOMER_SERVICE'){
                        $api.text($api.byId("targetMessage-"+messageList[i].targetId),messageList[i].latestMessage.text);
                    }else if(messageList[i].conversationType=='PRIVATE'){
                        //組裝用戶id,批量獲取用戶信息
                        targetIds += messageList[i].targetId+',';
                        //注意定義容器的id為消息目標id(targetId)
                        html += '<li class="aui-user-view-cell aui-img" id="target-'+messageList[i].targetId+'" tapmode onclick="openChat('+messageList[i].targetId+')">';
                        html += '<img class="aui-img-object aui-pull-left" src="../image/noavatar.gif" id="avatar-'+messageList[i].targetId+'">';
                        html += '<div class="aui-img-body aui-arrow-right">'
                        html += '<span id="realname-'+messageList[i].targetId+'">...</span>';
                        //此處也定義個id,更消息內容類型做個判斷
                        switch(messageList[i].objectName){
                            //文字消息
                            case 'RC:TxtMsg':
                                html += '<p class="aui-ellipsis-1" id="targetMessage-'+messageList[i].targetId+'">'+messageList[i].latestMessage.text+'</p>';
                            break;
                            //圖片消息
                            case 'RC:ImgMsg':
                                html += '<p class="aui-ellipsis-1" id="targetMessage-'+messageList[i].targetId+'">[圖片]</p>';
                            break;
                            //語音消息
                            case 'RC:VcMsg':
                                html += '<p class="aui-ellipsis-1" id="targetMessage-'+messageList[i].targetId+'">[語音]</p>';
                            break;
                        }
                        html += '</div>';
                        html += '</li>';
                    }
                    
                }
                if(targetIds.length>0){
                    //去掉組裝完用戶id的最后符號
                    targetIds = targetIds.substring(0,targetIds.length-1);
                    getUserInfos(targetIds);
                }
                
                $api.append($api.byId("messageList"),html);
                api.parseTapmode();
            }
        }
    })
    //監聽發送的新消息
    api.addEventListener({
        name: 'backSendMessage'
    }, function(ret){
        if(ret && ret.value){
            var result = ret.value.result;
            if($api.byId("targetMessage-"+result.message.targetId)){
                switch(result.message.objectName){
                    //文字消息
                    case 'RC:TxtMsg':
                        $api.text($api.byId("targetMessage-"+result.message.targetId),'我:'+result.message.content.text);
                    break;
                    //圖片消息
                    case 'RC:ImgMsg':
                        $api.text($api.byId("targetMessage-"+result.message.targetId),'我:[圖片]');
                    break;
                    //語音消息
                    case 'RC:VcMsg':
                        $api.text($api.byId("targetMessage-"+result.message.targetId),'我:[語音]');
                    break;
                }
                if(result.message.conversationType!='CUSTOMER_SERVICE'){
                    $api.byId("messageList").insertBefore($api.byId("target-"+result.message.targetId),$api.byId("messageList").childNodes[0]);
                }
            }else{
                //如果不存在寫入
                var html='';
                html += '<li class="aui-user-view-cell aui-img" id="target-'+result.message.targetId+'" tapmode onclick="openChat('+result.message.targetId+')">';
                html += '<img class="aui-img-object aui-pull-left" src="../../image/noavatar.gif" id="avatar-'+result.message.targetId+'">';
                html += '<div class="aui-img-body aui-arrow-right">'
                html += '<span id="realname-'+result.message.targetId+'"></span>';
                //此處也定義個id,更消息內容類型做個判斷
                switch(result.message.objectName){
                    //文字消息
                    case 'RC:TxtMsg':
                        html += '<p class="aui-ellipsis-1" id="targetMessage-'+result.message.targetId+'">'+result.message.content.text+'</p>';
                    break;
                    //圖片消息
                    case 'RC:ImgMsg':
                        html += '<p class="aui-ellipsis-1" id="targetMessage-'+result.message.targetId+'">我:[圖片]</p>';
                    break;
                    //語音消息
                    case 'RC:VcMsg':
                        html += '<p class="aui-ellipsis-1" id="targetMessage-'+result.message.targetId+'">我:[語音]</p>';
                    break;
                }
                
                html += '</div>';
                html += '</li>';
                $api.prepend($api.byId("messageList"),html);
                getUserInfo(result.message.targetId);
                api.parseTapmode();
            }
        }
    })
}

//批量獲取用戶信息
function getUserInfos(userids){
    api.ajax({
        url: '',
        method: 'post',
        timeout: 30,
        dataType: 'json',
        returnAll:false,
        data:{
            values:{
                userids:userids
            }
        }
    },function(ret,err){
        if (ret) {
            for(var i in ret){
                if(ret[i].userid){
                    if(ret[i].avatar){
                        $api.attr($api.byId("avatar-"+ret[i].userid),'src',ret[i].avatar);
                    }
                    
                    $api.text($api.byId("realname-"+ret[i].userid),ret[i].realname);
                }
            }
        }
    });
}
//獲取單個用戶信息
function getUserInfo(userid){
    api.ajax({
        url: '',
        method: 'post',
        timeout: 30,
        dataType: 'json',
        returnAll:false,
        data:{
            values:{
                userid:userid
            }
        }
    },function(ret,err){
        if (ret) {
            if(ret.avatar){
                $api.attr($api.byId("avatar-"+ret.userid),'src',ret.avatar);
            }
            $api.text($api.byId("realname-"+ret.userid),ret.realname);
        }
    });
}

會話(單聊)頁面核心代碼:
結合UIChatBox模塊

 

var myAvatar,
    targetId,targetAvatar,targetNickname,oldestMessageId='-1',
    chatBox,
    sourcePath = "widget://image/emotion",//表情存放目錄
    emotionData;//存儲表情
apiready = function(){
    //從本地數據存貯獲取我的頭像
    myAvatar = $api.getStorage('avatar');
    targetId = api.pageParam.targetId;//傳遞過來的目標用戶id
    targetAvatar = api.pageParam.targetAvatar;//傳遞過來的目標用戶頭像
    targetNickname = api.pageParam.targetNickname;//傳遞過來的目標用戶昵稱
    api.parseTapmode();//優化點擊事件(300)
    //表情圖片處理
    getImgsPaths(sourcePath, function (emotion) {
        emotionData = emotion;
    });
    //獲取最新消息記錄
    getLatestMessages();
    //監聽來自消息列表的新消息
    api.addEventListener({
        name: 'setOnReceiveMessageListener'
    }, function(ret){
        if(ret && ret.value){
            var result = ret.value.result;
            //如果當前消息的目標id等於當前會話目標id,寫入
            if(result.message.targetId==targetId){
                var html = '';
                html += '<div class="aui-chat-receiver" id="message-'+result.message.messageId+'">';
                html += '<div class="aui-chat-receiver-avatar"><img src="'+targetAvatar+'"></div>';
                html += '<div class="aui-chat-receiver-cont">';
                html += '<div class="aui-chat-left-triangle"></div>';
                switch(result.message.objectName){
                    //文字消息
                    case 'RC:TxtMsg':
                        html += '<span>'+transText(result.message.content.text)+'</span>';
                    break;
                    //圖片消息
                    case 'RC:ImgMsg':
                        html += '<span class="aui-chat-img chat-img"><img src="'+result.message.content.thumbPath+'" /></span>';
                    break;
                    //語音消息
                    case 'RC:VcMsg':
                        html += '<div class="aui-chat-status">'+result.message.content.duration+'s</div>';
                        html += '<span tapmode onclick="playVoice(\''+result.message.content.voicePath+'\',\''+result.message.messageId+'\')" ><i class="aui-iconfont aui-icon-sound" id="messageVoice-'+result.message.messageId+'"></i></span>';
                    break;
                }
                
                html += '</div>';
                html += '</div>';
                $api.append($api.byId("messageList"),html);
                api.parseTapmode();
                //容器自動滾動至底部的處理,加個100毫秒演示防止不成功
                setTimeout(function(){
                    window.scrollTo(0,$api.offset($api.byId("messageList")).h);
                },100)
                
            }
        }
    })
    //監聽發送的新消息
    api.addEventListener({
        name: 'backSendMessage'
    }, function(ret){
        if(ret && ret.value){
            var result = ret.value.result;
            //如果當前消息的目標id等於當前會話目標id,寫入
            if(result.message.targetId==targetId){
                var html = '';
                html += '<div class="aui-chat-sender" id="message-'+result.message.messageId+'">';
                html += '<div class="aui-chat-sender-avatar"><img src="'+myAvatar+'"></div>';
                html += '<div class="aui-chat-sender-cont">';
                html += '<div class="aui-chat-right-triangle"></div>';
                switch(result.message.objectName){
                    //文字消息
                    case 'RC:TxtMsg':
                        html += '<span>'+transText(result.message.content.text)+'</span>';
                    break;
                    //圖片消息
                    case 'RC:ImgMsg':
                        html += '<div class="aui-chat-status chat-img" id="messageStatus-'+result.message.messageId+'"><i class="aui-iconfont aui-icon-loading aui-chat-progress"></i></div>';
                        html += '<span class="aui-chat-img"><img src="'+result.message.content.thumbPath+'" /></span>';
                    break;
                    //語音消息
                    case 'RC:VcMsg':
                        //alert(JSON.stringify(ret.value.message.content));
                        html += '<div class="aui-chat-status">'+result.message.content.duration+'s</div>';
                        html += '<span tapmode onclick="playVoice(\''+result.message.content.voicePath+'\',\''+result.message.messageId+'\')"><i class="aui-iconfont aui-icon-sound" id="messageVoice-'+result.message.messageId+'"></i></span>';
                    break;
                }
                
                html += '</div>';
                html += '</div>';
                $api.append($api.byId("messageList"),html);
                api.parseTapmode();
                window.scrollTo(0,$api.offset($api.byId("messageList")).h);
            }
        }
    })
    //監聽發送的新消息是否完成
    api.addEventListener({
        name: 'backSendMessageSuccess'
    }, function(ret){
        if(ret && ret.value){
            if($api.byId("messageStatus-"+ret.value.messageId)){
                $api.remove($api.byId("messageStatus-"+ret.value.messageId));
            }
        }
    })
    //下拉加載歷史消息
    api.setRefreshHeaderInfo({
        visible: true,
        loadingImg: 'widget://image/ptr_pull.png',
        bgColor: '#ffffff',
        textColor: '#ff7372',
        textDown: '下拉加載',
        textLoading: '加載中',
        textUp: '松開加載',
        showTime: false
    }, function(ret, err){
        api.refreshHeaderLoading();
        //發送一個獲取歷史消息的事件
        api.sendEvent({
            name: 'getHistoryMessages',
            extra: {targetId:targetId,type:'PRIVATE',oldestMessageId:oldestMessageId}
        });
        api.refreshHeaderLoadDone();
        //從服務器加載數據,完成后調用api.refreshHeaderLoadDone()方法恢復組件到默認狀態
    });
    //監聽獲取歷史消息
    api.addEventListener({
        name: 'backHistoryMessages'
    }, function(ret){
        if(ret && ret.value.result){
            var result = ret.value.result;
            
            var myUserid = $api.getStorage('userid');
            //重新排序
            var messageList = result.sort(getSortFun('asc', 'sentTime'));
            oldestMessageId  = messageList[0].messageId;
            var html = '';
            for(var i in messageList){
                if(messageList[i].senderUserId==myUserid){
                    //當前發送用戶
                    html += '<div class="aui-chat-sender" id="message-'+messageList[i].messageId+'">';
                    html += '<div class="aui-chat-sender-avatar"><img src="'+myAvatar+'"></div>';
                    html += '<div class="aui-chat-sender-cont">';
                    html += '<div class="aui-chat-right-triangle"></div>';
                }else{
                    html += '<div class="aui-chat-receiver" id="message-'+messageList[i].messageId+'">';
                    html += '<div class="aui-chat-receiver-avatar"><img src="'+targetAvatar+'"></div>';
                    html += '<div class="aui-chat-receiver-cont">';
                    html += '<div class="aui-chat-left-triangle"></div>';
                }
                switch(messageList[i].objectName){
                    //文字消息
                    case 'RC:TxtMsg':
                        html += '<span>'+transText(messageList[i].content.text)+'</span>';
                    break;
                    //圖片消息
                    case 'RC:ImgMsg':
                        html += '<span class="aui-chat-img chat-img"><img src="'+messageList[i].content.thumbPath+'" /></span>';
                    break;
                    //語音消息
                    case 'RC:VcMsg':
                        //html += '<span>[語音消息]</span>';
                        html += '<div class="aui-chat-status">'+messageList[i].content.duration+'s</div>';
                        html += '<span tapmode onclick="playVoice(\''+messageList[i].content.voicePath+'\',\''+messageList[i].messageId+'\')"><i class="aui-iconfont aui-icon-sound" id="messageVoice-'+messageList[i].messageId+'"></i></span>';
                    break;
                }
                
                html += '</div>';
                html += '</div>';
            }
            $api.prepend($api.byId("messageList"),html);
            api.parseTapmode();
        }
    });
    //chatbox部分
    chatBox = api.require('UIChatBox');
    openChatBox();
    //監聽鍵盤聊天框鍵盤彈出,用於調整聊天窗口高度
    chatBox.addEventListener({
        target: 'inputBar',
        name: 'move'
    }, function(ret,err){
        if(ret.panelHeight>0){
            api.setFrameAttr({
                name: 'chat_private_frm',
                rect:{
                    h:api.frameHeight-ret.panelHeight
                }
            });
        }else{
            api.setFrameAttr({
                name: 'chat_private_frm',
                rect:{
                    h:api.frameHeight
                }
            });
        }
        setTimeout(function(){
            window.scrollTo(0,$api.offset($api.byId("messageList")).h);
        },200)
        
    });
    //監聽按下錄音
    chatBox.addEventListener({
        target: 'recordBtn',
        name: 'press'
    }, function(ret,err){
        api.startRecord({
            //path: 'fs://1.amr'
        });
    });
    //監聽松開錄音鍵
    chatBox.addEventListener({
        target: 'recordBtn',
        name: 'press_cancel'
    }, function(ret,err){
        //松開后停止錄音
        api.stopRecord(
            function(ret,err){
                if (ret && ret.duration > 0) {
                    api.sendEvent({
                        name:'sendMessage',
                        extra: {
                            targetId:targetId,
                            objectName:'RC:VcMsg',
                            conversationType:'PRIVATE',
                            message:ret
                        }
                    })
                }
            }
        );
    });
}

//獲取最新消息記錄
function getLatestMessages(){
    //通過sendEvent方法從message_list中獲取當前會話歷史消息,發送目標id,消息類型,最后一條id
    api.sendEvent({
        name: 'getLatestMessages',
        extra: {targetId:targetId,type:'PRIVATE'}
    });
    //監聽獲取歷史消息
    api.addEventListener({
        name: 'backLatestMessages'
    }, function(ret){
        //alert(JSON.stringify(ret.value));
        if(ret && ret.value.result){
            var result = ret.value.result;
            var myUserid = $api.getStorage('userid');
            //重新排序
            var messageList = result.sort(getSortFun('asc', 'sentTime'));
            oldestMessageId  = messageList[0].messageId;
            var html = '';
            for(var i in messageList){
                if(messageList[i].senderUserId==myUserid){
                    //當前發送用戶
                    html += '<div class="aui-chat-sender" id="message-'+messageList[i].messageId+'">';
                    html += '<div class="aui-chat-sender-avatar"><img src="'+myAvatar+'"></div>';
                    html += '<div class="aui-chat-sender-cont">';
                    html += '<div class="aui-chat-right-triangle"></div>';
                }else{
                    html += '<div class="aui-chat-receiver" id="message-'+messageList[i].messageId+'">';
                    html += '<div class="aui-chat-receiver-avatar"><img src="'+targetAvatar+'"></div>';
                    html += '<div class="aui-chat-receiver-cont">';
                    html += '<div class="aui-chat-left-triangle"></div>';
                }
                switch(messageList[i].objectName){
                    //文字消息
                    case 'RC:TxtMsg':
                        html += '<span>'+transText(messageList[i].content.text)+'</span>';
                    break;
                    //圖片消息
                    case 'RC:ImgMsg':
                        html += '<span class="aui-chat-img chat-img"><img src="'+messageList[i].content.thumbPath+'" /></span>';
                    break;
                    //語音消息
                    case 'RC:VcMsg':
                        //html += '<span>[語音消息]</span>';
                        html += '<div class="aui-chat-status">'+messageList[i].content.duration+'s</div>';
                        html += '<span tapmode onclick="playVoice(\''+messageList[i].content.voicePath+'\',\''+messageList[i].messageId+'\')"><i class="aui-iconfont aui-icon-sound" id="messageVoice-'+messageList[i].messageId+'"></i></span>';
                    break;
                }
                html += '</div>';
                html += '</div>';
            }
            $api.prepend($api.byId("messageList"),html);
            api.parseTapmode();
            setTimeout(function(){
                window.scrollTo(0,$api.offset($api.byId("messageList")).h);
            },300)
        }
    });
}

//排序函數
function getSortFun(order, sortBy) {
    var ordAlpah = (order == 'asc') ? '>' : '<';
    var sortFun = new Function('a', 'b', 'return a.' + sortBy + ordAlpah + 'b.' + sortBy + '?1:-1');
    return sortFun;
}

//表情處理
function transText(text, imgWidth, imgHeight){
    var imgWidth = imgWidth || 24;
    var imgHeight = imgHeight || 24;
    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);
            }
        }
    });
}

function openChatBox(){
    chatBox.open({
        placeholder: '',
        maxRows: 4,
        emotionPath: 'widget://image/emotion',
        texts: {
            recordBtn: {
                normalTitle: '按住 說話',
                activeTitle: '松開 結束'
            }
        },
        styles: {
            inputBar: {
                borderColor: '#d9d9d9',
                bgColor: '#f2f2f2'
            },
            inputBox: {
                borderColor: '#B3B3B3',
                bgColor: '#FFFFFF'
            },
            emotionBtn: {
                normalImg: 'widget://image/chatBox/face1.png'
            },
            extrasBtn: {
                normalImg: 'widget://image/chatBox/add1.png'
            },
            keyboardBtn: {
                normalImg: 'widget://image/chatBox/key1.png'
            },
            speechBtn: {
                normalImg: 'widget://image/chatBox/key3.png'
            },
            recordBtn: {
                normalBg: '#c4c4c4',
                activeBg: '#999999',
                color: '#000',
                size: 14
            },
            indicator: {
                target: 'both',
                color: '#c4c4c4',
                activeColor: '#9e9e9e'
            }
        },
        extras: {
            titleSize: 10,
            titleColor: '#a3a3a3',
            btns: [{
                title: '圖片',
                normalImg: 'widget://image/chatBox/album1.png',
                activeImg: 'widget://image/chatBox/album2.png'
            },{
                title: '拍照',
                normalImg: 'widget://image/chatBox/cam1.png',
                activeImg: 'widget://image/chatBox/cam2.png'
            }]
        }
    }, function(ret){
        //點擊附加功能面板
        if(ret.eventType == 'clickExtras'){
            //alert("用戶點擊了第"+ ret.index +"個按鈕");
            if(ret.index==0){
                //圖片
                api.getPicture({
                    sourceType: 'library',
                    encodingType: 'jpg',
                    mediaValue: 'pic',
                    destinationType: 'url',
                    allowEdit: true,
                    quality: 70,
                    targetWidth:320,
                    saveToPhotoAlbum: false
                }, function(ret, err){ 
                    if (ret) {
                        api.sendEvent({
                            name:'sendMessage',
                            extra: {
                                targetId:targetId,
                                objectName:'RC:ImgMsg',
                                conversationType:'PRIVATE',
                                message:ret.data
                            }
                        })
                    }
                });
            }else if(ret.index==1){
                //圖片
                api.getPicture({
                    sourceType: 'camera',
                    encodingType: 'jpg',
                    mediaValue: 'pic',
                    destinationType: 'url',
                    allowEdit: true,
                    quality: 70,
                    targetWidth:640,
                    saveToPhotoAlbum: false
                }, function(ret, err){ 
                    if (ret) {
                        api.sendEvent({
                            name:'sendMessage',
                            extra: {
                                targetId:targetId,
                                objectName:'RC:ImgMsg',
                                conversationType:'PRIVATE',
                                message:ret.data
                            }
                        })
                    }
                });
            }
            
        }
        //點擊發送按鈕
        if(ret.eventType == 'send' && ret.msg){
            //通過sendEvent將發送內容廣博,消息頁面接收並廣播回來
            //單聊文字消息類型
            api.sendEvent({
                name:'sendMessage',
                extra: {
                    targetId:targetId,
                    objectName:'RC:TxtMsg',
                    conversationType:'PRIVATE',
                    message:ret.msg
                }
            })
            //alert('輸入的內容是:'+ transText(ret.msg));
        }
    });
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM