Demostration of Rong Web SDK.
使用融云 web SDK
发消息之前必须利用申请的appkey
进行初始化,只有在初始化之后才能使用RongIMClient.getInstance()方法得到实例.如只想知晓如何使用 web SDK 请参考 SDK_Demo.html
http://res.websdk.rongcloud.cn/RongIMClient{-版本号}-min.js
如不添加则默认为最新版本SDK,添加版本号则加载指定版本SDK.
注意:本页中所使用的的SDK代码均为最新版SDK(0.9.7)代码,旧版(小于0.9.7)可能出现不兼容的情况.
RongIMClient.init("appkey");
RongIMClient.setConnectionStatusListener({
onChanged: function (status) {
console.log(status);
}
});
此方法为异步方法,请确定链接成功之后再执行其他操作。成功返回登录人员id失败则返回失败枚举对象
RongIMClient.connect("token", {
onSuccess: function (userid) {
window.console.log("connected,userid=" + userid)
},
onError: function (c) {
console.info("失败:"+c);
}
});
所有接收的消息都通过此监听器进行处理,可以通过message.getMessageType()和RongIMClient.MessageType枚举对象来判断消息类型
RongIMClient.getInstance().setOnReceiveMessageListener({
onReceived: function (message) {
//message为RongIMMessage子类实例
console.log(message.getContent());
}
});
var ins = RongIMClient.getInstance();
var contype = RongIMClient.ConversationType.PRIVATE;
element.onclick = function () {
//调用实例的发送消息方法
ins.sendMessage(contype, "targetId", RongIMClient.TextMessage.obtain("发送消息内容"), null, {
onSuccess: function () {
//发送成功逻辑处理
},
onError: function (x) {
console.info('发送失败:'+x);
}
});
};
//PC side
//-----------------------------------------------------------------------------------------
//|Desktop Feature| Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit)|
//----------------------------------------------------------------------------------------
//|Basic support | 3 | 3.5 | 6 | 12 | 4 |
//-----------------------------------------------------------------------------------------
//mobile side
//-----------------------------------------------------------------------------------------------------------------
//|Mobile Feature| Android | Chrome for Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile|
//-----------------------------------------------------------------------------------------------------------------
//|Basic support | ? | 0.16 (Yes) | ? | ? | ? | ? |
//-----------------------------------------------------------------------------------------------------------------
web SDK 通道才用层层降级的方式进行兼容处理。连接通道首先默认使用websocket,如环境不支持websocket则自动降级至flash socket,不支持flash则自定降级至xhr-polling,以此来达到全兼容的目的。
如果想强制使用长链接连接服务器则必须设置window.WEB_XHR_POLLING = true;
//强制使用长链接进行通讯 设置此项,并保证此项优先级最高并且最先被执行,否则设置无效
window.WEB_XHR_POLLING = true;
//强制使用flash进行通讯 设置此项,并保证此项优先级最高并且最先被执行,否则设置无效
window.WEB_SOCKET_FORCE_FLASH = true;
##通道选项优先级比较
window.WEB_SOCKET_FORCE_FLASH > window.WEB_XHR_POLLING
1 : web SDK
是全异步的,所以发送消息之前确保链接成功。
2 : 本demo仅做演示使用,页面不做兼容性考虑。
3 : 本web SDK
为强兼容性,demo的弱兼容性与SDK无关。
4 : 使用本示例的页面在商业上使用而引发的处理不当与本人以及本人所属组织无关。
5 : 本示例仅做演示,仅仅只做演示。未考虑低版本及部分版本浏览器兼容性。
6 : 浏览器兼容性项中未列出的浏览器版本项皆为不支持的浏览器版本
## 表情帮助库如何使用? `http://res.websdk.rongcloud.cn/RongIMClient.emoji-0.9.2.min.js` 融云官方表情帮助库引用地址。本表情库使用的是标准的 `emoji` 表情。本表情库一共有128个表情,默认为为22px*22px。表情库是基于 `web SDK` 的,使用之前请务必提前载入 `web SDK`.表情库中的方法均为`静态方法`.由于部分浏览器显示本表情的 `tag` 为一个小方块。无法得到内容。此处可用escape()方法得到表情 `tag` ```js console.log('\ud83d\ude00'); //例如chrome中显示 \ud83d\ude00 为一个小方块,可用escape()方法 var str = escape('\ud83d\ude00'); console.log(str); //返回%ud83d%ude00,将%替换为\既是表情的 tag 属性
//表情对象的格式为
var emojiObject={
englishName:'表情英文名称',
chineseName:'表情中文名称',
img:'一个nodeName为B的HTMLElement元素,背景为表情图片',
tag:'表情的标签,为一组unicode码'
}
#### RongIMClient.Expression.getAllExpression
得到指定数量的表情
```js
var emojiObjectList = RongIMClient.Expression.getAllExpression(64,0);
//从下标为0的位置检索64个表情对象,startIndex与count只和最大为128,因为表情对象最多为128个。
for(var i=0,item;item=emojiObjectList[i++];){
console.log(item.englishName,item.chineseName,item.img,item.tag);
//依次打印表情元素
}
根据表情的 content
( content
为一个UTF16码,可根据表情对象 tag
属性计算得到此UTF16码)来得到表情对象
var emojiObject = RongIMClient.Expression.getEmojiByContent('\u1F600');
//如果传入的不是合法UTF16码或者表情名单中不存在此UTF16码则返回 undeined
console.log(emojiObject);
根据表情的 content
计算得到表情的 tag
属性
var tag = RongIMClient.Expression.calcUTF('\u1F600');
console.log(tag);
//返回\ud83d\ude00 即将 \u1F600 计算为 \ud83d\ude00
根据表情的中文名称或者英文名称得到表情对象
var emojiObject = RongIMClient.Expression.getEmojiObjByEnglishNameOrChineseName("足球");
console.log(emojiObject);
检索传入的字符串中是否含有表情 tag
,如有则根据传入的callback函数执行制定操作,callback函数中 务必带返回值
var str = RongIMClient.Expression.retrievalEmoji('这是一个表情\ud83d\ude00',function(emojiObject){
console.log(emojiObject);
return emojiObject.chineseName;
});
console.log(str);
//打印为 这是一个表情狞笑
// IE 6+ 、chrome 3+ 、firefox 3.5+ 、safari 4+ 、 opera 12+
## 音频播放帮助库如何使用? `http://res.websdk.rongcloud.cn/RongIMClient.voice-0.9.1.min.js` 融云官方音频播放帮助库引用地址.音频播放帮助库是基于 `web SDK` 的,使用之前请务必提前载入 `web SDK`.音频播放帮助库中的方法均为`静态方法`.与`IE`以及`opera`内核类型浏览器不兼容。
初始化音频播放帮助库,使用本库之前务必进行初始化操作,返回为 boolean
类型用来说明次音频库是否已经初始化完成
var isInit = RongIMClient.voice.init();
console.log(isInit);
//可以根据isInit来判断是否已经初始化完成
播放传入的格式为AMR的音频BASE64码
RongIMClient.voice.play('格式为AMR的音频BASE64码','音频持续时间(秒)');
//如果不知道音频的持续时间,可通过音频base64长度除以1024得到大概秒数
音频播放过程中执行的进度方法,需自行注册.
RongIMClient.voice.onprogress = function(){
console.log("正在执行");
};
//执行单位时间为一秒执行一次
//pc : Firefox (Gecko) 3.6 (1.9.2)+ Chrome 7+ Safari 6.0.2+
//mobile : Firefox (Gecko) 32+ Android 3+ Safari 6.1+
## web端本地存储帮助库如何使用? `http://res.websdk.rongcloud.cn/RongIMClient.indexedDB.min.js` 融云官方web端本地存储帮助库引用地址.web端本地存储帮助库是基于 `indexed DB` 的,使用之前请务必确保提前载入 `web SDK` 和当前浏览器支持 `indexed DB` .web端本地存储帮助库中的方法均为`静态方法`.
得到本地之前存储的消息对象列表.
RongIMClient.indexedDB.getMessageListFromIndexedDB(function(msgList){
console.log(msgList);
});
将消息对象添加到本地存储.
var msg=RongIMClient.TextMessage.obtain("this is a demo");
var messageId=msg.getMessageId();
RongIMClient.indexedDB.addMessageToIndexedDB(msg,function(){
console.log('add success');
});
根据消息标识id把指定消息对象从本地存储删除.
RongIMClient.indexedDB.deleteMessageFromIndexedDB(messageId,function(){
console.log('delete success');
});
得到本地存储的消息对象列表长度.
RongIMClient.indexedDB.getMessageListCountFromIndexedDB(function(count){
console.log('length : ' + count);
});
//pc : Firefox (Gecko) 4 (2)+ Chrome 12+ Internet Explorer 10+
//mobile : Firefox (Gecko) 6+