跳到主要内容

版本:2.X

消息发送

功能描述

消息属性消息描述消息属性消息描述
消息类名各端消息名ObjectName传输层名称,与消息类名一一对应
存储属性存储 / 不存储计数属性计数 / 不计数
离线属性缓存 / 不缓存消息尺寸128 KB
推送属性是/否推送内容详见各消息类送方式

存储属性

存储属性存储分类支持平台详细描述
存储客户端Android、iOS发送、接收该消息后,本地数据库存储
Web 端 和 小程序端因本地存储不可靠,不支持客户端消息存储,但可通过历史消息云存储服务获取历史记录
存储云端Android、iOS、Web默认不在云端进行存储,需开通历史消息云存储服务,开通后,可在融云服务端存储 6 个月的历史消息,供客户端按需拉取
不存储客户端Android、iOS发送、接收该消息后,本地数据库不存储
不存储云端Android、iOS、Web无论是否开通历史消息云存储服务,该消息均不存储

计数属性

接收收到消息时,会话是否累计未读数。

计数属性支持平台详细描述
计数iOS、Android、Web会话未读消息数 + 1,该属性只影响会话列表未读数计数,App 应用角标可根据每个会话列表未读数累加获得
不计数iOS、Android、Web会话未读消息数不变

离线属性

接收人当前不在线时,是否进行离线缓存。

离线属性详细描述
存储消息进行离线缓存,默认 7 天。接收人在 7 天内上线,均可接收到该消息。超过 7 天后,消息被离线缓存淘汰。如有需要,可通过云端存储拉取到该消息
不存储消息不进行离线缓存,所以只有接收人在线时,才可收到该消息。该消息不进行历史消息云存储、不进入云端存储( Log 日志 )、不进行消息同步( 消息路由 )

推送属性

接收人是否接收推送,当离线属性为 存储 时,该属性生效。离线属性为 不存储 时属性无效。

由于 Web、小程序、PC 端没有推送平台,无法收到推送提醒。

推送属性平台推送方式详细描述
​推送iOS、AndroidAPNS、华为、小米、魅族、OPPO、vivo、FCM、融云当有离线缓存消息时,进行远程推送提醒,内容为该推送提醒显示的内容
​不推送iOS、Android--当有离线缓存消息时,不进行远程推送提醒
危险
  1. 发送消息必须在成功连接融云服务器 connect 成功之后进行。
  2. 每秒最多发送 5 条消息。

发送普通消息

参数需按顺序传入,顺序为参数说明中的字段顺序。

API 参考:sendMessage

sendMessage 参数说明

参数类型必填说明最低版本
conversationTypeNumber会话类型,聊天室会话传入 RongIMLib.ConversationType.CHATROOM2.2.0
targetIdString聊天室 ID2.2.0
msgObject消息2.2.0
callbackObject回调对象2.2.0
callback.onSuccessFunction成功回调2.2.0
callback.onErrorFunction失败回调2.2.0
isMentionedBoolean是否为 @ 消息2.2.0
pushContentStringPush 显示内容2.2.0
pushDataStringPush 通知时附加信息2.2.0
methodTypeNumber该参数已废弃2.6.0
configObject其他设置项2.5.3

config 说明:

参数类型必填说明最低版本
userIdsArray接收定向消息的用户 id2.2.0
isVoipPushBoolean为 true 时, 对端不在线的 iOS 会收到 Voip Push. Android 无影响2.5.3
disableNotificationBoolean是否发送静默消息,设置为 true 后不会发送 Push 信息和本地通知提醒2.5.9
canIncludeExpansionBoolean是否支持扩展2.6.0
expansionObject扩展内容2.6.0
isStatusMessageBoolean是否为状态消息2.6.0
isStatusBoolean该参数已废弃,请使用 isStatusMessage 替代该参数。在 isStatusMessage 有值的情况下,该参数将失效2.6.0

代码示例

var conversationType = RongIMLib.ConversationType.CHATROOM;  // 群聊, 其他会话选择相应的消息类型即可
var targetId = '聊天室 ID'; // 目标 Id
var msg = new RongIMLib.TextMessage({ content: 'hello RongCloud!', extra: '附加信息'});
var callBack = {
onSuccess: function (message) {
// message 为发送的消息对象并且包含服务器返回的消息唯一 id 和发送消息时间戳
console.log('发送文本消息成功', message);
},
onError: function (errorCode) {
console.log('发送文本消息失败', errorCode);
}
};
var isMentioned = false; // @ 消息
var pushContent = 'user 发送了一条消息'; // Push 显示内容
var pushData = null; // Push 通知时附加信息, 可不填
var config = {
isVoipPush: true // 发送 voip push
};
RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, callBack, isMentioned, pushContent, pushData, pushData, config);

