《在APICloud平台中融云IM云服务的使用教程》由会员分享，可在线阅读，更多相关《在APICloud平台中融云IM云服务的使用教程（7页珍藏版）》请在金锄头文库上搜索。
1、在 APICloud 平台中，融云 IM 云服务的使用教程实现功能：融云会话聊天及 UI，发送表情消息使用模块：rongCloud chatBox教程开始：因为融云为第三方模块，每次调试都得需要云编译，建议大家先把 UI 和基本代码做好。JS 插件使用：zepto.min.js一、UI 的制作效果图：CSS 代码：/*会话消息容器*/#messageList padding: 15px 0; overflow: hidden;/*接收消息类，左侧*/.receiver clear:both;.receiver .receiver-avatarfloat: left; .receiver .re
2、ceiver-avatar img width: 50px; height: 50px;.receiver .receiver-contbackground-color: #faff72; float: left;margin: 0 20px 10px 15px; padding: 10px; border-radius:7px; max-width: 60%; position: relative;.receiver .status width: 30px; height: 30px; position: absolute; right: -35px; top: 3px;/*发送消息类，右侧
3、*/.senderclear:both;.sender .status width: 30px; height: 30px; position: absolute; left: -35px; top: 3px; font-size: 18px; font-weight: 700; color: #990000;.sender .status img width: 30px; height: 30px;.sender .sender-avatarfloat: right;.sender .sender-avatar img width: 50px; height: 50px;.sender .s
4、ender-contfloat:right; background-color: #15b5e9; margin: 0 10px 10px 20px; 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 #faff72 transparent transparent; posit
5、ion: absolute; left:-16px; top:6px; .right_triangle height:0px; width:0px; border-width:8px; border-style:solid; border-color:transparent transparent transparent #15b5e9; position: absolute; right:-16px; top:6px;发送内容发送内容上面的就直接拿去复制使用了-二、融云的链接融云的链接需要用到 token 了，我们可以在自己的服务器搭建一个生成获取 token 的方法。这个方法在融云的文档里
6、面有介绍，以 php 为例:生成用户的 token 要使用到用户 ID，用户昵称，用户头像。网站上的每个用户都需要对应一个 token，可以将这个 token 写入到自己的用户表中，以便调取使用。在 APP 上使用融云聊天时 token 时只需要获取自己的 token 就可以。APP 我使用的方法是用户登录后 get 获取 token 然后写入到本地数据库中，然后从本地调用（这样有点安全性问题）class 类class ServerAPIprivate $appKey; /appKeyprivate $appSecret; /secretconst SERVERAPIURL = https:/
7、.rong.io; /请求服务地址private $format; /数据格式 json/xml/* 参数初始化* param $appKey* param $appSecret* param string $format*/public function _construct($appKey,$appSecret,$format = json)$this-appKey = $appKey;$this-appSecret = $appSecret;$this-format = $format;/* 获取 Token 方法* param $userId 用户 Id，最大长度 32 字节。是用户在
8、 App 中的唯一标识码，必须保证在同一个 App 内不重复，重复的用户 Id 将被当作是同一用户。* param $name 用户名称，最大长度 128 字节。用来在 Push 推送时，或者客户端没有提供用户信息时，显示用户的名称。* param $portraitUri 用户头像 URI，最大长度 1024 字节。* return json|xml*/public function getToken($userId,$name,$portraitUri) tryif(empty($userId)throw new Exception(用户 Id 不能为空);if(empty($name)t
9、hrow new Exception(用户名称 不能为空);if(empty($portraitUri)throw new Exception(用户头像 URI 不能为空);$ret = $this-curl(/user/getToken,array(userId=$userId,name=$name,portraitUri=$Uri);if(empty($ret)throw new Exception(请求失败);return $ret;catch (Exception $e) print_r($e-getMessage();下面开始聊天的程序，大体思路为：打开好友对话窗口-加载融云模块 -
10、初始化融云- 连接融云（我的 token）-发送消息（对方用户 ID）|-加载-初始化-链接-监听消息首先我们来先实现给指定用户发送消息（结合 chatBox）JS1.获取指定用户 ID，一般情况下是从其他页面传递过来的（比如好友列表） ，加载 chatBox模块下面代码里面有三个自定义函数，getMessage(mytoken);-监听获取最新消息sendMessage(mytoken,sendMsg);-发送消息getImgsPaths(sourcePathOfChatBox, callback);-表情图片类的处理这三个后面会有单独说明var touserid = null;好友 ID
11、全局apiready = function()touserid = api.pageParam.touserid;/好友用户 IDvar mytoken = $api.getStorage(token);/我的 tokengetMessage(mytoken);/获取最新消息，后面会有专门介绍/引入 chatboxvar chatBox = api.require(chatBox);var sourcePath = widget:/image/emotion;/表情存放目录var emotionData;/存储表情getImgsPaths(sourcePath, function (emoti
12、on) emotionData = emotion;)chatBox.open(/按钮类，图片 URL 就根据实际情况来switchButton:faceNormal:widget:/image/chatBox_face1.png,faceHighlight:widget:/image/chatBox_face1.png,addNormal: widget:/image/chatBox_add1.png,addHighlight: widget:/image/chatBox_add1.png,keyboardNormal: widget:/image/chatBox_key1.png,keyb
13、oardHighlight: widget:/image/chatBox_key1.png,sourcePath: sourcePath,function(ret,err)/*1.用户输入文字或表情*/*用户输入表情或文字*/*使用读文件方法，读 json*/var sendMsg = transText(ret.msg);/发送消息sendMessage(mytoken,sendMsg);/发送消息的函数，后面会有介绍/*将文字中的表情符号翻译成图片，并可自定义图片尺寸*/function transText(text, imgWidth, imgHeight)var imgWidth =
14、imgWidth | 30;var imgHeight = imgHeight | 30;var regx = /(.*?)/gm;var textTransed = text.replace(regx,function(match)var imgSrc = emotionDatamatch;if(!imgSrc)/说明不对应任何表情，直接返回return match;var img = ;return img;);return textTransed;);这样页面就成功加载了 chatBox 模块，下面先介绍一下表情图片类的处理函数,看不明白的就直接拿去使用了/*一个工具方法：可以获取所有表
15、情图片的名称和真实 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 idx in emotionArray)var
