apicloud apicloud

注册
查看: 14861|回复: 51

[模块教程] 融云开发案例核心代码分享

 

主题:
53
帖子:
333
云币:
552

APICloud粉丝APICloud毕业勋章一周年

[模块教程] 融云开发案例核心代码分享

 
14861 51 | 发表于 2015-12-6 21:59:16 |阅读模式 | |
本帖最后由 流浪男 于 2015-12-6 22:00 编辑

该套代码为从项目案例中提取的,可以直接拿去使用,主要包含了单聊及消息的处理。主要分三个页面处理完成,入口首页(index)、消息列表页(message)、会话页面(chat)
index.html 页面(app入口页面)


  1. var rong;
  2. apiready=function(){
  3.     rong = api.require('rongCloud2');
  4.     //判断用户登录成功后执行方法
  5.     rongCloud();
  6. }

  7. function rongCloud(){
  8.     //初始化
  9.     init();
  10.     //消息的监听,监听到新消息后将消息广播出去,在会话页面监听接收并判断
  11.     setOnReceiveMessageListener();
  12.     //连接融云服务器
  13.     connect();
  14.     //监听获取某一会话最新消息记录
  15.     api.addEventListener({
  16.         name: 'getLatestMessages'
  17.     }, function(ret){
  18.         if(ret && ret.value){
  19.             var value = ret.value;
  20.             getLatestMessages(value.targetId,value.type);
  21.         }
  22.     });
  23.     //监听获取某一会话历史消息记录
  24.     api.addEventListener({
  25.         name: 'getHistoryMessages'
  26.     }, function(ret){
  27.         if(ret && ret.value){
  28.             var value = ret.value;
  29.             getHistoryMessages(value.targetId,value.type,value.oldestMessageId);
  30.         }
  31.     });
  32.     //监听发送新消息,监听完成后将消息再次广播出去,列表级会话页面监听接收
  33.     api.addEventListener({
  34.         name:'sendMessage'
  35.     },function(ret){
  36.         if(ret && ret.value){
  37.             var data = ret.value;
  38.             //目标id,消息内容,消息类型
  39.             sendMessage(data.targetId,data.conversationType,data.objectName,data.message);
  40.         }
  41.     })
  42. }

  43. //初始化融云
  44.     function init(){
  45.         rong.init(function(ret, err){
  46.         });
  47.     }

  48. /**
  49. *全局消息监听
  50. *整个app项目中,所有的消息监听事件都在此方法中完成,如果正在会话,监听到消息后通过api.sendEvent方法广播出去
  51. */
  52. function setOnReceiveMessageListener(){
  53.     rong.setOnReceiveMessageListener(function (ret, err) {
  54.         if(ret){
  55.             //将监听到的消息广播出去,在会话页面接收
  56.             api.sendEvent({
  57.                 name: 'setOnReceiveMessageListener',
  58.                 extra: {result:ret.result}
  59.             });
  60.             switch(ret.result.message.objectName){
  61.                 //文字消息
  62.                 case 'RC:TxtMsg':
  63.                    var notificationMessage = ret.result.message.content.text;
  64.                 break;
  65.                 //图片消息
  66.                 case 'RC:ImgMsg':
  67.                     var notificationMessage = '[图片]';
  68.                 break;
  69.                 //语音消息
  70.                 case 'RC:VcMsg':
  71.                     var notificationMessage = '[语音]';
  72.                 break;
  73.             }
  74.             
  75.         }
  76.     })
  77. }

  78. /**
  79. *连接融云服务器
  80. *连接成功后使用getConversationList获取会话列表
  81. */
  82. function connect(){
  83.     //根据本地用户id,从服务器端获取用户融云的token
  84.     var token = $api.getStorage('rongCloudToken');
  85.     rong.connect({
  86.         token: ''+token+''
  87.     },function(ret, err){
  88.             if (ret.status == 'success'){
  89.                 //连接成功后获取会话列表
  90.                 getConversationList();
  91.             }
  92.     });
  93. }

  94. //获取会话列表
  95. function getConversationList(){
  96.     rong.getConversationList(function (ret, err) {
  97.         if(ret.status=='success'){
  98.             //广播会话列表事件
  99.             api.sendEvent({
  100.                 name: 'getConversationList',
  101.                 extra: {result:ret.result,status:ret.status}
  102.             });
  103.         }
  104.     })
  105. }

  106. //获取某一会话的最新消息记录
  107. function getLatestMessages(targetId,type){
  108.     rong.getLatestMessages({
  109.             conversationType: ''+type+'',
  110.             targetId: ''+targetId+'',
  111.             count: 20
  112.         }, function (ret, err) {
  113.             if(ret.status=='success'){
  114.                 //将获得的历史消息广播出去,在会话页面接收
  115.                 api.sendEvent({
  116.                     name: 'backLatestMessages',
  117.                     extra: {result:ret.result,status:ret.status}
  118.                 });
  119.             }
  120.     })
  121. }

  122. //获取某一会话历史消息记录
  123. function getHistoryMessages(targetId,type,oldestMessageId){
  124.     rong.getHistoryMessages({
  125.             conversationType: ''+type+'',
  126.             targetId: ''+targetId+'',
  127.             oldestMessageId: ''+oldestMessageId+'',
  128.             count: 20
  129.         }, function (ret, err) {
  130.             if(ret.status=='success'){
  131.                 //将获得的历史消息广播出去,在会话页面接收
  132.                 api.sendEvent({
  133.                     name: 'backHistoryMessages',
  134.                     extra: {result:ret.result,status:ret.status}
  135.                 });
  136.             }
  137.     })
  138. }

  139. //发送消息
  140. function sendMessage(targetId,conversationType,objectName,message){
  141.     switch(objectName){
  142.         //文字消息
  143.         case 'RC:TxtMsg':
  144.             rong.sendTextMessage({
  145.                 conversationType: ''+conversationType+'',
  146.                 targetId: ''+targetId+'',
  147.                 text: ''+message+'',
  148.                 extra: ''
  149.             }, function (ret, err) {
  150.                 if (ret.status == 'prepare'){
  151.                     //发送准备,广播出去,在会话页面监听接收
  152.                     api.sendEvent({
  153.                         name: 'backSendMessage',
  154.                         extra: {result:ret.result}
  155.                     });
  156.                     insertMessage(targetId,conversationType,objectName,ret.result);
  157.                 }else if (ret.status == 'success'){
  158.                     //发送成功的处理
  159.                 }else if (ret.status == 'error'){
  160.                     //发送失败的处理
  161.                     //api.toast({ msg: err.code });
  162.                 }
  163.             })
  164.         break;
  165.         //图片消息
  166.         case 'RC:ImgMsg':
  167.             rong.sendImageMessage({
  168.                     conversationType: ''+conversationType+'',
  169.                     targetId: ''+targetId+'',
  170.                     imagePath: ''+message+'',
  171.                     extra: ''
  172.                 }, function (ret, err) {
  173.                     if (ret.status == 'prepare'){
  174.                         //发送准备,广播出去,在会话页面监听接收
  175.                         api.sendEvent({
  176.                             name: 'backSendMessage',
  177.                             extra: {result:ret.result}
  178.                         });
  179.                         insertMessage(targetId,conversationType,objectName,ret.result);
  180.                     }else if (ret.status == 'progress'){
  181.                         //广播图片的进度
  182.                         
  183.                     }else if (ret.status == 'success'){
  184.                         api.sendEvent({
  185.                             name: 'backSendMessageSuccess',
  186.                             extra: {messageId:ret.result.message.messageId}
  187.                         });
  188.                     }else if (ret.status == 'error'){
  189.                         api.toast({ msg: err.code });
  190.                     }
  191.             });
  192.         break;
  193.         //语音消息
  194.         case 'RC:VcMsg':
  195.             rong.sendVoiceMessage({
  196.                     conversationType: ''+conversationType+'',
  197.                     targetId: ''+targetId+'',
  198.                     voicePath: ''+message.path+'',
  199.                     duration: ''+message.duration+'',
  200.                     extra: ''
  201.                 }, function (ret, err) {
  202.                     if (ret.status == 'prepare'){
  203.                         //发送准备,广播出去,在会话页面监听接收
  204.                         api.sendEvent({
  205.                             name: 'backSendMessage',
  206.                             extra: {result:ret.result}
  207.                         });
  208.                         insertMessage(targetId,conversationType,objectName,ret.result);
  209.                     }else if (ret.status == 'success'){
  210.                         api.toast({ msg: ret.result.message.messageId });
  211.                     }
  212.                     else if (ret.status == 'error'){
  213.                         api.toast({ msg: err.code });
  214.                     }
  215.                 }
  216.             );
  217.         break;
  218.     }
  219.    
  220. }