message 属性说明

字段名类型说明
conversationTypeNumber会话类型,聊天室会话传入 RongIMLib.ConversationType.CHATROOM
targetIdString聊天室 ID
senderUserIdString发送者 id
contentObject消息内容
objectNameString消息的消息标识,融云内置消息以 "RC:" 开头
messageTypeString消息类型
messageIdNumber本地生成的消息 id
messageUIdString服务端存储的消息 id
messageDirectionNumber消息方向, 发送: 1, 接收: 2, 枚举值通过 RongIMLib.MessageDirection 获取
offLineMessageBoolean是否为离线消息
sentStatusNumber发送状态, 枚举值通过 RongIMLib.SentStatus 获取, PC 端有效,Web 端无效
sentTimeNumber消息在融云服务端的发送时间
receivedStatusNumber接收状态, 枚举值通过RongIMLib.ReceivedStatus 获取
receivedTimeNumber接收时间
disableNotificationBoolean消息是否静默,静默消息不会发送 Push 信息和本地通知提醒

文本消息

API 参考:sendMessage

消息说明

消息类名ObjectName存储属性计数属性离线属性推送属性推送内容
TextMessageRC:TxtMsg存储计数存储推送消息内容

TextMessage 参数说明

属性名称属性类型是否必填属性说明
contentString文本消息内容
extraString附加信息,一般为消息不显示消息内容

代码示例

var textMessageInfo = {
content: 'hello RongCloud!',
extra: '附加信息'
}
var msg = new RongIMLib.TextMessage(textMessageInfo);
var conversationType = RongIMLib.ConversationType.CHATROOM;
var targetId = '聊天室 ID'; // 目标 ID

RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, {
onSuccess: function (message) {
// message 为发送的消息对象并且包含服务器返回的消息唯一 id 和发送消息时间戳
console.log('发送文本消息成功', message);
},
onError: function (errorCode) {
console.log('发送文本消息失败', errorCode);
}
});

图文消息

API 参考:sendMessage

消息说明

消息类名ObjectName存储属性计数属性离线属性推送属性推送内容
RichContentMessageRC:ImgTextMsg存储计数存储推送消息内容

参数说明

属性名称属性类型是否必填属性说明
contentString图文内容
titleString图文标题
imageUriString图片上传到服务器的 url
urlString富文本消息点击后打开的 URL
extraString附加信息,一般为消息不显示消息内容

代码示例

var msg = new RongIMLib.RichContentMessage({
title: '图文标题',
content: '图文内容',
imageUri: '图片上传到服务器的 url',
url: '富文本消息点击后打开的 URL'
});
var conversationType = RongIMLib.ConversationType.CHATROOM;
var targetId = '聊天室 ID';

RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, {
onSuccess: function (message) {
console.log('发送富文本消息成功', message);
},
onError: function (errorCode) {
console.log('发送富文本消息失败', errorCode);
}
});

Emoji 消息

  • web 端发送 Emoji 消息,开发者直接使用文本消息发送即可。
  • 融云提供 Emoji 插件,内置了 128 个 Emoji 表情的图片, 做消息输入框的表情选项, 也可自行扩展配置。
  • 发消息时, 必须直接发送 Emoji 原生字符. 如:😀 , 转换方法:symbolToEmoji
  • Web SDK 接收消息时接收到的是 Unicode 编码格式, 如:”ef600” 需要转化才能正确显示原生 Emoji。

API 参考:sendMessage

代码示例

var textMessageInfo = { content: '😀' }
var msg = new RongIMLib.TextMessage(textMessageInfo);
var conversationType = RongIMLib.ConversationType.CHATROOM;
var targetId = '聊天室 ID'; // 目标 ID

RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, {
onSuccess: function (message) {
// message 为发送的消息对象并且包含服务器返回的消息唯一 id 和发送消息时间戳
console.log('发送 Emoji 消息成功', message);
},
onError: function (errorCode) {
console.log('发送 Emoji 消息失败', errorCode);
}
});

Emoji 插件

插件兼容性

ChromeFirefoxSafariIEEdgeiPhoneAndroid
30+30+10+7+✔️iOS 8.0+ 的Safari浏览器以及微信浏览器4.4+系统的Chrome浏览器以及微信浏览器

