在APICloud平台中,融云IM云服务的使用教程

(SbAPICloud(SbAPICloud/r/在APICloud平台中，融云IM云服务的使用教程实现功能：融云会话聊天及，发送表情消息使用模块：rongCloudchatBox教程开始：因为融云为第三方模块，每次调试都得需要云编译，建议大家先把UI和基本代码做好。JS插件使用：zepto.min.js一、UI的制作效果图：中国移动我国'**百…//QSJ23:16你好相忘共见到榔在做什幺呢您你好相忘共见到榔在做什幺呢您CSS代码：/*会话消息容器*/#messageList{padding:15px0;overflow:hidden;}/*接收消息类，左侧*/.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;}/*发送消息类，右侧*/.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="发送用户头像"width="30"height="30">发送内容</span><divclass="status"><!--发送状态--></div></div></div><divclass="receiver"><divclass="receiver-avatar"><imgsrc="对方用户头像",</div><divclass="receiver-cont"><divclass="left_triangle"></div><span>发送内容</span></div></div></div>上面的就直接拿去复制使用了二、融云的链接融云的链接需要用到token了，我们可以在自己的服务器搭建一个生成获取token的方法。这个方法在融云的文档里面有介绍，以php为例：生成用户的token要使用到用户ID，用户昵称，用户头像。网站上的每个用户都需要对应一个token,可以将这个token写入到自己的用户表中，以便调取使用。在APP上使用融云聊天时token时只需要获取自己的token就可以。APP我使用的方法是用户登录后get获取token然后写入到本地数据库中，然后从本地调用（这样有点安全性问题）class类classServerAPI{private$appKey;//appKeyprivate$appSecret;//secretconstSERVERAPIURL='.rong.io';〃请求服务地址private$format;〃数据格式json/xml/***参数初始化@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字节。是用户在App中的唯一标识码，必须保证在同一个App内不重复，重复的用户Id将被当作是同一用户。@param$name用户名称，最大长度128字节。用来在Push推送时，或者客户端没有提供用户信息时，显示用户的名称。@param$portraitUri用户头像URI，最大长度1024字节。@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)--—发送消息(对方用户ID)|-加载―--初始化—链接—监听消息首先我们来先实现给指定用户发送消息(结合chatBox)JS1.获取指定用户ID，一般情况下是从其他页面传递过来的(比如好友列表)，加载chatBox模块下面代码里面有三个自定义函数，getMessage(mytoken);监听获取最新消息sendMessage(mytoken,sendMsg);发送消息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就根据实际情况来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);〃发送消息sendMessage(mytoken,sendMsg);//发送消息的函数，后面会有介绍/*将文字中的表情符号翻译成图片，并可自定义图片尺寸*/functiontransText(text,imgWidth,imgHeight){varimgWidth=imgWidth||30;varimgHeight=imgHeight||30;varregx=八[(.*?)\]/gm;vartextTransed=text.replace(regx,function(match){varimgSrc=emotionData[match];if(!imgSrc){〃说明不对应任何表情，直接返回returnmatch;}varimg="<imgsrc="+imgSrc+"width="+imgWidth+”height="+imgHeight+">";returnimg;});returntextTransed;}});}这样页面就成功加载了chatBox模块，下面先介绍一下表情图片类的处理函数，看不明白的就直接拿去使用了/*一个工具方法：可以获取所有表情图片的名称和真实URL地址，以JSON对象形式返回。其中以表情文本为属性名，以图片真实路径为属性值*/functiongetImgsPaths(sourcePathOfChatBox,callback){varjsonPath=sourcePathOfChatBox+"/emotion.json";/H情的JSON数组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对象回调出去*/if("function"===typeof(callback)){callback(emotion);}}})；}.使用融云发送消息先加载融云模块，在初始化，初始化后链接，发送消息sendMessage(mytoken,content);我的token，消息内容〃发送消息functionsendMessage(mytoken,content){varrong=api.require('rongCloud');rong.init();〃初始化rong.connect({token:mytoken/俄的token},function(ret,err){if(ret.status=="success"){rong.sendTextMessage({conversationType:平区1丫人丁七',//类型targetid:touserid,〃好友ID，因为是设置了全局，所以直接拿来使用了text:content,〃消息内容extra:''},function(ret,err){if(ret.status=='prepare'){〃准备发送$("#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">准备发送时的状态，可以加载一张loading图片</div></div></div>');}elseif(ret.status=='success'){〃发