融云隶属于北京云中融信网络科技有限公司。是国内首家专业的即时通讯云服务提供商，专注为互联网、移动互联网开发者提供即时通讯基础能力和云端服务。
Alexa排名百度权重百度预估流量百度收录单月收录百度索引量百度反链数关键词数 445931006796169014 81Alexa流量排名PR值谷歌收录谷歌反链数360收录360反链数搜狗收录反链数4.17万1200366016919.20万760 48
融云7031融云rongcloud11融云rongcloud12融云7033融云rongcloud13
融云1391融云1396融1.14万7融云1399云2.12万11iOS SDK 语音及图片消息详解 - 融云 RongCloud
Android 开发文档
web 开发文档
iOS SDK 语音及图片消息详解
本文档将详细介绍融云的语音及图片消息接口功能及使用说明。阅读本文前，我们假设您已经阅读了融云 iOS 开发指南，并掌握融云 SDK 的基本用法。
用来发送语音片段消息，您可以通过融云客户端 IMLib 接口或 Server API 接口发送语音消息。如果您使用的是融云 IMKit 则该功能已经在 SDK 中封装好，直接使用即可。以下为通过融云 IMLib 及 Server API 发送语音消息的方法。
从客户端发送消息
获取要发送的语音数据 wavData，并获得语音时长，通过 sendMessage 方法，传入相应的参数即可发送语音消息，方法说明参见 。
消息类名：
代码示例：
- (void)sendVoiceMessage:(NSData *)wavData duration:(long)duration targetId:(NSString *)targetId conversationType:(RCConversationType)conversationType {
//语音消息实体
RCVoiceMessage *voiceMessage = [RCVoiceMessage messageWithAudio:wavData duration:duration];
[[RCIMClient sharedRCIMClient] sendMessage:conversationType targetId:targetId content:voiceMessage pushContent:nil pushData:nil success:^(long messageId) {
//NSLog(@&发送语音消息成功&);
} error:^(RCErrorCode nErrorCode, long messageId) {
//NSLog(@&发送语音消息失败，错误码是(%ld)&, (long)nErrorCode);
建议录音参数如下：
rcVoiceRecorderHandler.recordSettings = @{
AVFormatIDKey : @(kAudioFormatLinearPCM),
AVSampleRateKey : @8000.00f,
AVNumberOfChannelsKey : @1,
AVLinearPCMBitDepthKey : @16,
AVLinearPCMIsNonInterleaved : @NO,
AVLinearPCMIsFloatKey : @NO,
AVLinearPCMIsBigEndianKey : @NO
注意：建议语音消息时长最小为 1 秒，最长不能超过 60 秒。语音格式为 WAV，在消息通讯过程中语音消息都是通过转码成 AMR 格式，在 Base64 编码后进行传输。
从服务端发送消息
如果您需要从服务端发送语音消息，融云也提供了 Server API 接口，下面以发送单聊消息为例，说明如何发送语音消息。
调用 Server API 接口发送语音消息前，您需要需要将语音内容进行 Base64 编码 Encode 后，需要将所有 \r\n 替换成空，否则无法进行正确解析。
消息 ObjectName：RC:VcMsg
消息的结构：{&content&:&bhZPzJXimRwrtvc=&,&duration&:7,&extra&:&&}
其中 content 为语音消息录制转码成 AMR 格式后，进行 Base64 编码 Encode 后的结果值，duration 为语音消息的时长（单位：秒），extra 可以放置任意的数据内容，也可以去掉此属性。
注意：在对内容进行 Base64 编码 Encode 后，需要将所有 \r\n 替换成空，否则无法进行正确解析。建议语音消息时长最小为 1 秒，最长不能超过 60 秒。语音格式为 AMR。
代码示例：
POST /message/private/publish.json HTTP/1.1
App-Key: uwd1c0sxdlx2
Timestamp:
Nonce: 14314
Signature: 890b422b75c1c5cb706e4fe69c17f4
Content-Type: Application/x-www-form-urlencoded
content={&content&:&IyFBTVIKPJEXFr5meeHgAeev8&,&duration&:3,&extra&:&helloExtra&}&fromUserId=2191&toUserId=2191&toUserId=2192&objectName=RC:TxtMsg&pushContent=thisisapush&pushData={\&pushData\&:\&hello\&}&count=1
HTTP/1.1 200 OK
Content-Type: application/ charset=utf-8
{&code&:200}
发送单聊消息方法参数说明，。
接收语音消息解析
融云 SDK 接收到语音消息时，会按以下方式进行解析：
- (void)decodeWithData:(NSData *)data {
__autoreleasing NSError *__error =
if (!data) {
NSDictionary *dictionary = [NSJSONSerialization JSONObjectWithData:data
options:kNilOptions
error:&__error];
RCDictionary *json = [[RCDictionary alloc] initWithDictionary:dictionary];
NSString *jsonStream =
[[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
NSDictionary *json = [RCJSONConverter dictionaryWithJSONString:jsonStream];
if (json) {
NSString *base64Audio = [json stringObjectForKey:@&content&];
self.extra = [json stringObjectForKey:@&extra&];
if (base64Audio) {
NSData *audioData =
if (class_getInstanceMethod(
[NSData class],
@selector(initWithBase64EncodedString:options:))) {
audioData = [[NSData alloc] initWithBase64EncodedString:base64Audio
options:kNilOptions];
audioData = [RCUtilities dataWithBase64EncodedString:base64Audio];
NSData *decodedData = [[RCAMRDataConverter sharedAMRDataConverter]
dcodeAMRToWAVE:audioData];
self.wavAudioData = decodedD
self.duration = [[json numberObjectForKey:@&duration&] longValue];
用来发送图片类消息，您可以通过融云客户端 IMLib 接口或 Server API 接口发送图片消息。如果您使用的是融云 IMKit 则该功能已经在 SDK 中封装好，直接使用即可。以下为通过融云 IMLib 及 Server API 发送图片消息的方法。
图片发送机制
图片消息包括两个主要部分：缩略图和大图，缩略图直接 Base64 编码后放入 content 中，大图首先上传到文件服务器（融云 SDK 中默认上传到七牛云存储，图片有效期为 6 个月。），然后将云存储上的大图地址放入消息体中。流程示意如下：
App -& RongCloud IM SDK: 调用发送图片消息接口
RongCloud IM SDK -& File Server: 上传大图，到文件服务器
RongCloud IM SDK --& App: 更新图片上传进度
File Server --& RongCloud IM SDK: 上传成功，返回上传大图的地址
RongCloud IM SDK -& RongCloud IM Server: 发送图片消息（内附缩略图内容和大图地址）
RongCloud IM Server --& RongCloud IM SDK: 返回发送成功状态
RongCloud IM SDK --& App: 返回发送成功状态
如果，您在发送图片消息时，希望将图片上传到自己的服务器然后发送图片消息。流程示意如下：
App -& RongCloud IM SDK: 调用发送图片消息接口
RongCloud IM SDK -& RongCloud IM SDK: 存储图片消息
RongCloud IM SDK --& App: 通过 App 上传图片到文件服务器
App -& App File Server: 上传大图，到自己的文件服务器
App -& RongCloud IM SDK: 更新图片上传进度
App File Server --& App: 上传成功，返回上传大图的地址
App -& RongCloud IM SDK: 通过融云发送消息，并附带图片地址
RongCloud IM SDK -& RongCloud IM Server: 发送图片消息（内附缩略图内容和大图地址）
RongCloud IM Server --& RongCloud IM SDK: 返回发送成功状态
RongCloud IM SDK --& App: 返回发送成功状态
图片缩略图机制
缩略图尺寸为：240 x 240 像素，以宽度和高度中较长的边不超过 240 像素等比压缩。
大图尺寸为：960 x 960 像素，以宽度和高度中较长的边不超过 960 像素等比压缩。
从客户端发送消息
调用 sendMessage 方法，传入相应的参数即可发送图片消息。方法说明，请参见 。
消息类名：
代码示例：
- (void)sendImageMessage:(UIImage *)originImage targetId:(NSString *)targetId conversationType:(RCConversationType)conversationType {
//图片消息实体
RCImageMessage *imageMessage = [RCImageMessage messageWithImage:originImage];
//设置full为YES，会发送原图。不设置默认发送经过压缩的图片。
//imageMessage.full = YES;
[[RCIMClient sharedRCIMClient] sendImageMessage:conversationType targetId:targetId content:imageMessage pushContent:nil progress:^(int progress, long messageId) {
//这里更新文件上传进度
} success:^(long messageId) {
//上传成功
} error:^(RCErrorCode errorCode, long messageId) {
//上传失败
如果，您在发送图片消息时，希望将图片上传到自己的服务器然后发送图片消息，代码示例如下：
- (void)sendImageMessage2AppServer:(UIImage *)originImage targetId:(NSString *)target conversationType:(RCConversationType)conversationType {
//图片消息实体
RCImageMessage *imageMessage = [RCImageMessage messageWithImage:originImage];
[[RCIMClient sharedRCIMClient] sendImageMessage:conversationType targetId:target content:imageMessage pushContent:nil pushData:nil uploadPrepare:^(RCUploadImageStatusListener *uploadListener) {
//在这里上传。上传要告诉融云状态和结果
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
int i = 0;
for (i = 0; i & 100; i++) {
//上传图片到自己服务器，并通知融云进度，进度范围时0-100
uploadListener.updateBlock(i);
[NSThread sleepForTimeInterval:0.2];
//通知融云上传结果，参数是上传成功的url
uploadListener.successBlock(@&/images/newVersion/bannerInner.png?0717&);
} progress:^(int progress, long messageId) {
//在这里更新UI进度。
} success:^(long messageId) {
//消息发送成功
} error:^(RCErrorCode errorCode, long messageId) {
//消息发送失败
sendImageMessage 方法说明，请参见 。
从服务端发送消息
如果您需要从服务端发送图片消息，融云也提供了 Server API 接口，下面以发送单聊消息为例，说明如何发送图片消息。
消息 ObjectName：RC:ImgMsg
消息的结构：{&content&:&bhZPzJXimRwrtvc=&,&imageUri&:&/fds78ruhi.jpg&,&extra&:&&}
其中 content 为图片内容进行 Base64 编码的结果值，imageUri 为图片上传到图片存储服务器后的地址，extra 可以放置任意的数据内容，也可以去掉此属性。
代码示例：
POST /message/private/publish.json HTTP/1.1
App-Key: uwd1c0sxdlx2
Timestamp:
Nonce: 14314
Signature: 890b422b75c1c5cb706e4fe69c17f4
Content-Type: Application/x-www-form-urlencoded
content={&content&:&bhZPzJXimRwrtvc=&,&icon&:&/p1.png&,&imageUri&:&/1.jpg&,&extra&:&helloExtra&}&fromUserId=2191&toUserId=2191&toUserId=2192&objectName=RC:TxtMsg&pushContent=thisisapush&pushData={\&pushData\&:\&hello\&}&count=1
HTTP/1.1 200 OK
Content-Type: application/ charset=utf-8
{&code&:200}
发送单聊消息方法参数说明，。融云消息与推送概念答疑 - 融云 RongCloud
Android 开发文档
web 开发文档
融云消息与推送概念答疑
广大融云开发者在进行融云相关开发过程中，经常遇到对消息体系、推送机制的各种概念困扰。同时，大家对通知、推送，广播、系统消息等概念又没有统一的认识，造成了认知和沟通困难。这里我们为大家详细的解答下融云的整个消息和推送体系设计，以便大家可以更好的使用融云进行开发。
命名约定与概念解析
融云所有技术和业务文档都将遵循下述命名约定，大家在提交工单时，也请注意用准确的概念描述您的需求或者问题。
通知（Notification）是一种用户界面展现概念，是指在设备端以某种形式弹出一条提示。
在 iOS 平台，表现为如图：
在 Android 平台，表现为如图：
Android 通知
通知分为本地通知（Local Notification）和远程通知（Remote Notification）。尽管您看到的是一样的界面展现，但是他们分别来自本地发起和远程发起。本地通知指的是您的应用程序在前台、或者在后台但仍然在生命周期存活，此时收到消息，会直接通过前台的应用程序弹出提示窗口。远程通知指的是您的应用程序已经完全退出，应用进程已经不存在，此时通过 iOS 上的 APNS 系统服务或者 Android 上的服务进程收到消息，并弹出提示栏。大家开发和调试过程中，务必要清楚本地通知和远程通知的区别。
推送（Push）是一种技术概念，是指从服务端实时发送信息到客户端。
大家概念中的典型推送服务是类似 APNS（Apple Push Notification Service）、GCM（Google Cloud Messaging） 等服务。在国内，由于谷歌服务不能使用，因此您的应用必须使用第三方或者自己研发的服务来推送。
因为融云是使用长连接技术来实现 IM 服务的，和典型的 Push 服务具有相同的长连接机制，所以，很多开发者也会直接使用融云来实现推送功能。
在某些场合，iOS 平台的推送（通过 APNS 的 Push）和远程通知（Remote Notification）表示相同的意思，可以互相替换使用。
融云现在已推出 Push 服务产品，详情请参见。
广播（Broadcast）是一种业务概念，是通过后台管理界面或者调用服务端接口，向 App 中的所有用户发送一条消息。通常“广播”和“推送”是开发者容易产生混淆的地方。
系统消息（System Message）是一种业务概念，是指利用系统帐号（非用户帐号，用户不可登录）向用户发送的消息，既可以是通过调用广播接口发送给所有人的消息，也可以是加好友等单条通知消息。
在融云平台中，其实并不存在系统消息的概念，一般系统消息特指会话类型（ConversationType）为“系统（SYSTEM）”的会话中的消息。
iOS 平台消息与推送逻辑解析
本地通知与远程通知
首先要了解 iOS 的通知推送概念。大家平时看到的 iOS 弹出的提示，其实是由两种完全不同的机制产生的：
第一种：本地通知（Local Notification）
本地通知是通过调用本地接口 [[UIApplication sharedApplication] presentLocalNotificationNow:notification];，由 iOS 设备直接生成发布的。
第二种：远程通知（Remote Notification）
远程通知是通过苹果 APNS（Apple Push Notification Service） 服务发送到客户端的通知。
远程通知的注册
开发者必须在上传推送证书并在客户端注册、获取 deviceToken 后，将 deviceToken 告诉融云，才能具备远程通知能力。
如果您的业务需要 iOS 应用程序具备接收推送的能力，那么您就必须要上传 iOS 推送证书（.p12 格式），证书分为两种：
第一种：开发证书（Developer Certification）
开发证书用于测试环境在开发和调试时使用，如果用开发证书打包应用安装在手机上，只能在测试环境使用功能。
第二种：发布证书（Distribution Certification）
发布证书用于生产环境在 App Store 发布时使用，如果用发布证书打包应用安装在手机上，只能在生产环境（线上）使用功能。
选择需要 Push 推送消息的应用在应用标识模块中，上传 .p12 证书文件后，才能收到融云 Push 推送消息。
注意：上传证书时，开发证书在 开发 / 测试环境处上传，发布证书在 生产 / 线上环境处上传。
deviceToken
deviceToken 用于 APNS 的，从苹果服务器获取的设备唯一标识。
您需要将获取到的 deviceToken 通过 setDeviceToken 方法传给融云，才能收到苹果的 APNS 远程通知，否则在您的应用退出之后，将无法收到消息的远程通知。
如何获取 deviceToken
消息与通知推送逻辑
通过调用融云的服务端 API 接口向用户推送消息，服务端推送消息目前支持以下几种消息类型：
添加联系人消息
提示条（小灰条）通知消息
资料通知消息
通用命令消息
详细的文档说明请参见 Server 开发指南中 。
向用户推送消息，分为用户在线状态和离线状态两种情况：
第一种：离线状态
用户不在线情况下，会对所有绑定了设备的 iOS 用户，发送远程通知。流程如下：
App / App Server -& RongCloud Server: 应用或应用服务端向目标用户发送消息
RongCloud Server -& RongCloud Server: 判断用户在线状态
RongCloud Server -& RongCloud Server: 获取已绑定设备的未在线用户
RongCloud Server -& APNS: 向目标用户，发送消息到 APNS 服务
APNS -& App: 通过苹果 APNS 服务，发送远程通知至客户端
第二种：在线状态
用户在线情况下，则会直接向客户端发送通知消息。流程如下：
App / App Server -& RongCloud Server: 应用或应用服务端向目标用户发送消息
RongCloud Server -& RongCloud Server: 判断用户在线状态
RongCloud Server -& App: 对在线用户，直接发送消息
注意：应用切换至后台 2 分钟后，将自动切断与服务器的连接，此时应用为离线状态，新消息将会以 Push 方式推送。
用户在线状态下，应用在前台显示时，不会收到消息通知。
自定义推送文字
开发者可以通过 pushContent 自定义设置用户收到推送消息时显示的内容。如果推送消息时未填写 pushContent 则显示默认消息内容，如：文本消息显示文本内容，图片消息显示为“[图片]”。
开发者使用 pushContent 自定义推送文字后，需要在客户端实现 – onRCIMCustomLocalNotification:withSenderName: 此方法是当 App 处于后台时，接收到消息并弹出本地通知的回调方法，。
注意：如果开发者推送的不是融云内置的消息类型，为自定义消息类型时，pushContent 必须填写，否则用户无法收到推送通知。
详细请参见 Server 开发指南中。
自定义推送声音与振动
推送声音，用户收到推送消息时的通知提示音，融云消息推送提示声音与振动，默认为手机系统设置的声音与振动提示状态。
在 iOS 平台下，开发者可通过开发者后台，应用标识 -& 自定义 Push 声音 中输入 iOS 系统声音名，重新设置生产和开发环境的推送提示音，如果开发者使用的是自己创建的声音，而不是 iOS 系统声音，需要开发者将自己创建的声音一同打包到应用程序中，然后在开发者后台 自定义 Push 声音 处输入声音文件名保存即可。
自定义 Push 声音
自定义推送附加数据
推送附加数据，推送消息时同消息一起推送到客户端的附加文本信息，可通过 pushData 字段实现（pushData 对应 payload 字段）。
如果开发者在推送一条消息后，希望消息接收端进行一些特殊的逻辑处理，可以在推送消息时设置 pushData 内容，客户端收到信息解析后为对应的 pushData ，根据 pushData
中的附加信息，进行对应的处理操作。
推送消息文档请参见 Server 开发指南中 ，客户端请参见 。
全局与会话消息免打扰
如果用户不想受到消息提醒的干扰，融云提供两种消息免打扰方式：全局消息免打扰和会话消息免打扰。
全局消息免打扰，设置后用户在接收通过融云客户端或服务端发送的所有消息时，如果客户端在后台运行，将不会进行通知提醒，但可以收到消息内容。如果客户端为离线状态，将不会收到提醒。
会话消息免打扰，根据会话类型、会话 Id 设置消息提醒状态，设置后如果客户端在后台运行时，会话中有新的消息，将不会进行通知提醒，可以收到消息内容。如果客户端为离线状态，将不会收到提醒。
Android 平台通知与推送逻辑解析
消息与通知推送逻辑
通过调用融云的服务端 API 接口向用户推送消息，服务端推送消息目前支持以下几种消息类型：
添加联系人消息
提示条（小灰条）通知消息
资料通知消息
通用命令消息
详细的文档说明请参见 Server 开发指南中。
向用户推送消息，分为用户在线状态和离线状态两种情况：
第一种：离线状态
用户不在线情况下，会对所有需要收到消息的用户，发送远程通知。流程如下：
App / App Server -& RongCloud Server: 应用或应用服务端向目标用户发送消息
RongCloud Server -& RongCloud Server: 判断用户在线状态
RongCloud Server -& RongCloud Push Server: 向未在线目标用户，发消息到 RongCloud Push Server
RongCloud Push Server -& App: 向目标用户，发送远程通知至客户端
第二种：在线状态
用户在线情况下，则会直接向客户端发送通知消息。流程如下：
App / App Server -& RongCloud Server: 应用或应用服务端向目标用户发送消息
RongCloud Server -& RongCloud Server: 判断用户在线状态
RongCloud Server -& App: 对在线用户，直接发送消息
自定义推送文字
开发者可以通过 pushContent 自定义设置用户收到推送消息时显示的内容。如果推送消息时未填写 pushContent 则显示默认消息内容，如：文本消息显示文本内容，图片消息显示为“[图片]”。
注意：如果开发者推送的不是融云内置的消息类型，为自定义消息类型时，pushContent 必须填写，否则用户无法收到推送通知。
详细请参见 Server 开发指南中。
自定义推送声音与振动
推送声音是用户收到推送消息时的通知提示音，融云消息推送提示声音与振动，默认为手机系统设置的声音与振动提示状态。
如果开发者想自定义消息推送提示音与振动状态，可以在和 方法中自行处理，并在两个方法中返回 true 告知融云 SDK 走自己的处理方式。
在接收消息监听中可以对的提示音和振动状态进行处理，。
在 Push 消息监听中可以对的提示音和振动状态进行处理，。
自定义推送附加数据
推送附加数据是推送消息时同消息一起推送到客户端的附加文本信息，可通过 pushData 字段实现。
如果开发者在推送一条消息后，希望在消息接收端进行一些特殊的逻辑处理，可以在推送消息时设置 pushData 内容，客户端收到信息解析后为对应的 pushData ，根据 pushData
中的附加信息，进行对应的处理操作。
推送消息文档请参见 Server 开发指南中。
消息免打扰
如果用户不想受到消息提醒的干扰，融云提供两种消息免打扰方式：全局消息免打扰和会话消息免打扰。
全局消息免打扰，设置后用户在接收通过融云客户端或服务端发送的所有消息时，如果客户端在后台运行，将不会进行通知提醒，但可以收到消息内容。如果客户端为离线状态，将不会收到提醒。
会话消息免打扰，根据会话类型、会话 Id 设置消息提醒状态，设置后如果客户端在后台运行时，会话中有新的消息，将不会进行通知提醒，可以收到消息内容。如果客户端为离线状态，将不会收到提醒。
广播与系统消息
广播消息是给应用中的所有用户发送一条消息，如果用户未在线，会对所有未在线并满足推送条件的用户发送 Push 通知，发送方法请参见。
系统消息是用应用内的系统帐号向一个或多个用户发送系统消息，如果目标用户未在线，会对所有未在线并满足推送条件的用户发送 Push 通知，发送方法请参见。APICloud平台的融云2.0集成分析
项目需要IM模块,最后还是选择了融云.在iOS原生开发中,融云sdk集成了聊天界面,给开发者提供了很大的便利,但是在apicloud平台上,由于开发者应用IM的场景各异,需求不统一,所以官方没有将聊天界面集成到模块中.
因此我选择了AUI这套专门为apicloud提供的框架进行IM界面的搭建.AUI官方地址:.
这套框架集成了很多手机端的UI,效果不错,而且还在不断的更新中,大家不妨尝试一下.我用过其中的几个,总体感觉还是不错的!
接下来,就具体的说一说RongYun集成的步骤了(本文会不断的更新,若发现不妥之处和需要改进的地方,可以给我留言,谢谢!)
一.准备工作
在集成融云2.0之前,首先要到融云官网上进行注册,然后添加应用信息,并且生成两个测试用的targetId并记录下对应的token(这种方法仅为测试使用) 融云的官网:
之后在API调试里面 生成userID对应的token,这些信息在初始化融云时会用到,
之后再次生成一个userID,并记录对应的token.这样,就相当于建立了两个用户,用户A和用户B,,之后便可实现用户A与用户B之间的通信了.
上述内容准备完之后,就要在自己的apicloud应用中添加融云2.0模块了. apicloud中的融云集成之前的准备在此略过,可以参照官方文档.
二.融云2.0的集成
在详细的介绍之前,先要说一说这个聊天界面使用的框架和模板.
1.doT.js (不熟悉的小伙伴可以参照这篇博客: /kuikui/p/3505768.html)
2.AUI 前端UI框架(地址在上面给过了,很实用,小伙伴们可以看一看).
3.UIChatBox, 文档地址:/端API/界面布局/UIChatBox#m11
好了,有了这几个,就可以轻松的完成一个简单的聊天界面的集成了!
1.融云2.0的初始化
首先要在config文件里填入一下代码
关于初始化,有一点一定要知道:融云对于整个应用初始化只需要一次， 再次初始化或者 connect 就会出错.
apiready = function () {
//RongY初始化
var rong = api.require('rongCloud2');
rong.init(function (ret, err) {
if (ret.status == 'error') {
api.toast({msg: err.code});
api.toast({msg: &success&});
//链接到RongY
rong.connect({
token: '自己的token'
function (ret, err) {
alert(JSON.stringify(ret));
if (ret.status == 'success') {
api.toast({msg: ret.result.userId});
isConnetced =
alert(isConnetced);
//实时监听收到的消息
上述代码是在进入聊天界面之前,对融云sdk进行的init和connect方法.
2.聊天界面UI
聊天界面UI就用到了AUI和doT.js.以下是详细的代码
&script id="message-content-template" type="text/x-dot-template"&
{{for(var i=0;i<it.i++){}}
{{? it[i].tag=== &#39;TxtMsg&#39;}}
{{? it[i].messageDirection=== &#39;SEND&#39;}}
{{=it[i].sentTime}}
{{?? it[i].messageDirection=== &#39;RECEIVE&#39;}}
{{=it[i].receivedTime}}
{{=it[i].content.text}}
{{? it[i].tag === &#39;ImgMsg&#39;}}
{{? it[i].messageDirection=== &#39;SEND&#39;}}
{{=it[i].sentTime}}
{{?? it[i].messageDirection=== &#39;RECEIVE&#39;}}
{{=it[i].receivedTime}}
{{? it[i].tag === &#39;VcMsg&#39;}}
{{? it[i].messageDirection=== &#39;SEND&#39;}}
{{=it[i].sentTime}}
{{?? it[i].messageDirection=== &#39;RECEIVE&#39;}}
{{=it[i].receivedTime}}
{{=it[i].content.duration}}"
{{? it[i].content.duration <= &#39;15&#39;}}
<span style="width: {{=it[i].content.duration * 15}}height: 30 border-radius: 5 background: green"
onclick="playVoice(&#39;{{=it[i].messageId}}&#39;, &#39;{{=it[i].content}}&#39;)">
整个聊天界面的UI就是这些代码了,还是很简单的吧~~当然了,这里只实现了基本的功能,代码后续会不断的更新.
在JS部分,要写的就是各种点击方法,数据的加载这些内容了,我们一个个的来看
到目前为止,我只集成了文本消息,图片消息,语音消息,定位消息(获取发送者位置,通过文本消息发送).
3.1 文本消息的发送
//发送消息
function sengTxtMsg(p) {
if (isConnetced) {
var rong = api.require(&#39;rongCloud2&#39;);
rong.sendTextMessage({
conversationType: &#39;PRIVATE&#39;,
targetId: &#39;&#39;,
text: p.msg,
extra: &#39;&#39;
}, function (ret, err) {
alert(JSON.stringify((ret)));
//这里要判断消息类型,最后设定消息标签.
if (ret.status == &#39;prepare&#39;) {
if (ret.result.message.objectName == &RC:TxtMsg&) {
tag = &TxtMsg&;
} else if (ret.result.message.objectName == &RC:ImgMsg&) {
tag = &ImgMsg&;
} else if (ret.result.message.objectName == &RC:VcMsg&) {
tag = &VcMsg&;
} else if (ret.result.message.objectName == &RC:LBSMsg&) {
tag = &LBSMsg&;
firstSendType: &aui-chat-sender&,
secondSendType: &aui-chat-sender-avatar&,
thirdSendType: &aui-chat-sender-cont&,
fourthSendType: &aui-chat-right-triangle&,
content: ret.result.message.content,
sentTime: getTrueTime(ret.result.message.sentTime),
//发送类型
messageDirection: &SEND&
//这里我设置的每隔3分钟才会生成一个时间戳,如果没到三分钟时间为空,就显示不出来了
if (!timeTag) {
para.sentTime = &&;
else if (ret.status == &#39;success&#39;) {
//doT.js的拼接
msgObj.push(para);
var interText = doT.template($(&#message-content-template&).text());
$(&#message-content2&).html(interText(msgObj));
$(&img.lazy&).lazyload();
document.getElementsByTagName(&#39;BODY&#39;)[0].scrollTop = document.getElementsByTagName(&#39;BODY&#39;)[0].scrollH
//时间戳判断为false 不再发送
else if (ret.status == &#39;error&#39;)
api.toast({msg: err.code});
api.alert({
msg: &未连接到服务器&
ok,再简单的说明一下:通过点击键盘发送按钮,获取到输入框的文本信息,将其作为参数传递到该方法中,通过该方法将消息发送到用户B.
可见iPhone模拟器上及时的收到了我发送的文本消息.
3.2 图片消息的发送
//发送图片
function sendPictures(index) {
var type = &&;
if (index == &0&) {
type = &#39;album&#39;;
getPicture(type);
} else if (index == &1&) {
type = &#39;camera&#39;;
getPicture(type);
getLocation();
//获取图片
function getPicture(type) {
api.getPicture({
sourceType: type,
encodingType: &#39;jpg&#39;,
mediaValue: &#39;pic&#39;,
destinationType: &#39;url&#39;,
allowEdit: false,
quality: 80,
targetWidth: 100,
targetHeight: 100,
saveToPhotoAlbum: false
}, function (ret, err) {
if (ret) {
var rong = api.require(&#39;rongCloud2&#39;);
rong.sendImageMessage({
conversationType: &#39;PRIVATE&#39;,
targetId: &#39;&#39;,
imagePath: ret.data,
extra: &#39;&#39;
}, function (ret, err) {
alert(JSON.stringify((ret)));
if (ret.status == &#39;prepare&#39;) {
if (ret.result.message.objectName == &RC:TxtMsg&) {
tag = &TxtMsg&;
} else if (ret.result.message.objectName == &RC:ImgMsg&) {
tag = &ImgMsg&;
} else if (ret.result.message.objectName == &RC:VcMsg&) {
tag = &VcMsg&;
} else if (ret.result.message.objectName == &RC:LBSMsg&) {
tag = &LBSMsg&;
firstSendType: &aui-chat-sender&,
secondSendType: &aui-chat-sender-avatar&,
thirdSendType: &aui-chat-sender-cont&,
fourthSendType: &aui-chat-right-triangle&,
content: ret.result.message.content,
sentTime: getTrueTime(ret.result.message.sentTime),
//发送类型
messageDirection: &SEND&
//判断时间
if (!timeTag) {
para.sentTime = &&;
else if (ret.status == &#39;progress&#39;) {
api.toast({msg: ret.result.progress});
else if (ret.status == &#39;success&#39;) {
//时间戳判断为false 不再发送
msgObj.push(para);
var interText = doT.template($(&#message-content-template&).text());
$(&#message-content2&).html(interText(msgObj));
$(&img.lazy&).lazyload();
document.getElementsByTagName(&#39;BODY&#39;)[0].scrollTop = document.getElementsByTagName(&#39;BODY&#39;)[0].scrollH
else if (ret.status == &#39;error&#39;) {
api.toast({msg: &请检查当前网络状态&});
alert(JSON.stringify(err));
在做一下简要的说明:首先判断图片的来源:(1).用户相册 (2).相机 从相应的来源选取图片后就开始执行图片发送的方法了.
在手机上拍了一张电脑的图片发送后,iPhone模拟器就会收到刚刚收到的图片信息了.
3.3 语音消息发送
//发送语音消息
function sendVoiceMsg(para) {
var rong = api.require(&#39;rongCloud2&#39;);
rong.sendVoiceMessage({
conversationType: &#39;PRIVATE&#39;,
targetId: &#39;&#39;,
voicePath: para.path,
duration: para.duration,
extra: &#39;&#39;
}, function (ret, err) {
alert(JSON.stringify(ret));
if (ret.status == &#39;prepare&#39;) {
api.toast({ msg: JSON.stringify(ret.result.message) });
if (ret.result.message.objectName == &RC:TxtMsg&) {
tag = &TxtMsg&;
} else if (ret.result.message.objectName == &RC:ImgMsg&) {
tag = &ImgMsg&;
} else if (ret.result.message.objectName == &RC:VcMsg&) {
tag = &VcMsg&;
} else if (ret.result.message.objectName == &RC:LBSMsg&) {
tag = &LBSMsg&;
firstSendType: &aui-chat-sender&,
secondSendType: &aui-chat-sender-avatar&,
thirdSendType: &aui-chat-sender-cont&,
fourthSendType: &aui-chat-right-triangle&,
content: ret.result.message.content,
sentTime: getTrueTime(ret.result.message.sentTime),
//发送类型
messageDirection: &SEND&
//判断时间
if (!timeTag) {
param.sentTime = &&;
else if (ret.status == &#39;success&#39;) {
//改变时间戳状态
msgObj.push(param);
alert(JSON.stringify(msgObj));
alert(JSON.stringify(msgObj[msgObj.length - 1]));
var interText = doT.template($(&#message-content-template&).text());
$(&#message-content2&).html(interText(msgObj));
$(&img.lazy&).lazyload();
document.getElementsByTagName(&#39;BODY&#39;)[0].scrollTop = document.getElementsByTagName(&#39;BODY&#39;)[0].scrollH
else if (ret.status == &#39;error&#39;) {
api.toast({ msg: err.code });
发送语音消息前要先调用api.startRecord()方法记录刚才的录音,最后通过上述方法将语音发送给对方.
上面就是我刚才发送的一连串语音消息了.
3.4 消息的接收
消息的接收,要用到 rong.setOnReceiveMessageListener这个方法.也就是这个方法会监听你收到的消息.具体代码如下
var rong = api.require(&#39;rongCloud2&#39;); rong.setOnReceiveMessageListener(function (ret, err) { // alert(JSON.stringify(ret)); if (ret.result.message.objectName == &RC:TxtMsg&) { tag = &TxtMsg&; } else if (ret.result.message.objectName == &RC:ImgMsg&) { tag = &ImgMsg&; } else if (ret.result.message.objectName == &RC:VcMsg&) { tag = &VcMsg&; } else if (ret.result.message.objectName == &RC:LBSMsg&) { tag = &LBSMsg&; } para = { firstSendType: &aui-chat-receiver&, secondSendType: &aui-chat-receiver-avatar&, thirdSendType: &aui-chat-receiver-cont&, fourthSendType: &aui-chat-left-triangle&, content: ret.result.message.content, tag: tag, receivedTime: getTrueTime(ret.result.message.receivedTime), messageDirection: &RECEIVE& }; if (!timeTag) { para.receivedTime = &&; } msgObj.push(para); var interText = doT.template($(&#message-content-template&).text()); $(&#message-content2&).html(interText(msgObj)); $(&img.lazy&).lazyload(); document.getElementsByTagName(&#39;BODY&#39;)[0].scrollTop = document.getElementsByTagName(&#39;BODY&#39;)[0].scrollH //时间戳状态 timeTag = });
上面就是三条通过iPhone模拟器发送的消息,一条语音消息,一条图片消息,一天文字消息.
3.4 获取历史消息
获取历史消息也用对应的方法.而且这些消息是存在本地的,所以获取很方便
//获取最近聊天信息 function getRecentConverMsg() { // alert(num); var rong = api.require(&#39;rongCloud2&#39;); //先获取之前的聊天记录 rong.getHistoryMessages({ conversationType: &#39;PRIVATE&#39;, targetId: &#39;&#39;, oldestMessageId: -1, count: 500 }, function (ret, err) { // api.refreshHeaderLoadDone(); var arr = []; arr = ret. // alert(JSON.stringify(arr)); //记录最早的时间戳 $api.setStorage(&#39;time&#39;, arr[arr.length - 1].receivedTime); for (var i = arr.length - 1; i &= 0; i--) { if (arr[i].messageDirection == &SEND&) { arr[i].firstSendType = &aui-chat-sender&; arr[i].secondSendType = &aui-chat-sender-avatar&; arr[i].thirdSendType = &aui-chat-sender-cont&; arr[i].fourthSendType = &aui-chat-right-triangle&; } else { arr[i].firstSendType = &aui-chat-receiver&; arr[i].secondSendType = &aui-chat-receiver-avatar&; arr[i].thirdSendType = &aui-chat-receiver-cont&; arr[i].fourthSendType = &aui-chat-left-triangle&; } if (arr[i].objectName == &RC:TxtMsg&) { arr[i].tag = &TxtMsg&; } else if (arr[i].objectName == &RC:ImgMsg&) { arr[i].tag = &ImgMsg&; } else if (arr[i].objectName == &RC:VcMsg&) { arr[i].tag = &VcMsg&; } else if (arr[i].objectName == &RC:LBSMsg&) { } //如果时间间隔大于五分钟 加上时间戳 if (arr[i].receivedTime - $api.getStorage(&time&) &= 180000) { // alert(&yes&); $api.setStorage(&#39;time&#39;, arr[i].receivedTime); arr[i].receivedTime = getTrueTime(arr[i].receivedTime); arr[i].sentTime = getTrueTime(arr[i].sentTime); } else { arr[i].receivedTime = &&; arr[i].sentTime = &&; } msgObj.push(arr[i]); } var interText = doT.template($(&#message-content-template&).text()); $(&#message-content2&).prepend(interText(msgObj)); $(&img.lazy&).lazyload(); document.getElementsByTagName(&#39;BODY&#39;)[0].scrollTop = document.getElementsByTagName(&#39;BODY&#39;)[0].scrollH }); }
这样,我可以获取到之前3.31的聊天记录.
到这里,最基本的功能介绍完了,后续的功能还有很多,比如图片的查看,保存图片到本地,语音的播放等等,都是小问题了,这些代码就不放上来了.}