Emoji 插件引入

<!-- HTTP -->
<script src="http://cdn.ronghub.com/RongEmoji-2.2.11.js"></script>
<!-- HTTPS -->
<script src="https://cdn.ronghub.com/RongEmoji-2.2.11.js"></script>
<!-- 压缩版 -->
<script src="https://cdn.ronghub.com/RongEmoji-2.2.11.min.js"></script>

Emoji 代码示例 : https://rongcloud.github.io/web-emoji-demo/src/index.html

危险
  1. 使用 import * as RongIMLib from '@rongcloud/imlib-v2-adapter' 方式引入 SDK 时表情插件调用需要使用 window 前缀。例如:window.RongIMLib.RongIMEmoji.init()
  2. RongEmoji 插件仅支持 cdn 引入方式,暂不支持 npm 引入

Emoji 初始化:默认参数初始化

RongIMLib.RongIMEmoji.init();

Emoji 初始化:自定义表情配置初始化

config 参数说明:

参数类型必填说明最低版本
sizeNumber表情大小, 默认 24, 建议 18 - 582.2.6
urlStringEmoji 背景图片 url2.2.6
langStringEmoji 对应名称语言, 默认 zh2.2.6
extensionObject扩展表情2.2.6
// 表情信息可参考 http://unicode.org/emoji/charts/full-emoji-list.html
var config = {
size: 25,
url: '//f2e.cn.ronghub.com/sdk/emoji-48.png',
lang: 'en',
extension: {
dataSource: {
u1F914: { // 自定义 u1F914 对应的表情
en: 'thinking face', // 英文名称
zh: '思考', // 中文名称
tag: '🤔', // 原生 Emoji
position: '0 0' // 所在背景图位置坐标
}
},
url: '//cdn.ronghub.com/thinking-face.png' // 新增 Emoji 背景图 url
}
};
RongIMLib.RongIMEmoji.init(config);

获取列表

var list = RongIMLib.RongIMEmoji.list;
/*list => [{
unicode: 'u1F600',
emoji: '😀',
node: span,
symbol: '[笑嘻嘻]'
}]
*/

Emoji 转文字

在不支持原生 Emoji 渲染时,可显示对应名称,适用于消息输入。

var message = '😀😁测试 Emoji';
// 将 message 中的原生 Emoji 转化为对应名称
RongIMLib.RongIMEmoji.emojiToSymbol(message);
// => '[笑嘻嘻][露齿而笑]测试 Emoji'

文字转 Emoji

发送消息时,消息体里必须使用原生 Emoji 字符。

var message = '[笑嘻嘻][露齿而笑]测试 Emoji';
// 将 message 中的 Emoji 对应名称转化为原生 Emoji
RongIMLib.RongIMEmoji.symbolToEmoji(message);
// => '😀😁测试 Emoji'

Emoji 转 HTML

Web SDK 接收消息后,消息体内的原生 Emoji 字符会被解码为对应 Unicode 码,需调用转化方法才能正确显示。

var message = '\uf600测试 Emoji';
// 将 message 中的原生 Emoji (包含 Unicode ) 转化为 HTML
RongIMLib.RongIMEmoji.emojiToHTML(message);
// => "<span class='rong-emoji-content' name='[笑嘻嘻]'>😀</span>测试 Emoji"

文字 转 HTML

var message = '[露齿而笑]测试 Emoji';
// 将 message 中的 Emoji 对应名称转化为 HTML
RongIMLib.RongIMEmoji.symbolToHTML(message);
// => "<span class='rong-emoji-content' name='[露齿而笑]'>😁</span>测试 Emoji"

位置消息

API 参考:sendMessage

消息说明

消息类名ObjectName存储属性计数属性离线属性推送属性推送内容
LocationMessageRC:LBSMsg存储计数存储推送[位置]

LocationMessage 参数说明

属性名称属性类型是否必填属性说明
longitudeNumber经度
latitudeNumber纬度
poiString位置信息
contentString位置缩略图,图片需要是不带前缀的 base64 字符串
extraString附加信息,一般为消息不显示消息内容

代码示例

var locatMessageInfo = {
latitude: 40.0317727,
longitude: 116.4175057,
poi: '融云',
content: '/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABsSFBcUERsXFhceHBsgKE', // 位置图片 base64
}
var msg = new RongIMLib.LocationMessage(locatMessageInfo);

