bellyabc123 / demo-web-sdk

Demostration of Rong Web SDK.

demo-web-sdk

Demostration of Rong Web SDK.

融云 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)可能出现不兼容的情况.

初始化web sdk ，此项必须设置

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());
     }
});

得到RongIMClient实例对象,只有执行init()之后才能使用getInstance()方法

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);
           }
       });
};

web SDK 浏览器兼容性

 //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;

通道选项设置[使用此项必须为0.9.6版本,使用前请确定SDK版本号为0.9.6及以上版本]

     //强制使用长链接进行通讯 设置此项，并保证此项优先级最高并且最先被执行，否则设置无效
     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);
     //依次打印表情元素
  }

RongIMClient.Expression.getEmojiByContent

根据表情的 content ( content 为一个UTF16码，可根据表情对象 tag 属性计算得到此UTF16码)来得到表情对象

     var emojiObject = RongIMClient.Expression.getEmojiByContent('\u1F600');
     //如果传入的不是合法UTF16码或者表情名单中不存在此UTF16码则返回 undeined 
     console.log(emojiObject);

RongIMClient.Expression.calcUTF

根据表情的 content 计算得到表情的 tag 属性

     var tag = RongIMClient.Expression.calcUTF('\u1F600');
     console.log(tag);
     //返回\ud83d\ude00 即将 \u1F600 计算为 \ud83d\ude00

RongIMClient.Expression.getEmojiObjByEnglishNameOrChineseName

根据表情的中文名称或者英文名称得到表情对象

     var emojiObject = RongIMClient.Expression.getEmojiObjByEnglishNameOrChineseName("足球");
     console.log(emojiObject);

RongIMClient.Expression.retrievalEmoji

检索传入的字符串中是否含有表情 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`内核类型浏览器不兼容。

RongIMClient.voice.init

初始化音频播放帮助库,使用本库之前务必进行初始化操作，返回为 boolean 类型用来说明次音频库是否已经初始化完成

     var isInit = RongIMClient.voice.init();
     console.log(isInit);
     //可以根据isInit来判断是否已经初始化完成

RongIMClient.voice.play

播放传入的格式为AMR的音频BASE64码

     RongIMClient.voice.play('格式为AMR的音频BASE64码','音频持续时间(秒)');
     //如果不知道音频的持续时间，可通过音频base64长度除以1024得到大概秒数

RongIMClient.voice.onprogress

音频播放过程中执行的进度方法,需自行注册.

     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

得到本地之前存储的消息对象列表.

     RongIMClient.indexedDB.getMessageListFromIndexedDB(function(msgList){
          console.log(msgList);
     });

RongIMClient.indexedDB.addMessageToIndexedDB

将消息对象添加到本地存储.

     var msg=RongIMClient.TextMessage.obtain("this is a demo");
     var messageId=msg.getMessageId();
     RongIMClient.indexedDB.addMessageToIndexedDB(msg,function(){
          console.log('add success');
     });

RongIMClient.indexedDB.deleteMessageFromIndexedDB

根据消息标识id把指定消息对象从本地存储删除.

     RongIMClient.indexedDB.deleteMessageFromIndexedDB(messageId,function(){
          console.log('delete success');
     });

RongIMClient.indexedDB.getMessageListCountFromIndexedDB

得到本地存储的消息对象列表长度.

     RongIMClient.indexedDB.getMessageListCountFromIndexedDB(function(count){
          console.log('length : ' + count);
     });

浏览器兼容性

 //pc :     Firefox (Gecko) 4 (2)+     Chrome 12+	 Internet Explorer 10+
 //mobile :  Firefox (Gecko) 6+