复制代码


消息列表页核心代码
  1. HTML
  2. <div class="aui-content">
  3.         <ul class="aui-user-view" id="messageList"></ul>
  4. </div>

  5. JS核心代码
  6. apiready=function(){
  7.     //请求获取会话列表
  8.     api.sendEvent({
  9.         name: 'requestConversationList'
  10.     });
  11.     //监听新消息
  12.     api.addEventListener({
  13.         name: 'setOnReceiveMessageListener'
  14.     }, function(ret, err){
  15.         if(ret && ret.value){
  16.             var result = ret.value.result;
  17.             if($api.byId("target-"+result.message.targetId)){
  18.                 //如果存在更新消息内容
  19.                 //此处也定义个id,更消息内容类型做个判断
  20.                 switch(result.message.objectName){
  21.                     //文字消息
  22.                     case 'RC:TxtMsg':
  23.                        $api.text($api.byId("targetMessage-"+result.message.targetId),result.message.content.text);
  24.                     break;
  25.                     //图片消息
  26.                     case 'RC:ImgMsg':
  27.                         $api.text($api.byId("targetMessage-"+result.message.targetId),"[图片]");
  28.                     break;
  29.                     //语音消息
  30.                     case 'RC:VcMsg':
  31.                         $api.text($api.byId("targetMessage-"+result.message.targetId),"[语音]");
  32.                     break;
  33.                 }
  34.                 //将当前消息容器移动到顶部
  35.                 if(result.message.conversationType!='CUSTOMER_SERVICE' && $api.dom("#messageList > li")){
  36.                     $api.byId("messageList").insertBefore($api.byId("target-"+result.message.targetId),$api.byId("messageList").childNodes[0]);
  37.                 }
  38.             }else{
  39.                 //如果不存在写入
  40.                 var html='';
  41.                 if(result.message.conversationType=='CUSTOMER_SERVICE'){
  42.                 }else if(result.message.conversationType=='PRIVATE'){
  43.                     html += '<li class="aui-user-view-cell aui-img" id="target-'+result.message.targetId+'" tapmode onclick="openChat('+result.message.targetId+')">';
  44.                     html += '<img class="aui-img-object aui-pull-left" src="../../image/noavatar.gif" id="avatar-'+result.message.targetId+'">';
  45.                     html += '<div class="aui-img-body aui-arrow-right">'
  46.                     html += '<span id="realname-'+result.message.targetId+'"></span>';
  47.                     //此处也定义个id,更消息内容类型做个判断
  48.                     switch(result.message.objectName){
  49.                         //文字消息
  50.                         case 'RC:TxtMsg':
  51.                             html += '<p class="aui-ellipsis-1" id="targetMessage-'+result.message.targetId+'">'+result.message.content.text+'</p>';
  52.                         break;
  53.                         //图片消息
  54.                         case 'RC:ImgMsg':
  55.                             html += '<p class="aui-ellipsis-1" id="targetMessage-'+result.message.targetId+'">[图片]</p>';
  56.                         break;
  57.                         //语音消息
  58.                         case 'RC:VcMsg':
  59.                             html += '<p class="aui-ellipsis-1" id="targetMessage-'+result.message.targetId+'">[语音]</p>';
  60.                         break;
  61.                     }
  62.                     
  63.                     html += '</div>';
  64.                     html += '</li>';
  65.                     $api.prepend($api.byId("messageList"),html);
  66.                     getUserInfo(result.message.targetId);
  67.                 }
  68.                 api.parseTapmode();
  69.             }
  70.             
  71.         }
  72.     });
  73.     //监听会话列表事件 getConversationList
  74.     api.addEventListener({
  75.         name: 'getConversationList'
  76.     }, function(ret, err){
  77.         if(ret && ret.value){
  78.             var status = ret.value.status;
  79.             var result = ret.value.result;
  80.             if(status=='success'){
  81.                 //获取成功后将消息内容插入至容器
  82.                 var targetIds='',
  83.                     html='',
  84.                     messageList = result;
  85.                 for(var i in messageList){
  86.                     if(messageList[i].conversationType=='CUSTOMER_SERVICE'){
  87.                         $api.text($api.byId("targetMessage-"+messageList[i].targetId),messageList[i].latestMessage.text);
  88.                     }else if(messageList[i].conversationType=='PRIVATE'){
  89.                         //组装用户id,批量获取用户信息
  90.                         targetIds += messageList[i].targetId+',';
  91.                         //注意定义容器的id为消息目标id(targetId)
  92.                         html += '<li class="aui-user-view-cell aui-img" id="target-'+messageList[i].targetId+'" tapmode onclick="openChat('+messageList[i].targetId+')">';
  93.                         html += '<img class="aui-img-object aui-pull-left" src="../image/noavatar.gif" id="avatar-'+messageList[i].targetId+'">';
  94.                         html += '<div class="aui-img-body aui-arrow-right">'
  95.                         html += '<span id="realname-'+messageList[i].targetId+'">...</span>';
  96.                         //此处也定义个id,更消息内容类型做个判断
  97.                         switch(messageList[i].objectName){
  98.                             //文字消息
  99.                             case 'RC:TxtMsg':
  100.                                 html += '<p class="aui-ellipsis-1" id="targetMessage-'+messageList[i].targetId+'">'+messageList[i].latestMessage.text+'</p>';
  101.                             break;
  102.                             //图片消息
  103.                             case 'RC:ImgMsg':
  104.                                 html += '<p class="aui-ellipsis-1" id="targetMessage-'+messageList[i].targetId+'">[图片]</p>';
  105.                             break;
  106.                             //语音消息
  107.                             case 'RC:VcMsg':
  108.                                 html += '<p class="aui-ellipsis-1" id="targetMessage-'+messageList[i].targetId+'">[语音]</p>';
  109.                             break;
  110.                         }
  111.                         html += '</div>';
  112.                         html += '</li>';
  113.                     }
  114.                     
  115.                 }
  116.                 if(targetIds.length>0){
  117.                     //去掉组装完用户id的最后符号
  118.                     targetIds = targetIds.substring(0,targetIds.length-1);
  119.                     getUserInfos(targetIds);
  120.                 }
  121.                
  122.                 $api.append($api.byId("messageList"),html);
  123.                 api.parseTapmode();
  124.             }
  125.         }
  126.     })
  127.     //监听发送的新消息
  128.     api.addEventListener({
  129.         name: 'backSendMessage'
  130.     }, function(ret){
  131.         if(ret && ret.value){
  132.             var result = ret.value.result;
  133.             if($api.byId("targetMessage-"+result.message.targetId)){
  134.                 switch(result.message.objectName){
  135.                     //文字消息
  136.                     case 'RC:TxtMsg':
  137.                         $api.text($api.byId("targetMessage-"+result.message.targetId),'我:'+result.message.content.text);
  138.                     break;
  139.                     //图片消息
  140.                     case 'RC:ImgMsg':
  141.                         $api.text($api.byId("targetMessage-"+result.message.targetId),'我:[图片]');
  142.                     break;
  143.                     //语音消息
  144.                     case 'RC:VcMsg':
  145.                         $api.text($api.byId("targetMessage-"+result.message.targetId),'我:[语音]');
  146.                     break;
  147.                 }
  148.                 if(result.message.conversationType!='CUSTOMER_SERVICE'){
  149.                     $api.byId("messageList").insertBefore($api.byId("target-"+result.message.targetId),$api.byId("messageList").childNodes[0]);
  150.                 }
  151.             }else{
  152.                 //如果不存在写入
  153.                 var html='';
  154.                 html += '<li class="aui-user-view-cell aui-img" id="target-'+result.message.targetId+'" tapmode onclick="openChat('+result.message.targetId+')">';
  155.                 html += '<img class="aui-img-object aui-pull-left" src="../../image/noavatar.gif" id="avatar-'+result.message.targetId+'">';
  156.                 html += '<div class="aui-img-body aui-arrow-right">'
  157.                 html += '<span id="realname-'+result.message.targetId+'"></span>';
  158.                 //此处也定义个id,更消息内容类型做个判断
  159.                 switch(result.message.objectName){
  160.                     //文字消息
  161.                     case 'RC:TxtMsg':
  162.                         html += '<p class="aui-ellipsis-1" id="targetMessage-'+result.message.targetId+'">'+result.message.content.text+'</p>';
  163.                     break;
  164.                     //图片消息
  165.                     case 'RC:ImgMsg':
  166.                         html += '<p class="aui-ellipsis-1" id="targetMessage-'+result.message.targetId+'">我:[图片]</p>';
  167.                     break;
  168.                     //语音消息
  169.                     case 'RC:VcMsg':
  170.                         html += '<p class="aui-ellipsis-1" id="targetMessage-'+result.message.targetId+'">我:[语音]</p>';
  171.                     break;
  172.                 }
  173.                
  174.                 html += '</div>';
  175.                 html += '</li>';
  176.                 $api.prepend($api.byId("messageList"),html);
  177.                 getUserInfo(result.message.targetId);
  178.                 api.parseTapmode();
  179.             }
  180.         }
  181.     })
  182. }

  183. //批量获取用户信息
  184. function getUserInfos(userids){
  185.     api.ajax({
  186.         url: '',
  187.         method: 'post',
  188.         timeout: 30,
  189.         dataType: 'json',
  190.         returnAll:false,
  191.         data:{
  192.             values:{
  193.                 userids:userids
  194.             }
  195.         }
  196.     },function(ret,err){
  197.         if (ret) {
  198.             for(var i in ret){
  199.                 if(ret[i].userid){
  200.                     if(ret[i].avatar){
  201.                         $api.attr($api.byId("avatar-"+ret[i].userid),'src',ret[i].avatar);
  202.                     }
  203.                     
  204.                     $api.text($api.byId("realname-"+ret[i].userid),ret[i].realname);
  205.                 }
  206.             }
  207.         }
  208.     });
  209. }
  210. //获取单个用户信息
  211. function getUserInfo(userid){
  212.     api.ajax({
  213.         url: '',
  214.         method: 'post',
  215.         timeout: 30,
  216.         dataType: 'json',
  217.         returnAll:false,
  218.         data:{
  219.             values:{
  220.                 userid:userid
  221.             }
  222.         }
  223.     },function(ret,err){
  224.         if (ret) {
  225.             if(ret.avatar){
  226.                 $api.attr($api.byId("avatar-"+ret.userid),'src',ret.avatar);
  227.             }
  228.             $api.text($api.byId("realname-"+ret.userid),ret.realname);
  229.         }
  230.     });
  231. }