var conversationType = RongIMLib.ConversationType.CHATROOM;
var targetId = '聊天室 ID'; // 目标 ID
RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, {
onSuccess: function (message) {
console.log('发送位置消息成功', message);
},
onError: function (errorCode) {
console.log('发送位置消息失败', errorCode);
}
});

正在输入状态消息

API 参考:sendMessage

消息说明

消息类名ObjectName存储属性计数属性离线属性推送属性推送内容
TypingStatusMessageRC:TypSts不存储不计数不存储不推送

TypingStatusMessage 参数说明

属性名称属性类型是否必填属性说明
typingContentTypeString正在输入的消息 ObjectName
dataString携带信息

代码示例

var typingContentType = 'RC:TxtMsg';
var msg = new RongIMLib.TypingStatusMessage({ typingContentType: typingContentType});

var conversationType = RongIMLib.ConversationType.CHATROOM;
var targetId = '聊天室 ID'; // 目标 Id
RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, {
onSuccess: function (message) {
console.log('发送已读通知成功', message);
},
onError: function (errorCode) {
console.log('发送已读通知失败', errorCode);
}
});

发送媒体消息

API 参考:sendMessage

sendMessage 参数说明

参数类型必填说明最低版本
conversationTypeNumber会话类型,聊天室会话传入 RongIMLib.ConversationType.CHATROOM2.2.0
targetIdString聊天室 ID2.2.0
msgObject消息2.2.0
callbackObject回调对象2.2.0
callback.onSuccessFunction成功回调2.2.0
callback.onErrorFunction失败回调2.2.0
isMentionedBoolean是否为 @ 消息2.2.0
pushContentStringPush 显示内容2.2.0
pushDataStringPush 通知时附加信息2.2.0
methodTypeNumber该参数已废弃2.6.0
configObject其他设置项2.5.3

config 说明:

参数类型必填说明最低版本
userIdsArray接收定向消息的用户 id2.2.0
isVoipPushBoolean为 true 时, 对端不在线的 iOS 会收到 Voip Push. Android 无影响2.5.3
disableNotificationBoolean是否发送静默消息,设置为 true 后不会发送 Push 信息和本地通知提醒2.5.9
canIncludeExpansionBoolean是否支持扩展2.6.0
expansionObject扩展内容2.6.0
isStatusMessageBoolean是否为状态消息2.6.0
isStatusBoolean该参数已废弃,请使用 isStatusMessage 替代该参数。在 isStatusMessage 有值的情况下,该参数将失效2.6.0

代码示例

var conversationType = RongIMLib.ConversationType.CHATROOM;
var targetId = '聊天室 ID'; // 目标 ID

var base64Str = '/9j/4AAQSBAAD/2wBDDBAYEBAQEB....'; // 压缩后的 base64 略缩图, 用来快速展示图片
var imageUri = 'https://www.rongcloud.cn/images/newVersion/log_wx.png'; // 上传到服务器的 url. 用来展示高清图片
var msg = new RongIMLib.ImageMessage({content: base64Str, imageUri: imageUri});

var callBack = {
onSuccess: function (message) {
console.log('发送图片消息成功', message);
},
onError: function (errorCode) {
console.log('发送图片消息失败', errorCode);
}
};

var isMentioned = false; // @ 消息
var pushContent = 'user 发送了一条消息'; // Push 显示内容
var pushData = null; // Push 通知时附加信息, 可不填
var config = {
isVoipPush: true // 发送 voip push
};

RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, callBack, isMentioned, pushContent, pushData, config);

message 属性说明

字段名类型说明
conversationTypeNumber会话类型,聊天室会话传入 RongIMLib.ConversationType.CHATROOM
targetIdString聊天室 ID
senderUserIdString发送者 id
contentObject消息内容
objectNameString消息的消息标识,融云内置消息以 "RC:" 开头
messageTypeString消息类型
messageIdNumber本地生成的消息 id
messageUIdString服务端存储的消息 id
messageDirectionNumber消息方向, 发送: 1, 接收: 2, 枚举值通过 RongIMLib.MessageDirection 获取
offLineMessageBoolean是否为离线消息
sentStatusNumber发送状态, 枚举值通过 RongIMLib.SentStatus 获取, PC 端有效,Web 端无效
sentTimeNumber消息在融云服务端的发送时间
receivedStatusNumber接收状态, 枚举值通过RongIMLib.ReceivedStatus 获取
receivedTimeNumber接收时间
disableNotificationBoolean消息是否静默,静默消息不会发送 Push 信息和本地通知提醒

