在APICloud平臺中,融云IM云服務(wù)的使用教程

(SbAPICloud(SbAPICloud/r/在APICloud平臺中，融云IM云服務(wù)的使用教程實現(xiàn)功能：融云會話聊天及，發(fā)送表情消息使用模塊：rongCloudchatBox教程開始：因為融云為第三方模塊，每次調(diào)試都得需要云編譯，建議大家先把UI和基本代碼做好。JS插件使用：zepto.min.js一、UI的制作效果圖：中國移動我國'**百…//QSJ23:16你好相忘共見到榔在做什幺呢您你好相忘共見到榔在做什幺呢您CSS代碼：/*會話消息容器*/#messageList{padding:15px0;overflow:hidden;}/*接收消息類，左側(cè)*/.receiver{clear:both;}.receiver.receiver-avatar{float:left;}.receiver.receiver-avatarimg{width:50px;height:50px;}.receiver.receiver-cont{background-color:#faff72;float:left;margin:020px10px15px;padding:10px;border-radius:7px;max-width:60%;position:relative;}.receiver.status{width:30px;height:30px;position:absolute;right:-35px;top:3px;}/*發(fā)送消息類，右側(cè)*/.sender{clear:both;}.sender.status{width:30px;height:30px;position:absolute;left:-35px;top:3px;font-size:18px;font-weight:700;color:#990000;}.sender.statusimg{width:30px;height:30px;}.sender.sender-avatar{float:right;}.sender.sender-avatarimg{width:50px;height:50px;}.sender.sender-cont{float:right;background-color:#15b5e9;margin:010px10px20px;padding:10px;border-radius:7px;color:#ffffff;max-width:60%;position:relative;}.left_triangle{height:0px;width:0px;border-width:8px;border-style:solid;border-color:transparent#faff72transparenttransparent;position:absolute;left:-16px;top:6px;}.right_triangle{height:0px;width:0px;border-width:8px;border-style:solid;border-color:transparenttransparenttransparent#15b5e9;position:absolute;right:-16px;top:6px;}<divid="messageList"><divclass="sender"><divclass="sender-avatar"><imgsrc="chatTemplateExample2_files/cat.jpg"></div><divclass="sender-cont"><divclass="right_triangle"></div><span><imgsrc="發(fā)送用戶頭像"width="30"height="30">發(fā)送內(nèi)容</span><divclass="status"><!--發(fā)送狀態(tài)--></div></div></div><divclass="receiver"><divclass="receiver-avatar"><imgsrc="對方用戶頭像",</div><divclass="receiver-cont"><divclass="left_triangle"></div><span>發(fā)送內(nèi)容</span></div></div></div>上面的就直接拿去復(fù)制使用了二、融云的鏈接融云的鏈接需要用到token了，我們可以在自己的服務(wù)器搭建一個生成獲取token的方法。這個方法在融云的文檔里面有介紹，以php為例：生成用戶的token要使用到用戶ID，用戶昵稱，用戶頭像。網(wǎng)站上的每個用戶都需要對應(yīng)一個token,可以將這個token寫入到自己的用戶表中，以便調(diào)取使用。在APP上使用融云聊天時token時只需要獲取自己的token就可以。APP我使用的方法是用戶登錄后get獲取token然后寫入到本地數(shù)據(jù)庫中，然后從本地調(diào)用（這樣有點安全性問題）class類classServerAPI{private$appKey;//appKeyprivate$appSecret;//secretconstSERVERAPIURL='.rong.io';〃請求服務(wù)地址private$format;〃數(shù)據(jù)格式j(luò)son/xml/***參數(shù)初始化@param$appKey@param$appSecret@paramstring$format/publicfunction_construct($appKey,$appSecret,$format='json'){$this->appKey=$appKey;$this->appSecret=$appSecret;$this->format=$format;}/**獲取Token方法@param$userId用戶Id，最大長度32字節(jié)。是用戶在App中的唯一標(biāo)識碼，必須保證在同一個App內(nèi)不重復(fù)，重復(fù)的用戶Id將被當(dāng)作是同一用戶。@param$name用戶名稱，最大長度128字節(jié)。用來在Push推送時，或者客戶端沒有提供用戶信息時，顯示用戶的名稱。@param$portraitUri用戶頭像URI，最大長度1024字節(jié)。@returnjson|xml/publicfunctiongetToken($userId,$name,$portraitUri){try{if(empty($userId))thrownewException('用戶Id不能為空')；if(empty($name))thrownewException('用戶名稱不能為空')；if(empty($portraitUri))thrownewException('用戶頭像URI不能為空')；$ret=$this->curl(7user/getToken',array('userId'=>$userId,'name'=>$name,'portraitUri'=>$portraitUri));if(empty($ret))thrownewException('請求失敗');return$ret;}catch(Exception$e){print_r($e->getMessage());}}}下面開始聊天的程序，大體思路為：打開好友對話窗口—加載融云模塊--—初始化融云—連接融云(我的token)--—發(fā)送消息(對方用戶ID)|-加載―--初始化—鏈接—監(jiān)聽消息首先我們來先實現(xiàn)給指定用戶發(fā)送消息(結(jié)合chatBox)JS1.獲取指定用戶ID，一般情況下是從其他頁面?zhèn)鬟f過來的(比如好友列表)，加載chatBox模塊下面代碼里面有三個自定義函數(shù)，getMessage(mytoken);監(jiān)聽獲取最新消息sendMessage(mytoken,sendMsg);發(fā)送消息getImgsPaths(sourcePathOfChatBox,callback);表情圖片類的處理這三個后面會有單獨說明vartouserid=null;好友ID全局apiready=function(){touserid=api.pageParam.touserid;//好友用戶IDvarmytoken=$api.getStorageCtoken');//我的tokengetMessage(mytoken);〃獲取最新消息，后面會有專門介紹〃引入chatboxvarchatBox=api.require('chatBox');varsourcePath="widget://image/emotion";//表情存放目錄varemotionData;//存儲表情getImgsPaths(sourcePath,function(emotion){emotionData=emotion;})chatBox.open({〃按鈕類，圖片URL就根據(jù)實際情況來switchButton:{faceNormal:"widget://image/chatBox_face1.png",faceHighlight:"widget://image/chatBox_face1.png",addNormal:"widget://image/chatBox_add1.png",fbAPICloudfbAPICloud/r/fbAPICloudfbAPICloud/r/addHighlight:"widget://image/chatBox_add1.png",keyboardNormal:"widget://image/chatBox_key1.png",keyboardHighlight:"widget://image/chatBox_key1.png"},sourcePath:sourcePath},function(ret,err){/**1.用戶輸入文字或表情*//*用戶輸入表情或文字*//*使用讀文件方法，讀json*/varsendMsg=transText(ret.msg);〃發(fā)送消息sendMessage(mytoken,sendMsg);//發(fā)送消息的函數(shù)，后面會有介紹/*將文字中的表情符號翻譯成圖片，并可自定義圖片尺寸*/functiontransText(text,imgWidth,imgHeight){varimgWidth=imgWidth||30;varimgHeight=imgHeight||30;varregx=八[(.*?)\]/gm;vartextTransed=text.replace(regx,function(match){varimgSrc=emotionData[match];if(!imgSrc){〃說明不對應(yīng)任何表情，直接返回returnmatch;}varimg="<imgsrc="+imgSrc+"width="+imgWidth+”height="+imgHeight+">";returnimg;});returntextTransed;}});}這樣頁面就成功加載了chatBox模塊，下面先介紹一下表情圖片類的處理函數(shù)，看不明白的就直接拿去使用了/*一個工具方法：可以獲取所有表情圖片的名稱和真實URL地址，以JSON對象形式返回。其中以表情文本為屬性名，以圖片真實路徑為屬性值*/functiongetImgsPaths(sourcePathOfChatBox,callback){varjsonPath=sourcePathOfChatBox+"/emotion.json";/H情的JSON數(shù)組api.readFile({path:jsonPath},function(ret,err){if(ret.status){varemotionArray=JSON.parse(ret.data);varemotion={};for(varidxinemotionArray){varemotionitem=emotionArray[idx];varemotionText=emotionitem["text"];varemotionUrl=”../image/emotion/"+emotionItem["name"]+".png";emotion[emotionText]=emotionUrl;}/*把emotion對象回調(diào)出去*/if("function"===typeof(callback)){callback(emotion);}}})；}.使用融云發(fā)送消息先加載融云模塊，在初始化，初始化后鏈接，發(fā)送消息sendMessage(mytoken,content);我的token，消息內(nèi)容〃發(fā)送消息functionsendMessage(mytoken,content){varrong=api.require('rongCloud');rong.init();〃初始化rong.connect({token:mytoken/俄的token},function(ret,err){if(ret.status=="success"){rong.sendTextMessage({conversationType:平區(qū)1丫人丁七',//類型targetid:touserid,〃好友ID，因為是設(shè)置了全局，所以直接拿來使用了text:content,〃消息內(nèi)容extra:''},function(ret,err){if(ret.status=='prepare'){〃準(zhǔn)備發(fā)送$("#messageList").append('<divclass="sender"><divclass="sender-avatar"><imgsrc="/uploadfile/member/1/avatar/1.jpg"></div><divclass="sender-cont"><divclass="right_triangle"></div><span>'+ret.result.message.content.text+'</span><divid="status_'+ret.result.message.messageId+”'class="status">準(zhǔn)備發(fā)送時的狀態(tài)，可以加載一張loading圖片</div></div></div>');}elseif(ret.status=='success'){〃發(fā)