复制代码


会话(单聊)页面核心代码:
结合UIChatBox模块


  1. var myAvatar,
  2.     targetId,targetAvatar,targetNickname,oldestMessageId='-1',
  3.     chatBox,
  4.     sourcePath = "widget://image/emotion",//表情存放目录
  5.     emotionData;//存储表情
  6. apiready = function(){
  7.     //从本地数据存贮获取我的头像
  8.     myAvatar = $api.getStorage('avatar');
  9.     targetId = api.pageParam.targetId;//传递过来的目标用户id
  10.     targetAvatar = api.pageParam.targetAvatar;//传递过来的目标用户头像
  11.     targetNickname = api.pageParam.targetNickname;//传递过来的目标用户昵称
  12.     api.parseTapmode();//优化点击事件(300)
  13.     //表情图片处理
  14.     getImgsPaths(sourcePath, function (emotion) {
  15.         emotionData = emotion;
  16.     });
  17.     //获取最新消息记录
  18.     getLatestMessages();
  19.     //监听来自消息列表的新消息
  20.     api.addEventListener({
  21.         name: 'setOnReceiveMessageListener'
  22.     }, function(ret){
  23.         if(ret && ret.value){
  24.             var result = ret.value.result;
  25.             //如果当前消息的目标id等于当前会话目标id,写入
  26.             if(result.message.targetId==targetId){
  27.                 var html = '';
  28.                 html += '<div class="aui-chat-receiver" id="message-'+result.message.messageId+'">';
  29.                 html += '<div class="aui-chat-receiver-avatar"><img src="'+targetAvatar+'"></div>';
  30.                 html += '<div class="aui-chat-receiver-cont">';
  31.                 html += '<div class="aui-chat-left-triangle"></div>';
  32.                 switch(result.message.objectName){
  33.                     //文字消息
  34.                     case 'RC:TxtMsg':
  35.                         html += '<span>'+transText(result.message.content.text)+'</span>';
  36.                     break;
  37.                     //图片消息
  38.                     case 'RC:ImgMsg':
  39.                         html += '<span class="aui-chat-img chat-img"><img src="'+result.message.content.thumbPath+'" /></span>';
  40.                     break;
  41.                     //语音消息
  42.                     case 'RC:VcMsg':
  43.                         html += '<div class="aui-chat-status">'+result.message.content.duration+'s</div>';
  44.                         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>';
  45.                     break;
  46.                 }
  47.                
  48.                 html += '</div>';
  49.                 html += '</div>';
  50.                 $api.append($api.byId("messageList"),html);
  51.                 api.parseTapmode();
  52.                 //容器自动滚动至底部的处理,加个100毫秒演示防止不成功
  53.                 setTimeout(function(){
  54.                     window.scrollTo(0,$api.offset($api.byId("messageList")).h);
  55.                 },100)
  56.                
  57.             }
  58.         }
  59.     })
  60.     //监听发送的新消息
  61.     api.addEventListener({
  62.         name: 'backSendMessage'
  63.     }, function(ret){
  64.         if(ret && ret.value){
  65.             var result = ret.value.result;
  66.             //如果当前消息的目标id等于当前会话目标id,写入
  67.             if(result.message.targetId==targetId){
  68.                 var html = '';
  69.                 html += '<div class="aui-chat-sender" id="message-'+result.message.messageId+'">';
  70.                 html += '<div class="aui-chat-sender-avatar"><img src="'+myAvatar+'"></div>';
  71.                 html += '<div class="aui-chat-sender-cont">';
  72.                 html += '<div class="aui-chat-right-triangle"></div>';
  73.                 switch(result.message.objectName){
  74.                     //文字消息
  75.                     case 'RC:TxtMsg':
  76.                         html += '<span>'+transText(result.message.content.text)+'</span>';
  77.                     break;
  78.                     //图片消息
  79.                     case 'RC:ImgMsg':
  80.                         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>';
  81.                         html += '<span class="aui-chat-img"><img src="'+result.message.content.thumbPath+'" /></span>';
  82.                     break;
  83.                     //语音消息
  84.                     case 'RC:VcMsg':
  85.                         //alert(JSON.stringify(ret.value.message.content));
  86.                         html += '<div class="aui-chat-status">'+result.message.content.duration+'s</div>';
  87.                         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>';
  88.                     break;
  89.                 }
  90.                
  91.                 html += '</div>';
  92.                 html += '</div>';
  93.                 $api.append($api.byId("messageList"),html);
  94.                 api.parseTapmode();
  95.                 window.scrollTo(0,$api.offset($api.byId("messageList")).h);
  96.             }
  97.         }
  98.     })
  99.     //监听发送的新消息是否完成
  100.     api.addEventListener({
  101.         name: 'backSendMessageSuccess'
  102.     }, function(ret){
  103.         if(ret && ret.value){
  104.             if($api.byId("messageStatus-"+ret.value.messageId)){
  105.                 $api.remove($api.byId("messageStatus-"+ret.value.messageId));
  106.             }
  107.         }
  108.     })
  109.     //下拉加载历史消息
  110.     api.setRefreshHeaderInfo({
  111.         visible: true,
  112.         loadingImg: 'widget://image/ptr_pull.png',
  113.         bgColor: '#ffffff',
  114.         textColor: '#ff7372',
  115.         textDown: '下拉加载',
  116.         textLoading: '加载中',
  117.         textUp: '松开加载',
  118.         showTime: false
  119.     }, function(ret, err){
  120.         api.refreshHeaderLoading();
  121.         //发送一个获取历史消息的事件
  122.         api.sendEvent({
  123.             name: 'getHistoryMessages',
  124.             extra: {targetId:targetId,type:'PRIVATE',oldestMessageId:oldestMessageId}
  125.         });
  126.         api.refreshHeaderLoadDone();
  127.         //从服务器加载数据,完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
  128.     });
  129.     //监听获取历史消息
  130.     api.addEventListener({
  131.         name: 'backHistoryMessages'
  132.     }, function(ret){
  133.         if(ret && ret.value.result){
  134.             var result = ret.value.result;
  135.             
  136.             var myUserid = $api.getStorage('userid');
  137.             //重新排序
  138.             var messageList = result.sort(getSortFun('asc', 'sentTime'));
  139.             oldestMessageId  = messageList[0].messageId;
  140.             var html = '';
  141.             for(var i in messageList){
  142.                 if(messageList[i].senderUserId==myUserid){
  143.                     //当前发送用户
  144.                     html += '<div class="aui-chat-sender" id="message-'+messageList[i].messageId+'">';
  145.                     html += '<div class="aui-chat-sender-avatar"><img src="'+myAvatar+'"></div>';
  146.                     html += '<div class="aui-chat-sender-cont">';
  147.                     html += '<div class="aui-chat-right-triangle"></div>';
  148.                 }else{
  149.                     html += '<div class="aui-chat-receiver" id="message-'+messageList[i].messageId+'">';
  150.                     html += '<div class="aui-chat-receiver-avatar"><img src="'+targetAvatar+'"></div>';
  151.                     html += '<div class="aui-chat-receiver-cont">';
  152.                     html += '<div class="aui-chat-left-triangle"></div>';
  153.                 }
  154.                 switch(messageList[i].objectName){
  155.                     //文字消息
  156.                     case 'RC:TxtMsg':
  157.                         html += '<span>'+transText(messageList[i].content.text)+'</span>';
  158.                     break;
  159.                     //图片消息
  160.                     case 'RC:ImgMsg':
  161.                         html += '<span class="aui-chat-img chat-img"><img src="'+messageList[i].content.thumbPath+'" /></span>';
  162.                     break;
  163.                     //语音消息
  164.                     case 'RC:VcMsg':
  165.                         //html += '<span>[语音消息]</span>';
  166.                         html += '<div class="aui-chat-status">'+messageList[i].content.duration+'s</div>';
  167.                         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>';
  168.                     break;
  169.                 }
  170.                
  171.                 html += '</div>';
  172.                 html += '</div>';
  173.             }
  174.             $api.prepend($api.byId("messageList"),html);
  175.             api.parseTapmode();
  176.         }
  177.     });
  178.     //chatbox部分
  179.     chatBox = api.require('UIChatBox');
  180.     openChatBox();
  181.     //监听键盘聊天框键盘弹出,用于调整聊天窗口高度
  182.     chatBox.addEventListener({
  183.         target: 'inputBar',
  184.         name: 'move'
  185.     }, function(ret,err){
  186.         if(ret.panelHeight>0){
  187.             api.setFrameAttr({
  188.                 name: 'chat_private_frm',
  189.                 rect:{
  190.                     h:api.frameHeight-ret.panelHeight
  191.                 }
  192.             });
  193.         }else{
  194.             api.setFrameAttr({
  195.                 name: 'chat_private_frm',
  196.                 rect:{
  197.                     h:api.frameHeight
  198.                 }
  199.             });
  200.         }
  201.         setTimeout(function(){
  202.             window.scrollTo(0,$api.offset($api.byId("messageList")).h);
  203.         },200)
  204.         
  205.     });
  206.     //监听按下录音
  207.     chatBox.addEventListener({
  208.         target: 'recordBtn',
  209.         name: 'press'
  210.     }, function(ret,err){
  211.         api.startRecord({
  212.             //path: 'fs://1.amr'
  213.         });
  214.     });
  215.     //监听松开录音键
  216.     chatBox.addEventListener({
  217.         target: 'recordBtn',
  218.         name: 'press_cancel'
  219.     }, function(ret,err){
  220.         //松开后停止录音
  221.         api.stopRecord(
  222.             function(ret,err){
  223.                 if (ret && ret.duration > 0) {
  224.                     api.sendEvent({
  225.                         name:'sendMessage',
  226.                         extra: {
  227.                             targetId:targetId,
  228.                             objectName:'RC:VcMsg',
  229.                             conversationType:'PRIVATE',
  230.                             message:ret
  231.                         }
  232.                     })
  233.                 }
  234.             }
  235.         );
  236.     });
  237. }

  238. //获取最新消息记录
  239. function getLatestMessages(){
  240.     //通过sendEvent方法从message_list中获取当前会话历史消息,发送目标id,消息类型,最后一条id
  241.     api.sendEvent({
  242.         name: 'getLatestMessages',
  243.         extra: {targetId:targetId,type:'PRIVATE'}
  244.     });
  245.     //监听获取历史消息
  246.     api.addEventListener({
  247.         name: 'backLatestMessages'
  248.     }, function(ret){
  249.         //alert(JSON.stringify(ret.value));
  250.         if(ret && ret.value.result){
  251.             var result = ret.value.result;
  252.             var myUserid = $api.getStorage('userid');
  253.             //重新排序
  254.             var messageList = result.sort(getSortFun('asc', 'sentTime'));
  255.             oldestMessageId  = messageList[0].messageId;
  256.             var html = '';
  257.             for(var i in messageList){
  258.                 if(messageList[i].senderUserId==myUserid){
  259.                     //当前发送用户
  260.                     html += '<div class="aui-chat-sender" id="message-'+messageList[i].messageId+'">';
  261.                     html += '<div class="aui-chat-sender-avatar"><img src="'+myAvatar+'"></div>';
  262.                     html += '<div class="aui-chat-sender-cont">';
  263.                     html += '<div class="aui-chat-right-triangle"></div>';
  264.                 }else{
  265.                     html += '<div class="aui-chat-receiver" id="message-'+messageList[i].messageId+'">';
  266.                     html += '<div class="aui-chat-receiver-avatar"><img src="'+targetAvatar+'"></div>';
  267.                     html += '<div class="aui-chat-receiver-cont">';
  268.                     html += '<div class="aui-chat-left-triangle"></div>';
  269.                 }
  270.                 switch(messageList[i].objectName){
  271.                     //文字消息
  272.                     case 'RC:TxtMsg':
  273.                         html += '<span>'+transText(messageList[i].content.text)+'</span>';
  274.                     break;
  275.                     //图片消息
  276.                     case 'RC:ImgMsg':
  277.                         html += '<span class="aui-chat-img chat-img"><img src="'+messageList[i].content.thumbPath+'" /></span>';
  278.                     break;
  279.                     //语音消息
  280.                     case 'RC:VcMsg':
  281.                         //html += '<span>[语音消息]</span>';
  282.                         html += '<div class="aui-chat-status">'+messageList[i].content.duration+'s</div>';
  283.                         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>';
  284.                     break;
  285.                 }
  286.                 html += '</div>';
  287.                 html += '</div>';
  288.             }
  289.             $api.prepend($api.byId("messageList"),html);
  290.             api.parseTapmode();
  291.             setTimeout(function(){
  292.                 window.scrollTo(0,$api.offset($api.byId("messageList")).h);
  293.             },300)
  294.         }
  295.     });
  296. }

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

  303. //表情处理
  304. function transText(text, imgWidth, imgHeight){
  305.     var imgWidth = imgWidth || 24;
  306.     var imgHeight = imgHeight || 24;
  307.     var regx= /\[(.*?)\]/gm;
  308.     var textTransed = text.replace(regx,function(match){
  309.         var imgSrc = emotionData[match];
  310.         if( !imgSrc){ /* 说明不对应任何表情,直接返回即可.*/
  311.             return match;
  312.         }
  313.         var img = "<img src='" + imgSrc+ "' width='" + imgWidth +  "' height ='" + imgHeight +"' />";
  314.         return img;
  315.     });
  316.     return textTransed;   
  317. }
  318. /*获取所有表情图片的名称和真实URL地址,以JSON对象形式返回。其中以表情文本为 属性名,以图片真实路径为属性值*/
  319. function getImgsPaths(sourcePathOfChatBox, callback){
  320.     var jsonPath = sourcePathOfChatBox + "/emotion.json";//表情的JSON数组
  321.     api.readFile({
  322.         path: jsonPath
  323.     },function(ret,err){
  324.         if(ret.status){
  325.             var emotionArray = JSON.parse(ret.data);
  326.             var emotion = {};
  327.             for(var i in emotionArray){
  328.                 var emotionItem = emotionArray[i];
  329.                 var emotionText = emotionItem["text"];
  330.                 var emotionUrl = "../image/emotion/"+emotionItem["name"]+".png";
  331.                 emotion[emotionText] = emotionUrl;
  332.             }
  333.             /*把emotion对象 回调出去*/
  334.             if("function" === typeof(callback)){
  335.                 callback(emotion);
  336.             }
  337.         }
  338.     });
  339. }

  340. function openChatBox(){
  341.     chatBox.open({
  342.         placeholder: '',
  343.         maxRows: 4,
  344.         emotionPath: 'widget://image/emotion',
  345.         texts: {
  346.             recordBtn: {
  347.                 normalTitle: '按住 说话',
  348.                 activeTitle: '松开 结束'
  349.             }
  350.         },
  351.         styles: {
  352.             inputBar: {
  353.                 borderColor: '#d9d9d9',
  354.                 bgColor: '#f2f2f2'
  355.             },
  356.             inputBox: {
  357.                 borderColor: '#B3B3B3',
  358.                 bgColor: '#FFFFFF'
  359.             },
  360.             emotionBtn: {
  361.                 normalImg: 'widget://image/chatBox/face1.png'
  362.             },
  363.             extrasBtn: {
  364.                 normalImg: 'widget://image/chatBox/add1.png'
  365.             },
  366.             keyboardBtn: {
  367.                 normalImg: 'widget://image/chatBox/key1.png'
  368.             },
  369.             speechBtn: {
  370.                 normalImg: 'widget://image/chatBox/key3.png'
  371.             },
  372.             recordBtn: {
  373.                 normalBg: '#c4c4c4',
  374.                 activeBg: '#999999',
  375.                 color: '#000',
  376.                 size: 14
  377.             },
  378.             indicator: {
  379.                 target: 'both',
  380.                 color: '#c4c4c4',
  381.                 activeColor: '#9e9e9e'
  382.             }
  383.         },
  384.         extras: {
  385.             titleSize: 10,
  386.             titleColor: '#a3a3a3',
  387.             btns: [{
  388.                 title: '图片',
  389.                 normalImg: 'widget://image/chatBox/album1.png',
  390.                 activeImg: 'widget://image/chatBox/album2.png'
  391.             },{
  392.                 title: '拍照',
  393.                 normalImg: 'widget://image/chatBox/cam1.png',
  394.                 activeImg: 'widget://image/chatBox/cam2.png'
  395.             }]
  396.         }
  397.     }, function(ret){
  398.         //点击附加功能面板
  399.         if(ret.eventType == 'clickExtras'){
  400.             //alert("用户点击了第"+ ret.index +"个按钮");
  401.             if(ret.index==0){
  402.                 //图片
  403.                 api.getPicture({
  404.                     sourceType: 'library',
  405.                     encodingType: 'jpg',
  406.                     mediaValue: 'pic',
  407.                     destinationType: 'url',
  408.                     allowEdit: true,
  409.                     quality: 70,
  410.                     targetWidth:320,
  411.                     saveToPhotoAlbum: false
  412.                 }, function(ret, err){
  413.                     if (ret) {
  414.                         api.sendEvent({
  415.                             name:'sendMessage',
  416.                             extra: {
  417.                                 targetId:targetId,
  418.                                 objectName:'RC:ImgMsg',
  419.                                 conversationType:'PRIVATE',
  420.                                 message:ret.data
  421.                             }
  422.                         })
  423.                     }
  424.                 });
  425.             }else if(ret.index==1){
  426.                 //图片
  427.                 api.getPicture({
  428.                     sourceType: 'camera',
  429.                     encodingType: 'jpg',
  430.                     mediaValue: 'pic',
  431.                     destinationType: 'url',
  432.                     allowEdit: true,
  433.                     quality: 70,
  434.                     targetWidth:640,
  435.                     saveToPhotoAlbum: false
  436.                 }, function(ret, err){
  437.                     if (ret) {
  438.                         api.sendEvent({
  439.                             name:'sendMessage',
  440.                             extra: {
  441.                                 targetId:targetId,
  442.                                 objectName:'RC:ImgMsg',
  443.                                 conversationType:'PRIVATE',
  444.                                 message:ret.data
  445.                             }
  446.                         })
  447.                     }
  448.                 });
  449.             }
  450.             
  451.         }
  452.         //点击发送按钮
  453.         if(ret.eventType == 'send' && ret.msg){
  454.             //通过sendEvent将发送内容广博,消息页面接收并广播回来
  455.             //单聊文字消息类型
  456.             api.sendEvent({
  457.                 name:'sendMessage',
  458.                 extra: {
  459.                     targetId:targetId,
  460.                     objectName:'RC:TxtMsg',
  461.                     conversationType:'PRIVATE',
  462.                     message:ret.msg
  463.                 }
  464.             })
  465.             //alert('输入的内容是:'+ transText(ret.msg));
  466.         }
  467.     });
  468. }