图片消息

  • 发送图片消息只需要图片上传后的 url,和图片的略缩图。
  • 融云提供上传插件,文件存储到优先级高的云存储,插件不包含发送消息
  • 插件提供的是上传方式,开发者也可通过自己的方式将文件上传至自己文件服务
  • 融云默认上传文件存储有效期为 6 个月, 上传的文件不支持迁移。

API 参考:sendMessage

消息发送

消息说明

消息类名ObjectName存储属性计数属性离线属性推送属性推送内容
ImageMessageRC:ImgMsg存储计数存储推送[图片]

ImageMessage 参数说明

属性名称属性类型是否必填属性说明
contentString图片的略缩图,必须是 base64 字符串, 类型必须为 jpg,base64 字符串大小不可超过 10 KB,base64 略缩图必须不带前缀
imageUriString上传到服务器的 url. 用来展示高清图片
extraString附加信息,一般为消息不显示消息内容

代码示例

var base64Str = '/9j/4AAQSBAAD/2wBDDBAYEBAQEB....';  // 压缩后的 base64 略缩图, 用来快速展示图片
var imageUri = 'https://www.rongcloud.cn/images/newVersion/log_wx.png'; // 上传到服务器的 url. 用来展示高清图片
var msg = new RongIMLib.ImageMessage({content: base64Str, imageUri: imageUri});
var conversationType = RongIMLib.ConversationType.CHATROOM;
var targetId = '聊天室 ID'; // 目标 Id
var callback = {
onSuccess: function (message) {
console.log('发送图片消息成功', message);
},
onError: function (errorCode) {
console.log('发送图片消息失败', errorCode);
}
};
RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, callback);

图片上传

兼容性

ChromeFirefoxSafariIEEdge
49+52+✔️10+✔️

上传代码示例:https://github.com/rongcloud/rongcloud-web-im-upload

引入

<script src = "./send-data.js"></script>
<script src = "../upload.js"></script>
<script src="./init.js"></script>

上传 token

必须 IM SDK 连接成功后, 才能使用此方法

API 参考:getFileToken

参数说明

参数类型必填说明
fileTypeNumber上传类型, 通过 RongIMLib.FileType 获取
callbacksObject回调对象
fileNameString原文件名

代码示例

var fileType = RongIMLib.FileType.IMAGE;
RongIMClient.getInstance().getFileToken(fileType, {
onSuccess: function(data) {
console.log('上传 token 为', data.token);
},
onError: function(error) {
console.log('get file token error', error);
}
}, fileName)

开始上传

config 参数说明:

参数类型必填说明
domainString上传地址, 默认为七牛:https://upload.qiniup.com
fileTypeNumber上传类型
getTokenFunction获取 token 回调

代码示例

<!-- 创建 input 上传按钮 -->
<input id="uploadFile" type="file">
var file;
var fileType = RongIMLib.FileType.IMAGE;
var uploadEl = document.getElementById("uploadFile");

var getFileType = function(filename) {
// 默认支持两种图片格式,可自行扩展
var imageType = {
'jpg': 1,
'png': 2,
}
var index = filename.lastIndexOf('.') + 1,
type = filename.substring(index);
return type in imageType ? 'image': 'file';
};

var config = {
domain: '',
fileType,
getToken: function(callback) {
var caback={
onSuccess: function(data){
callback(data.token);
},
onError: function(){
console.error('get file token error', error);
}
}
RongIMClient.getInstance().getFileToken(fileType, caback, fileName);
}
};

var callback = {
onProgress: function(loaded, total) {
var percent = Math.floor(loaded / total * 100);
console.log('已上传: ', percent);
},
onCompleted: function(data) {
// 上传完成, 调用 getFileUrl 获取文件下载 url
console.log('上传成功: ', data);
},
onError: function(error) {
console.error('上传失败', error);
}
};

var initType = {
file: function(_file){
config.fileType = RongIMLib.FileType.FILE;
UploadClient.initFile(config, function(uploadFile){
uploadFile.upload(_file, callback);
});
},
image: function(_file){
UploadClient.initImage(config, function(uploadFile){
uploadFile.upload(_file, callback);
});
}
};


uploadEl.onchange = function() {
// 根据文件名选择不同的初始化方式
file = this.files[0]; // 上传的 file 对象;
initType[getFileType(file.name)](file);
}

下载 url

fileType 值需与 getFileToken 时传入的 fileType 值一致

API 参考:getFileUrl

参数说明

参数类型必填说明
fileTypeNumber上传类型, 通过 RongIMLib.FileType 获取
filenameString上传后的文件名, 上传成功后可通过 uploadCallbacks 的 onCompleted 中返回的 data 获取 ,对应属性 data.filename
orinameString文件原名, 上传成功后可通过 uploadCallbacks 的 onCompleted 中返回的 data 获取 , 对应属性 data.name
callbacksObject回调对象
dataObjectuploadCallbacks.onCompleted 回调返回数据
uploadMethodString服务器类型,上传成功后可通过 uploadCallbacks 的 onCompleted 中返回的 data 获取,对应属性data.uploadMethod

代码示例

// data 通过 uploadFile.upload 获取
var fileType ; // 文件类型
var filename = data.filename; // 通过 uploadCallbacks 的 onCompleted 中返回的 data 获取
var oriname = data.name; // 通过 uploadCallbacks 的 onCompleted 中返回的 data 获取
var uploadMethod = data.uploadMethod;
RongIMClient.getInstance().getFileUrl(fileType, filename, oriname, {
onSuccess: function(data) {
console.log('文件 url 为: ', data.downloadUrl);
},
onError: function(error) {
console.log('get file url error', error);
}
}, data,uploadMethod)

语音消息

提示
  • 语音上传请参照 文件上传 进行是实现。
  • HQVoiceMessage 消息支持版本: v2.5.0 及以上。

API 参考:sendMessage

消息说明

消息类名ObjectName存储属性计数属性离线属性推送属性推送内容
HQVoiceMessageRC:HQVCMsg存储计数存储推送[语音]

HQVoiceMessage 参数说明

属性名称属性类型是否必填属性说明
remoteUrlString媒体内容上传服务器后的网络地址
typeString编解码类型,默认为 aac 音频
durationNumber语音消息的时长,最长为 60 秒(单位:秒)
extraString附加信息,一般为消息不显示消息内容

代码示例

var messageInfo = {
remoteUrl: 'http://rongcloud-file.ronghub.com/1e0e4743249cd9653b.aac',//此地址为模拟地址仅作为示例使用
duration: 22,
extra: '附加信息'
}
var msg = new RongIMLib.HQVoiceMessage(messageInfo);
var conversationType = RongIMLib.ConversationType.CHATROOM;
var targetId = '聊天室 ID'; // 目标 ID

RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, {
onSuccess: function (message) {
// message 为发送的消息对象并且包含服务器返回的消息唯一 ID 和发送消息时间戳
console.log('发送语音消息成功', message);
},
onError: function (errorCode) {
console.log('发送语音消息失败', errorCode);
}
});

文件消息

  • 发送图片消息只需要图片上传后的 url,和图片的略缩图。
  • 融云提供上传插件,文件默认存储到七牛云插件不包含发送消息
  • 插件提供的是上传方式,开发者也可通过自己的方式将文件上传至自己文件服务
  • 融云默认上传文件存储有效期为 6 个月, 上传的文件不支持迁移。

API 参考:sendMessage

消息发送

消息类名ObjectName存储属性计数属性离线属性推送属性推送内容
FileMessageRC:FileMsg存储计数存储推送[文件] + 文件名,如:[文件] 123.txt

FileMessage 参数说明

属性名称属性类型是否必填属性说明
nameString文件名称
sizeNumber文件尺寸,单位: Byte
typeString文件类型
fileUrlString上传到服务器的 url
extraString附加信息,一般为消息不显示消息内容

代码示例

var msg = new RongIMLib.FileMessage({
name: 'RongIMLib.js', // 文件名,
size: 1024, // 文件大小单位 bytes
type: 'js', // 文件类型
fileUrl: 'https://cdn.ronghub.com/RongIMLib.js' // 文件地址
});
var conversationType = RongIMLib.ConversationType.CHATROOM;
var targetId = '聊天室 ID'; // 目标 ID
var callback = {
onSuccess: function (message) {
console.log('发送文件消息成功', message);
},
onError: function (errorCode) {
console.log('发送文件消息失败', errorCode);
}
};
RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, callback);

文件上传

兼容性

ChromeFirefoxSafariIEEdge
49+52+✔️10+✔️

上传代码示例:https://github.com/rongcloud/rongcloud-web-im-upload

引入

<script src = "./send-data.js"></script>
<script src = "../upload.js"></script>
<script src="./init.js"></script>

上传 token

必须 IM SDK 连接成功后, 才能使用此方法

API 参考:getFileToken

参数说明