复制代码





1

查看全部评分

主题:
203
帖子:
547
云币:
675
发表于 2015-12-6 22:46:54 |
沙发

新手上路

UID:12667

主题:
23
帖子:
83
云币:
512
发表于 2015-12-7 00:39:44 |
占位支持

入门司机

UID:130718

主题:
7
帖子:
396
云币:
2397

APICloud粉丝一周年你吃屎!托马斯全旋女朋友不想上班!

发表于 2015-12-7 01:57:22 来自手机 |
板凳抢到

主题:
51
帖子:
206
云币:
112

一周年圣诞节

发表于 2015-12-8 08:59:18 |
支持分享

主题:
1102
帖子:
5147
云币:
2147214901

圣诞节捣蛋鬼APICloud大会专属勋章足球狗儿童节快乐

发表于 2015-12-8 17:40:41 |
感谢流浪男的分享

新手上路

UID:176431

主题:
9
帖子:
50
云币:
97
发表于 2015-12-8 18:25:36 |
  这个流浪男真牛呀

主题:
0
帖子:
13
云币:
121
发表于 2015-12-19 15:48:15 |
感谢流浪男分享

驾校小白

UID:146522

主题:
8
帖子:
37
云币:
137
发表于 2015-12-21 18:08:45 |
还没看,先给赞

主题:
1
帖子:
7
云币:
13
发表于 2015-12-21 19:34:49 |
顶 占座
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表