参数类型必填说明
fileTypeNumber上传类型, 通过 RongIMLib.FileType 获取
callbacksObject回调对象
fileNameString原文件名

代码示例

var fileType = RongIMLib.FileType.FILE;
RongIMClient.getInstance().getFileToken(fileType, {
onSuccess: function(data) {
console.log('上传 token 为', data.token);
},
onError: function(error) {
console.log('get file token error', error);
}
}, fileName)

开始上传

config 参数说明:

参数类型必填说明
domainString上传地址, 默认为七牛:https://upload.qiniup.com
fileTypeNumber上传类型
getTokenFunction获取 token 回调

代码示例

<!-- 创建 input 上传按钮 -->
<input id="uploadFile" type="file">
var file;
var fileType = RongIMLib.FileType.IMAGE;
var uploadEl = document.getElementById("uploadFile");

var getFileType = function(filename) {
// 默认支持两种图片格式,可自行扩展
var imageType = {
'jpg': 1,
'png': 2,
}
var index = filename.lastIndexOf('.') + 1,
type = filename.substring(index);
return type in imageType ? 'image': 'file';
};

var config = {
domain: '',
fileType,
getToken: function(callback) {
var caback={
onSuccess: function(data){
callback(data.token);
},
onError: function(){
console.error('get file token error', error);
}
}
RongIMClient.getInstance().getFileToken(fileType, caback, fileName);
}
};

var callback = {
onProgress: function(loaded, total) {
var percent = Math.floor(loaded / total * 100);
console.log('已上传: ', percent);
},
onCompleted: function(data) {
// 上传完成, 调用 getFileUrl 获取文件下载 url
console.log('上传成功: ', data);
},
onError: function(error) {
console.error('上传失败', error);
}
};

var initType = {
file: function(_file){
config.fileType = RongIMLib.FileType.FILE;
UploadClient.initFile(config, function(uploadFile){
uploadFile.upload(_file, callback);
});
},
image: function(_file){
UploadClient.initImage(config, function(uploadFile){
uploadFile.upload(_file, callback);
});
}
};


uploadEl.onchange = function() {
// 根据文件名选择不同的初始化方式
file = this.files[0]; // 上传的 file 对象;
initType[getFileType(file.name)](file);
}

下载 url

fileType 值需与 getFileToken 时传入的 fileType 值一致

API 参考:getFileUrl

参数说明

参数类型必填说明
fileTypeNumber上传类型, 通过 RongIMLib.FileType 获取
filenameString上传后的文件名, 上传成功后可通过 uploadCallbacks 的 onCompleted 中返回的 data 获取 ,对应属性 data.filename
orinameString文件原名, 上传成功后可通过 uploadCallbacks 的 onCompleted 中返回的 data 获取 , 对应属性 data.name
callbacksObject回调对象
dataObjectuploadCallbacks.onCompleted 回调返回数据
uploadMethodString服务器类型,上传成功后可通过 uploadCallbacks 的 onCompleted 中返回的 data 获取,对应属性data.uploadMethod

代码示例

// data 通过 uploadFile.upload 获取
var fileType ; // 文件类型
var filename = data.filename; // 通过 uploadCallbacks 的 onCompleted 中返回的 data 获取
var oriname = data.name; // 通过 uploadCallbacks 的 onCompleted 中返回的 data 获取
var uploadMethod = data.uploadMethod;
RongIMClient.getInstance().getFileUrl(fileType, filename, oriname, {
onSuccess: function(data) {
console.log('文件 url 为: ', data.downloadUrl);
},
onError: function(error) {
console.log('get file url error', error);
}
}, data,uploadMethod)

小视频消息

注意
  1. 此消息类型 Web 端 SDK 仅支持解析展示,不提供录制。
  2. 如 Web 端需要发送小视频消息,小视频录制需要开发者自行实现。
  3. 如果 App Key 使用 IM 旗舰版IM 尊享版,文件存储时长默认为 180 天(不含小视频文件,小视频文件存储 7 天)。注意,IM 商用版(已下线)默认存储 7 天。如需了解IM 旗舰版IM 尊享版的具体功能与费用,请参见融云官方价格说明页面及计费说明

API 参考:sendMessage

消息说明

消息类名ObjectName存储属性计数属性离线属性推送属性推送内容
SightMessageRC:SightMsg存储计数存储推送[小视频]

SightMessage 参数说明

参数类型说明
sightUrlString上传到文件服务器的小视频地址
contentString小视频首帧的缩略图进行 Base64 编码的结果值,格式为 JPG,注意在 Base64 进行 Encode 后需要将所有
替换成空
durationNumber视频时长,单位:秒
sizeNumber视频大小单位 bytes
nameString发送端视频的文件名,小视频文件格式为 mp4。

代码示例

var params = {
content: "/9j/4AAQSkZ/2wB...hDSaSiimB//9k=",
sightUrl: "http://rongcloud...com/video...",
duration: 10,
size: 734320,
name: "video_xx.mp4",
}
var msg = new RongIMLib.SightMessage(params);
var conversationType = RongIMLib.ConversationType.CHATROOM;
var targetId = '聊天室 ID'; // 目标 ID
RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, {
onSuccess: function (message) {
// message 为发送的消息对象并且包含服务器返回的消息唯一 ID 和发送消息时间戳
console.log('发送小视频消息成功', message);
},
onError: function (errorCode) {
console.log('发送小视频消息失败', errorCode);
}
});

GIF 消息

API 参考:sendMessage

消息说明

消息类名ObjectName存储属性计数属性离线属性推送属性推送内容
GIFMessageRC:GIFMsg存储计数存储推送[图片]

GIFMessage 参数说明

参数类型说明
gifDataSizeNumberGIF 图片文件大小,单位为 bytes
remoteUrlStringGIF 图片的服务器地址
widthNumberGIF 图的宽
heightNumberGIF 图的高

代码示例


var messageInfo ={
gifDataSize:34563,
height:246,
remoteUrl:"https://rongcloud-image.cn.ronghub.com/image_jpe64562665566.gif",
width:263,
}
var msg = new RongIMLib.GIFMessage(messageInfo);
var conversationType = RongIMLib.ConversationType.CHATROOM; //选择相应的会话类型即可
var targetId = '聊天室 ID';
var callback = {
onSuccess: function (message) {
console.log('发送 GIF 消息成功', message);
},
onError: function (errorCode) {
console.log('发送 GIF 消息失败', errorCode);
}
};
RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, callback);

发送自定义消息

注册

危险
  1. 注册自定义消息代码必须在发送、接收该自定义消息之前
  2. 推荐将所有注册自定义消息代码放在 init 方法之后, connect 方法之前
  3. 注册的消息类型名, 必须多端一致, 否则消息无法互通
  4. 请勿使用 RC: 开头的类型名,以免和 SDK 默认的消息名称冲突

参数说明

参数类型说明
messageNameString消息名称
objectNameString消息类型名
mesasgeTagObject存储,计数标识
searchPropstring[]搜索字段,web 端无需设置,搜索字段值设置为数字时取值范围为 (-Math.pow(2, 64), Math.pow(2, 64)) 且为整数

代码示例

var messageName = 'PersonMessage';  // 消息名称
var objectName = 's:person'; // 消息类型名,请按照此格式命名
var isCounted = true; // 消息计数
var isPersited = true; // 消息保存
var mesasgeTag = new RongIMLib.MessageTag(isCounted, isPersited);
var searchProp = ['name', 'age']; // 搜索字段中的属性名
RongIMClient.registerMessageType(messageName, objectName, mesasgeTag, searchProp);

发送

API 参考:sendMessage

代码示例

var conversationType = RongIMLib.ConversationType.CHATROOM;
var targetId = '聊天室 ID';
var msg = new RongIMClient.RegisterMessage.PersonMessage({ name: 'zhang', age: 12 });

var callback = {
onSuccess: function (message) {
console.log('发送自定义消息成功', message);
},
onError: function (errorCode) {
console.log('发送自定义消息失败', errorCode);
}
};
RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, callback);

常见问题

Q1: 收到的表情信息无法解析, 表情显示有问题 A1: 解决方案:

  1. Web 端展示 Emoji 时, 都需要调用 emojiToHTML 转成 HTML 或者使用 symbolToEmoji 将 Unicode 转化成原生 Emoji 字符
  2. 发送消息时, 必须发送原生 Emoji 字符, 如果发送 HTML, 则认定发送的是字符串

Q2: 表情列表 每一个手机展示的表情不一样 A2: 解决方案:

  1. 消息体内的原生 Emoji 字符会被解码为对应 Unicode 码,需调用转化方法才能正确显示
  2. 不同浏览器, 不同设备, 展示的原生 Emoji 表情都不同
  3. 如需多端展示 Emoji 一致, 需使用 emojiToHTML 转化为 HTML 后再展示(此方法为以图片形式展示)。具体方法请参见 Emoji 消息