Web SDK 开发指南

    特性介绍

    融云 Web IM SDK 版本在很多方面都进行了提升,下面从几个方面描述一下 SDK 的产品特性:

    轻巧稳定:

    • SDK 采用 TypeScript 语言开发,结构清晰、健壮
    • 即时通信库尺寸小,只有 100 KB 左右
    • 扩展功能按需加载,支持声音播放Emoji 表情库

    功能丰富:

    • 支持多页面连接(需付费开通,开发环境免费开通
    • 支持会话列表漫游
    • 支持聊天历史记录漫游(需付费开通,开发环境免费开通

    兼容性:

    • 兼容各种环境:IE6 - IE11、Chrome、Firefox、Safari、Edge、QQ 浏览器、 微信浏览器、Electron、 Android 浏览器 2.3.6 及以上
    • 支持两种连接:WebSocket 和 HTTP Long Polling
    • 支持 AMD、CMD

      注:Web IM SDK 不支持微信小程序环境,如需要在小程序中使用 IM 能力,请参考小程序解决方案

    扩展性:

    • 支持自定义消息
    • 支持自定义表情
    • 支持自定义存储方式

    提供开源的聊天界面:

    • 提供开源的 Web IM 和 Desktop Demo

    前期准备

    注册开发者帐号

    请前往融云官方网站注册开发者帐号。注册时需要提供真实的邮箱和手机号,以便接收重要通知。如果没有提供正确可用的邮箱和手机号,融云随时可能关闭应用。

    首先,开始创建第一个应用吧!

    创建应用

    注册后登录开发者后台即可创建应用。创建应用后才可进行 Web IM 集成开发

    每个应用都提供了生产环境和开发环境,两个环境的功能完全一致、数据完全隔离,分别有自己的 App Key / Secret,App Key / Secret是融云 SDK 连接服务器所必须的标识,请不要外泄。

    应用最终上线前,使用开发环境进行开发测试,上线申请通过后可获取生产环境的 App Key / Secret,替换后即可发布上线。

    image

    引入 SDK

    最新版本: <script src="http(s)://cdn.ronghub.com/RongIMLib-2.3.4.min.js"></script>
    1、优化消息收发逻辑。
    2、SDK Bug 修复
    历史版本: <script src="http(s)://cdn.ronghub.com/RongIMLib-2.3.3.min.js"></script>

    示例:

    TypeScript 使用方法

    RongIMLib-2.3.4.d.ts 下载到本地

    /// <reference path="path/RongIMLib-2.3.3.d.ts" />
    module RongIM {
      export class Client {
        static init(params: any): void{
          var RongIMClient = RongIMLib.RongIMClient;
          RongIMClient.init('appkey');
          // 更多参考: http://www.rongcloud.cn/docs/web_api_demo.html
        }
      }
    }
    

    SDK 集成

    获取 Token

    获取用户 Token 请参考 Server 开发指南用户服务

    userId 是用户在融云系统中唯一的身份 Id,可为任意数字或字符串,但必须保证全局唯一。

    name 是用户的显示名称,用在 Push 推送时显示用户的名称。

    portraitUri 是用户头像地址

    返回的 Token 格式为 mKmyKqTSf7aNDinwAFMnz7NXKILeV3X0+CCRBOxmtOApmvQjMathViWrePIfq0GuTu9jELQqsckv4AhfjCAKgQ==

    为了方便测试开发,开发者后台提供了 API 调试工具,可直接生成 Token。

    image

    初始化 SDK

    执行初始化需要在开发者后台新建应用得到 AppKeytoken,初始化代码:

    RongIMLib.RongIMClient.init(appkey,[dataAccessProvider],[options])
    

    AppKey:应用的唯一标识。

    Token :用户的唯一标识。

    RongIMLib.RongIMClient.init("appkey");
    

    设置监听

    1、必须设置监听器后,再连接融云服务器,示例代码如下:

    // 设置连接监听状态 ( status 标识当前连接状态 )
     // 连接状态监听器
     RongIMClient.setConnectionStatusListener({
        onChanged: function (status) {
            switch (status) {
                case RongIMLib.ConnectionStatus.CONNECTED:
                    console.log('链接成功');
                    break;
                case RongIMLib.ConnectionStatus.CONNECTING:
                    console.log('正在链接');
                    break;
                case RongIMLib.ConnectionStatus.DISCONNECTED:
                    console.log('断开连接');
                    break;
                case RongIMLib.ConnectionStatus.KICKED_OFFLINE_BY_OTHER_CLIENT:
                    console.log('其他设备登录');
                    break;
                  case RongIMLib.ConnectionStatus.DOMAIN_INCORRECT:
                    console.log('域名不正确');
                    break;
                case RongIMLib.ConnectionStatus.NETWORK_UNAVAILABLE:
                  console.log('网络不可用');
                  break;
                }
        }});
    
     // 消息监听器
     RongIMClient.setOnReceiveMessageListener({
        // 接收到的消息
        onReceived: function (message) {
            // 判断消息类型
            switch(message.messageType){
                case RongIMClient.MessageType.TextMessage:
                    // message.content.content => 消息内容
                    break;
                case RongIMClient.MessageType.VoiceMessage:
                    // 对声音进行预加载                
                    // message.content.content 格式为 AMR 格式的 base64 码
                    break;
                case RongIMClient.MessageType.ImageMessage:
                   // message.content.content => 图片缩略图 base64。
                   // message.content.imageUri => 原图 URL。
                   break;
                case RongIMClient.MessageType.DiscussionNotificationMessage:
                   // message.content.extension => 讨论组中的人员。
                   break;
                case RongIMClient.MessageType.LocationMessage:
                   // message.content.latiude => 纬度。
                   // message.content.longitude => 经度。
                   // message.content.content => 位置图片 base64。
                   break;
                case RongIMClient.MessageType.RichContentMessage:
                   // message.content.content => 文本消息内容。
                   // message.content.imageUri => 图片 base64。
                   // message.content.url => 原图 URL。
                   break;
                case RongIMClient.MessageType.InformationNotificationMessage:
                    // do something...
                   break;
                case RongIMClient.MessageType.ContactNotificationMessage:
                    // do something...
                   break;
                case RongIMClient.MessageType.ProfileNotificationMessage:
                    // do something...
                   break;
                case RongIMClient.MessageType.CommandNotificationMessage:
                    // do something...
                   break;
                case RongIMClient.MessageType.CommandMessage:
                    // do something...
                   break;
                case RongIMClient.MessageType.UnknownMessage:
                    // do something...
                   break;
                default:
                    // do something...
            }
        }
    });
    

    连接服务器

    连接融云必须在执行 RongIMLib.RongIMClient.init(appkey); 之后,并且所有除监听以外的方法都必须在 connect成功之后 再调用。

    默认只支持一个页面连接,一个页面里只能 init 一次,开通“多设备消息同步”即可支持多页面连接

      var token = "mKmyKqTSf7aNDinwAFMnz7NXKILeV3X0+CCRBOxmtOApmvQjMathViWrePIfq0GuTu9jELQqsckv4AhfjCAKgQ==";
    
      RongIMClient.connect(token, {
            onSuccess: function(userId) {
              console.log("Connect successfully." + userId);
            },
            onTokenIncorrect: function() {
              console.log('token无效');
            },
            onError:function(errorCode){
                  var info = '';
                  switch (errorCode) {
                    case RongIMLib.ErrorCode.TIMEOUT:
                      info = '超时';
                      break;
                    case RongIMLib.ConnectionState.UNACCEPTABLE_PAROTOCOL_VERSION:
                      info = '不可接受的协议版本';
                      break;
                    case RongIMLib.ConnectionState.IDENTIFIER_REJECTED:
                      info = 'appkey不正确';
                      break;
                    case RongIMLib.ConnectionState.SERVER_UNAVAILABLE:
                      info = '服务器不可用';
                      break;
                  }
                  console.log(errorCode);
                }
          });
    

    重新连接

        var callback = {
            onSuccess: function(userId) {
                console.log("Reconnect successfully." + userId);
            },
            onTokenIncorrect: function() {
                console.log('token无效');
            },
            onError:function(errorCode){
                console.log(errorcode);
            }
        };
        var config = {
            // 默认 false, true 启用自动重连,启用则为必选参数
            auto: true,
            // 重试频率 [100, 1000, 3000, 6000, 10000, 18000] 单位为毫秒,可选
            url: 'cdn.ronghub.com/RongIMLib-2.2.6.min.js',
            // 网络嗅探地址 [http(s)://]cdn.ronghub.com/RongIMLib-2.2.6.min.js 可选
            rate: [100, 1000, 3000, 6000, 10000]
        };
        RongIMClient.reconnect(callback, config);
    

    消息接口

    消息类型

    详细查看融云内置消息类型结构详解

    发送消息

    发送消息必须在成功连接融云服务器之后进行,发送频率上限每秒最多 5 条、每分钟最多 6000 条。

    融云支持向单聊、群组及聊天室中发送文字消息、图片消息、语音消息、文件消息、地理位置消息以及自定义消息。融云 Web SDK 不提供语音录制、转码功能,开发者需要自已实现语音消息录制、转码,通过融云内置的语音消息进行发送。

    1、文本消息

     var msg = new RongIMLib.TextMessage({content:"hello RongCloud!",extra:"附加信息"});
     var conversationtype = RongIMLib.ConversationType.PRIVATE; // 单聊,其他会话选择相应的消息类型即可。
     var targetId = "xxx"; // 目标 Id
     RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
                    onSuccess: function (message) {
                        //message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
                        console.log("Send successfully");
                    },
                    onError: function (errorCode,message) {
                        var info = '';
                        switch (errorCode) {
                            case RongIMLib.ErrorCode.TIMEOUT:
                                info = '超时';
                                break;
                            case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                                info = '未知错误';
                                break;
                            case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST:
                                info = '在黑名单中,无法向对方发送消息';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_DISCUSSION:
                                info = '不在讨论组中';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_GROUP:
                                info = '不在群组中';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_CHATROOM:
                                info = '不在聊天室中';
                                break;
                            default :
                                info = x;
                                break;
                        }
                        console.log('发送失败:' + info);
                    }
                }
            );
    

    发送 pushData[通知] 给端 Android or iOS 方法如下:

     var msg = new RongIMLib.TextMessage({content:"hello RongCloud!",extra:"附加信息"});
     var conversationtype = RongIMLib.ConversationType.PRIVATE; // 单聊,其他会话选择相应的消息类型即可。
     var targetId = "xxx"; // 目标 Id
     var pushData = "your pushInfo";
     RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
            onSuccess: function (message) {
                .......
            },
            onError: function (errorCode,message) {
                ......
            }
        }, false, pushData
    );
    

    下述所有信息类型有关 pushData 用法同此,不再复述。

    2、图片消息

    图片上传请参考:上传

      /*
         图片转为可以使用 HTML5 的 FileReader 或者 canvas 也可以上传到后台进行转换。
    
         注意事项:
             1、缩略图必须是 base64 码的 jpg 图。
             2、不带前缀。
             3、大小建议不超过 100 K。
       */
     var base64Str = "base64 格式缩略图";
     var imageUri = "图片 URL"; // 上传到自己服务器的 URL。
     var msg = new RongIMLib.ImageMessage({content:base64Str,imageUri:imageUri});
     var conversationtype = RongIMLib.ConversationType.PRIVATE; // 单聊,其他会话选择相应的消息类型即可。
     var targetId = "xxx"; // 目标 Id
     RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
                    onSuccess: function (message) {
                        //message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
                        console.log("Send successfully");
                    },
                    onError: function (errorCode,message) {
                        var info = '';
                        switch (errorCode) {
                            case RongIMLib.ErrorCode.TIMEOUT:
                                info = '超时';
                                break;
                            case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                                info = '未知错误';
                                break;
                            case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST:
                                info = '在黑名单中,无法向对方发送消息';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_DISCUSSION:
                                info = '不在讨论组中';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_GROUP:
                                info = '不在群组中';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_CHATROOM:
                                info = '不在聊天室中';
                                break;
                            default :
                                info = x;
                                break;
                        }
                        console.log('发送失败:' + info);
                    }
                }
            );
    

    3、富文本消息

    图片上传请参考:上传

     var content = "富文本消息描述";
     var imageUri = "图片 URL"; // 上传到自己服务器的 URL。
     var title = "富文本消息标题";
     var url = "富文本消息点击后打开的 URL";
     var msg = new RongIMLib.RichContentMessage({title:title,content:content,imageUri:imageUri,url:url});
     var conversationtype = RongIMLib.ConversationType.PRIVATE; // 单聊,其他会话选择相应的消息类型即可。
     var targetId = "xxx"; // 目标 Id
     RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
                    onSuccess: function (message) {
                        //message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
                        console.log("Send successfully");
                    },
                    onError: function (errorCode,message) {
                        var info = '';
                        switch (errorCode) {
                            case RongIMLib.ErrorCode.TIMEOUT:
                                info = '超时';
                                break;
                            case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                                info = '未知错误';
                                break;
                            case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST:
                                info = '在黑名单中,无法向对方发送消息';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_DISCUSSION:
                                info = '不在讨论组中';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_GROUP:
                                info = '不在群组中';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_CHATROOM:
                                info = '不在聊天室中';
                                break;
                            default :
                                info = x;
                                break;
                        }
                        console.log('发送失败:' + info);
                    }
                }
            );
    

    4、位置消息

     var latitude = "纬度";
     var longitude = "经度";
     var poi = "位置描述";
     var content = "位置缩略图";
     var msg = new RongIMLib.LocationMessage({latitude: latitude, longitude: longitude, poi: poi, content: content});
     var conversationtype = RongIMLib.ConversationType.PRIVATE; // 单聊,其他会话选择相应的消息类型即可。
     var targetId = "xxx"; // 目标 Id
     RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
                    onSuccess: function (message) {
                        //message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
                        console.log("Send successfully");
                    },
                    onError: function (errorCode,message) {
                        var info = '';
                        switch (errorCode) {
                            case RongIMLib.ErrorCode.TIMEOUT:
                                info = '超时';
                                break;
                            case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                                info = '未知错误';
                                break;
                            case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST:
                                info = '在黑名单中,无法向对方发送消息';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_DISCUSSION:
                                info = '不在讨论组中';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_GROUP:
                                info = '不在群组中';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_CHATROOM:
                                info = '不在聊天室中';
                                break;
                            default :
                                info = x;
                                break;
                        }
                        console.log('发送失败:' + info);
                    }
                }
            );
    

    5、命令消息

     var data = "命令指令";//可以是一个对象,data = {cmd:update};
     var msg = new RongIMLib.CommandMessage({data:data});
     var conversationtype = RongIMLib.ConversationType.PRIVATE; // 单聊,其他会话选择相应的消息类型即可。
     var targetId = "xxx"; // 目标 Id
     RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
                    onSuccess: function (message) {
                        //message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
                        console.log("Send successfully");
                    },
                    onError: function (errorCode,message) {
                        var info = '';
                        switch (errorCode) {
                            case RongIMLib.ErrorCode.TIMEOUT:
                                info = '超时';
                                break;
                            case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                                info = '未知错误';
                                break;
                            case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST:
                                info = '在黑名单中,无法向对方发送消息';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_DISCUSSION:
                                info = '不在讨论组中';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_GROUP:
                                info = '不在群组中';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_CHATROOM:
                                info = '不在聊天室中';
                                break;
                            default :
                                info = x;
                                break;
                        }
                        console.log('发送失败:' + info);
                    }
                }
            );
    

    6、正在输入状态消息

    var conversationType = RongIMLib.ConversationType.PRIVATE;//只有单聊有正在输入状态。
    var targetId = "xxx";
    var msgName = "TextMessage";//用户正在输入的消息类型 VoiceMessage等。
    RongIMClient.getInstance().sendTypingStatusMessage(conversationType, targetId, msgName, {
                    onSuccess: function (message) {
                        console.log("Send successfully");
                    },
                    onError: function (errorCode,message) {
                        var info = '';
                        switch (errorCode) {
                            case RongIMLib.ErrorCode.TIMEOUT:
                                info = '超时';
                                break;
                            case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                                info = '未知错误';
                                break;
                            case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST:
                                info = '在黑名单中,无法向对方发送消息';
                                break;
                            default :
                                info = x;
                                break;
                        }
                        console.log('发送失败:' + info);
                    }
                });
    

    7、已读通知消息

     var messageUId = "消息唯一 Id";
     var lastMessageSendTime = "最后一条消息的发送时间";
     var type = "1";// 备用,默认赋值 1 即可。
     // 以上 3 个属性在会话的最后一条消息中可以获得。
     var msg = new RongIMLib.ReadReceiptMessage({ messageUId: messageUId, lastMessageSendTime: lastMessageSendTime, type: type });
     var conversationtype = RongIMLib.ConversationType.PRIVATE; // 单聊,其他会话选择相应的消息类型即可。
     var targetId = "xxx"; // 目标 Id
     RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
                    onSuccess: function (message) {
                        //message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
                        console.log("Send successfully");
                    },
                    onError: function (errorCode,message) {
                        var info = '';
                        switch (errorCode) {
                            case RongIMLib.ErrorCode.TIMEOUT:
                                info = '超时';
                                break;
                            case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                                info = '未知错误';
                                break;
                            case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST:
                                info = '在黑名单中,无法向对方发送消息';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_DISCUSSION:
                                info = '不在讨论组中';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_GROUP:
                                info = '不在群组中';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_CHATROOM:
                                info = '不在聊天室中';
                                break;
                            default :
                                info = x;
                                break;
                        }
                        console.log('发送失败:' + info);
                    }
                }
            );
    

    8、发送 @ 消息

    支持 @ 消息会话类型:RongIMLib.ConversationType.GROUPRongIMLib.ConversationType.DISCUSSION

    支持 @ 消息消息类型:TextMessageImageMessageVoiceMessageRichContentMessageLocationMessage

    发送方式:RongIMClient.getInstance().sendMessage(conversationType,targetId,msg,callback,true);,请设置最后一个参数为 true

    // 群聊。
    var conversationtype = RongIMLib.ConversationType.GROUP;
    // 目标 Id
    var targetId = "groupId";
    // @ 消息对象
    var mentioneds = new RongIMLib.MentionedInfo();
        // 全部:RongIMLib.MentionedType.ALL;部分:RongIMLib.MentionedType.PART
        mentioneds.type = RongIMLib.MentionedType.PART;
        // @ 的人
        mentioneds.userIdList = [];
    var msg = new RongIMLib.TextMessage({content:"hello RongCloud!",extra:"附加信息",mentionedInfo:mentioneds});
    RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
                   onSuccess: function (message) {
                       //message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
                       console.log("Send successfully");
                   },
                   onError: function (errorCode,message) {
                       var info = '';
                       switch (errorCode) {
                           case RongIMLib.ErrorCode.TIMEOUT:
                               info = '超时';
                               break;
                           case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                               info = '未知错误';
                               break;
                           case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST:
                               info = '在黑名单中,无法向对方发送消息';
                               break;
                           case RongIMLib.ErrorCode.NOT_IN_DISCUSSION:
                               info = '不在讨论组中';
                               break;
                           case RongIMLib.ErrorCode.NOT_IN_GROUP:
                               info = '不在群组中';
                               break;
                           case RongIMLib.ErrorCode.NOT_IN_CHATROOM:
                               info = '不在聊天室中';
                               break;
                           default :
                               info = x;
                               break;
                       }
                       console.log('发送失败:' + info);
                   }
               },true);
    

    9、发送文件消息

    文件上传请参考:上传

     var name = 'RongIMLib.js',
         size = 1024,
         type = 'js',
         fileUrl = 'http://xxxx.xxx.xx/RongIMLib.js';
     var msg = new RongIMLib.FileMessage({ name: name, size: size, type: type, fileUrl: fileUrl});
     var conversationtype = RongIMLib.ConversationType.PRIVATE; // 单聊,其他会话选择相应的消息类型即可。
     var targetId = "xxx"; // 目标 Id
     RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
                    onSuccess: function (message) {
                        //message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
                        console.log("Send successfully");
                    },
                    onError: function (errorCode,message) {
                        var info = '';
                        switch (errorCode) {
                            case RongIMLib.ErrorCode.TIMEOUT:
                                info = '超时';
                                break;
                            case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                                info = '未知错误';
                                break;
                            case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST:
                                info = '在黑名单中,无法向对方发送消息';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_DISCUSSION:
                                info = '不在讨论组中';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_GROUP:
                                info = '不在群组中';
                                break;
                            case RongIMLib.ErrorCode.NOT_IN_CHATROOM:
                                info = '不在聊天室中';
                                break;
                            default :
                                info = x;
                                break;
                        }
                        console.log('发送失败:' + info);
                    }
                }
            );
    

    发送群定向消息

    此方法用于在群组中给部分用户发送消息,其它用户不会收到这条消息,例如向群中部分用户发送消息阅读状态回执时可使用此功能。

    注:群定向消息不存储到云端,通过“单群聊消息云存储”服务无法获取到定向消息。

    var isMentiondMsg = false;//是否为 @消息,true 为 @消息 、false 为普通消息
    var pushText = '';//Push 显示内容
    var appData = ''//Push 通知时附加信息
    var methodType = null
    var opts = {
         userIds: ['userId1', 'userId2']//接收消息的用户 ID 列表
    };
    var conversationtype = RongIMLib.ConversationType.GROUP; // 群聊会话类型。
    var targetId = "xxx"; // 目标 Id
    
    var msg = new RongIMLib.TextMessage({content:"我是定向消息, 只有 userId1, userId2 能收到", extra:"附加信息"});
    
    RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
        onSuccess: function (message) {
            //message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
            console.log("Send successfully");
        },
        onError: function (errorCode,message) {
            var info = '';
            switch (errorCode) {
                case RongIMLib.ErrorCode.TIMEOUT:
                    info = '超时';
                    break;
                case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                    info = '未知错误';
                    break;
                case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST:
                    info = '在黑名单中,无法向对方发送消息';
                    break;
                case RongIMLib.ErrorCode.NOT_IN_DISCUSSION:
                    info = '不在讨论组中';
                    break;
                case RongIMLib.ErrorCode.NOT_IN_GROUP:
                    info = '不在群组中';
                    break;
                case RongIMLib.ErrorCode.NOT_IN_CHATROOM:
                    info = '不在聊天室中';
                    break;
                default :
                    info = x;
                    break;
            }
            console.log('发送失败:' + info);
        }
    },isMentiondMsg, pushText, appData, methodType, opts);
    

    获取单群聊历史消息

    该功能需要在开发者后台高级功能设置中开通 IM 商用版后,开启单群聊消息云存储功能即可使用,如没有开启则执行 onError 方法。

    单群聊消息云存储不支持聊天室消息云存储,拉取历史消息最多一次行拉取 20 条消息。拉取顺序按时间倒序拉取。

    拉取历史消息支持循环拉取(只有当 timestrap = null 时),具体逻辑:

    条件:历史记录为 45 条,每次拉取 20 条。
    第一次拉取 list 长度为 20,hasMsg 为 true。
    第二次拉取 list 长度为 20,hasMsg 为 true。
    第三次拉取 list 长度为 5,hasMsg 为 false。
    第四次拉取 list 长度为 0,hasMsg 为 false。

    var conversationType = RongIMLib.ConversationType.PRIVATE; //单聊,其他会话选择相应的消息类型即可。
    var targetId = "xxx"; // 想获取自己和谁的历史消息,targetId 赋值为对方的 Id。
    var timestrap = null; // 默认传 null,若从头开始获取历史消息,请赋值为 0 ,timestrap = 0;
    var count = 20; // 每次获取的历史消息条数,范围 0-20 条,可以多次获取。
    RongIMLib.RongIMClient.getInstance().getHistoryMessages(conversationType, targetId, timestrap, count, {
      onSuccess: function(list, hasMsg) {
           // list => Message 数组。
        // hasMsg => 是否还有历史消息可以获取。
      },
      onError: function(error) {
        console.log("GetHistoryMessages,errorcode:" + error);
      }
    });
    

    过滤消息

    此方法目前只支持按消息名称过滤 聊天室 中的消息。

    var messageNames = ['CommandMessage']; // 可以设置多个。
    RongIMClient.getInstance().setFilterMessages(messageNames);
    

    消息草稿

    1、保存草稿

    var conversationType = RongIMLib.ConversationType.PRIVATE;
    var targetId = "xxx";
    var draft = "草稿信息";
    RongIMClient.getInstance().saveTextMessageDraft(conversationType,targetId,draft);
    

    2、获取草稿

    var conversationType = RongIMLib.ConversationType.PRIVATE;
    var targetId = "xxx";
    var draft = RongIMClient.getInstance().getTextMessageDraft(conversationType,targetId);
    // draft => 草稿信息。
    

    3、清除草稿

    var conversationType = RongIMLib.ConversationType.PRIVATE;
    var targetId = "xxx";
    RongIMClient.getInstance().clearTextMessageDraft(conversationType,targetId);
    

    自定义消息

    以下示例采用 WebSDK 内置消息结构,自定义消息结构,请移步开发指南。

    1、定义消息类型

    var messageName = "PersonMessage"; // 消息名称。
    var objectName = "s:person"; // 消息内置名称,请按照此格式命名。
    var isCounted = true; // 消息计数
    var isPersited = true; // 消息保存
    var mesasgeTag = new RongIMLib.MessageTag(isCounted,isPersited);// 消息是否保存是否计数,true true 计数且保存,false false 不计数不保存
    var prototypes = ["name","age"]; // 消息类中的属性名。
    RongIMClient.registerMessageType(messageName,objectName,mesasgeTag,prototypes);
    

    2、发送消息

    var conversationType = RongIMLib.ConversationType.PRIVATE; //单聊,其他会话选择相应的消息类型即可。
    var targetId = "xxx"; // 想获取自己和谁的历史消息,targetId 赋值为对方的 Id。
    var msg = new RongIMClient.RegisterMessage.PersonMessage({name:"zhang",age:12});
    RongIMClient.getInstance().sendMessage(conversationType,targetId, msg, {
        onSuccess: function (message) {
        },
        onError: function (errorCode) {
        }
    });
    

    3、接收消息

    接收消息与其他内置消息一致,在上文中提到的 setOnReceiveMessageListener 中增加 case 将消息予以展示即可。

    例如:case RongIMClient.MessageType.RegisterMessage : dosomething...

    消息撤回

    消息撤回操作服务器端没有撤回时间范围的限制,由客户端决定。

    //recallMessage  为需要撤回的消息对象
    RongIMClient.getInstance().sendRecallMessage(recallMessage, {
            onSuccess: function (message) {
                showResult("撤回成功",message,start);
            },
            onError: function (errorCode,message) {
                showResult("撤回失败",message,start);
            }});
    

    消息阅读回执

    单聊会话中消息阅读状态详细请参见消息状态判定及处理方式

    清除服务端单群聊历史消息

    该功能需要在开发者后台高级功能设置中开通 IM 商用版后,开启单群聊消息云存储功能即可使用,如没有开启则执行 onError 方法。
    /**
      conversationType: 会话类型
    
      targetId: 目标 Id
    
      timestamp: 清除时间点,message.sentTime <= timestamp 的消息将被清除 (message: 收发实时或者历史消息中有 sentTime 属性)
      timestamp 取值范围:  timestamp >=0 并且 timestamp <= 当前会话最后一条消息的 sentTime
    */
    var params = {
         conversationType: RongIMLib.ConversationType.PRIVATE, // 会话类型
         targetId: 'dPd90Fkja', // 目标 Id
         timestamp: 1513308018122 // 清除时间点
    };
    RongIMLib.RongIMClient.getInstance().clearRemoteHistoryMessages(params, {
      onSuccess: function() {
         // 清除成功
      },
      onError: function(error) {
          // 请排查:单群聊消息云存储是否开通
          console.log(error);
      }
    });
    

    会话接口

    会话类型

    1、RongIMLib.ConversationType.PRIVATE : 二人单聊会话类型,枚举值为 1

    2、RongIMLib.ConversationType.DISCUSSION : 讨论组会话类型,枚举值为 2

    3、RongIMLib.ConversationType.GROUP : 群组会话类型,枚举值为 3

    4、RongIMLib.ConversationType.CHATROOM : 聊天室会话类型,枚举值为 4

    5、RongIMLib.ConversationType.CUSTOMER_SERVICE : 客服会话类型,枚举值为 5

    6、RongIMLib.ConversationType.SYSTEM : 系统消息类型,枚举值为 6

    7、RongIMLib.ConversationType.APP_PUBLIC_SERVICE : 公众账号(默认关注)会话类型,枚举值为 7

    8、RongIMLib.ConversationType.PUBLIC_SERVICE : 公众账号 (手动关注) 会话类型,枚举值为 8

    获取会话列表

    使用此方法需要在开发者后台高级功能设置中开通 IM 商用版后,开启单群聊消息云存储功能。

    RongIMClient.getInstance().getConversationList({
      onSuccess: function(list) {
        // list => 会话列表集合。
      },
      onError: function(error) {
         // do something...
      }
    },null);
    

    会话列表中,每个会话的数据结构如下:

    名称 说明
    conversationTitle 会话标题。
    conversationType 会话类型,1 为单聊、3 为群组、4 为聊天室、5 为客服、6 为系统、7 为应用公众服务,8 为公有公众服务。
    latestMessageId 会话中最后一条消息 Id。
    notificationStatus 是否设置消息免打扰。
    objectName 会话中最后一条消息的消息标识,融云内置消息以 "RC:" 开头。融云内置消息类型表
    sentStatus 10 为发送中、20 为发送失败、30 为已发送、40 为对方已接收、50 为对方已读、60 为对方已销毁。
    sentTime 会话中最后一条消息融云服务端的发送时间。
    targetId 根据 conversationType 的不同,可能是用户 Id、3 群组 Id、4 聊天室 Id、5 客服 Id、6 系统会话 Id、7 应用公众号 Id,8 为公有公众号 Id
    unreadMessageCount 当前会话的未读消息数。
    latestMessage 会话中最后一条消息。

    会话列表中 latestMessage 结构如下:

    名称 说明
    content 消息内容。
    conversationType 会话类型,1 为单聊、3 为群组、4 为聊天室、5 为客服、6 为系统、7 为应用公众服务,8 为公有公众服务。
    objectName 消息标识,融云内置消息以 "RC:" 开头。融云内置消息类型表
    messageDirection 消息方向,1 为发送的消息、2 为接收的消息。
    messageId 本地生成的消息 Id。
    sentStatus 10 为发送中、20 为发送失败、30 为已发送、40 为对方已接收、50 为对方已读、60 为对方已销毁
    receivedTime 应用接收到消息的本地时间。
    senderUserId 发送方 Id。
    sentTime 消息在融云服务端的发送时间。
    targetId 目标 Id。
    messageType 消息类型,详细请查看消息类型说明
    messageUId 消息在融云服务端的唯一标识,通过 messageUId 进行消息撤回操作。
    offLineMessage 是否为离线消息,true 为离线消息,false 为非离线消息。

    修改会话

    此方法可以修改会话中信息,可以填充 用户信息 或会话 Title 等。

    1、未使用本地存储,必须先执行 getConversationList 并且有这个会话此方法才有效。

    var conversationType = RongIMLib.ConversationType.PRIVATE;
    var targetId = "xxx";
    RongIMLib.RongIMClient.getInstance().getConversation(conversationType,targetId,{
            onSuccess:function(con){
                if (con) {
                  con.conversationTitle="我是会话的Title";
                  RongIMLib.RongIMClient.getInstance().updateConversation(con);
                  consoleInfo("updateConversation Success!");
                }
            }
        });
    

    2、获取指定会话

    var conversationType = RongIMLib.ConversationType.PRIVATE;
    var targetId = "xxx";
    RongIMLib.RongIMClient.getInstance().getConversation(conversationType,targetId,{
            onSuccess:function(con){
                if (con) {
                  con.conversationTitle="我是会话的Title";
                  RongIMLib.RongIMClient.getInstance().updateConversation(con);
                  consoleInfo("updateConversation Success!");
                }
            }
        });
    

    3、删除会话

    RongIMClient.getInstance().removeConversation(RongIMLib.ConversationType.PRIVATE,"1002",{
        onSuccess:function(bool){
           // 删除会话成功。
        },
        onError:function(error){
           // error => 删除会话的错误码
        }
    });
    

    4、清除会话列表

    RongIMClient.getInstance().clearConversations(callback,[conversationTypes]);

    conversationTypes 为可选参数,可以清除指定会话类型的会话,可以多个。

    5、清除所有会话:

    RongIMClient.getInstance().clearConversations({
        onSuccess:function(){
          // 清除会话成功
        },
        onError:function(error){
          // error => 清除会话错误码。
        }
    });
    

    6、清除指定会话:

    var conversationTypes = [RongIMLib.ConversationType.PRIVATE,RongIMLib.ConversationType.GROUP];
    RongIMClient.getInstance().clearConversations({
        onSuccess:function(){
          // 清除会话成功
        },
        onError:function(error){
          // error => 清除会话错误码。
        }
    },conversationTypes);
    

    未读消息数

    若浏览器不支持 WebStorage 并且您没有使用 本地存储,未读消息数将不会保存,浏览器页面刷新未读消息数将不会存在。

    1、获取所有会话总未读消息数

    RongIMClient.getInstance().getTotalUnreadCount({
      onSuccess:function(count){
          // count => 所有会话总未读数。
      },
      onError:function(error){
          // error => 获取总未读数错误码。
      }
    });
    

    2、获取多个会话的未读消息总数

    var conversationTypes = [RongIMLib.ConversationType.PRIVATE,RongIMLib.ConversationType.DISCUSSION];
    RongIMClient.getInstance().getConversationUnreadCount(conversationTypes,{
      onSuccess:function(count){
          // count => 多个会话的总未读数。
      },
      onError:function(error){
          // error => 获取多个会话未读数错误码。
      }
    });
    

    3、获取指定会话的未读消息数

    var conversationType = RongIMLib.ConversationType.PRIVATE;
    var targetId = "xxx";
    RongIMLib.RongIMClient.getInstance().getUnreadCount(conversationType,targetId,{
        onSuccess:function(count){
            // count => 指定会话的总未读数。
        },
        onError:function(){
            // error => 获取指定会话未读数错误码。
        }
    });
    

    4、清除未读消息数

    var conversationType = RongIMLib.ConversationType.PRIVATE;
    var targetId = "xxx";
    RongIMClient.getInstance().clearUnreadCount(conversationType,targetId,{
        onSuccess:function(){
            // 清除未读消息成功。
        },
        onError:function(error){
            // error => 清除未读消息数错误码。
        }
    });
    

    群组

    群组关系和群组列表由您的 App 维护,客户端的所有群组操作都需要请求您的 App Server , 您的 App Server 可以根据自己的逻辑进行管理和控制,然后通过 Server API 接口进行群组操作,并将结果返回给客户端。

    以下展示了客户端进行群组操作的流程。

    创建群组

    App -> App Server: App 向自已应用服务器发起创建群组请求。 App Server -> RongCloud Server: 授权成功后,在融云服务端同步创建群组。\n /group/create RongCloud Server -> App Server: 创建成功,返回状态。 App Server -> App: 创建成功,可以发送群组信息。

    加入群组

    App -> App Server: App 向自已应用服务器发起加入群组请求。 App Server -> RongCloud Server: 授权成功后,调用融云服务端加入群组接口。\n /group/join RongCloud Server -> App Server: 加入成功,返回状态。 App Server -> App: 加入成功,用户可在群组中发送信息。

    退出群组

    App -> App Server: App 向自已应用服务器发起退出群组请求。 App Server -> RongCloud Server: 授权成功后,调用融云服务端退出群组接口。\n /group/quit RongCloud Server -> App Server: 退出成功,返回状态。 App Server -> App: 退出群组,用户不会再收到此群组信息。

    解散群组

    App -> App Server: App 向自已应用服务器发起解散群组请求。 App Server -> RongCloud Server: 授权成功后,调用融云服务端解散群组接口。\n /group/dismiss RongCloud Server -> App Server: 解散成功,返回状态。 App Server -> App: 成功解散群组。

    设置群组信息

    App -> App Server: App 向自已应用服务器发起设置群组信息请求。 App Server -> RongCloud Server: 授权成功后,调用融云服务端设置群组信息接口。\n /group/refresh RongCloud Server -> App Server: 设置成功,返回状态。 App Server -> App: 群组信息设置成功。

    聊天室

    1、加入

    var chatRoomId = "xxxx"; // 聊天室 Id。
    var count = 10;// 拉取最近聊天最多 50 条。
    RongIMClient.getInstance().joinChatRoom(chatRoomId, count, {
      onSuccess: function() {
           // 加入聊天室成功。
      },
      onError: function(error) {
        // 加入聊天室失败
      }
    });
    

    2、退出

    var chatRoomId = "xxxx"; // 聊天室 Id。
    RongIMClient.getInstance().quitChatRoom(chatRoomId, {
      onSuccess: function() {
           // 退出聊天室成功。
      },
      onError: function(error) {
        // 退出聊天室失败。
      }
    });
    

    3、获取信息

    var chatRoomId = "xxxx";// 聊天室 Id。
    var count = 10; // 获取聊天室人数 (范围 0-20 )
    var order = RongIMLib.GetChatRoomType.REVERSE;// 排序方式。
    RongIMClient.getInstance().getChatRoomInfo(chatRoomId, count, order, {
      onSuccess: function(chatRoom) {
           // chatRoom => 聊天室信息。
        // chatRoom.userInfos => 返回聊天室成员。
         // chatRoom.userTotalNums => 当前聊天室总人数。
      },
      onError: function(error) {
        // 获取聊天室信息失败。
      }
    });
    

    4、设置获取云存储消息起始位置

    var chatRoomId = 'xxxx';
    var timestamp = 0; // 获取历史消息起始时间(毫秒)
    RongIMClient.getInstance().setChatroomHisMessageTimestamp(chatRoomId, timestamp);
    

    5、获取云存储消息

    该功能需开通后才能使用,详细请查看聊天室消息云存储服务说明

    var chatRoomId = 'xxxx';
    var count = 10; // 拉取的条数 count <= 200
    var order = 1;  // 1正序;0倒序
    RongIMClient.getInstance().getChatRoomHistoryMessages(chatRoomId, count, order, {
      onSuccess: function(list, hasMore) {
        // list => 消息数组
        // hasMore => 是否有更多的历史消息
      },
      onError: function(error) {
    
      }
    });
    

    公众号

    融云公众服务包括:应用公众服务和公众服务平台,它为应用开发者和公众号运营者提供连接服务。

    应用公众服务:是为应用开发者提供的 App 内建公众服务能力,在融云开发者平台应用公众服务中创建 App 公众号,实现应用内的公众服务。

    公众服务平台:是在应用开发者和公众号运营者之间建立的对接平台,应用开发者可以通过平台引入公众服务资源,帮助 App 快速覆盖用户需求,公众号持有者通过平台可以有机会向所有集成融云 SDK 的 App 提供服务,进而获得更加精准更加丰富的受众渠道。公众服务平台

    创建、关联公众号

    可以在应用中关联公众服务平台创建的公众号,也可以创建应用内自有公众号。

    1. 使用公众服务平台关联公众号

      添加私有公众号

      在开发者平台公众服务平台中,添加私有公众号(需要应用申请上线后才能添加),输入公众号、识别码后关联成功。联系公众号提供者获取公众号及识别码:

      添加公有公众号

      在开发者平台公众号市场中,选择适合自已应用的公众号添加,公众号所有者审核通过后,与应用关联成功,可以应用中获取到相关信息。

    2. 创建应用自有公众号

      在融云开发者平台应用公众服务中创建自有公众号。创建成功后“公众号 Id” 为消息、会话功能中的 targetId。

    公众号集成

    前提条件:

    1. 已经关联公众号。
    2. 已经引入 SDK,并完成初始化、链接融云服务器。

    查看 Web IM 公众号集成引导

    搜索公众号

    //根据用户输入关键字搜索未关注公众号
    var keywords = this.stat.searchVal;
    var searchType = 1; //[0-exact 1-fuzzy]
    RongIMClient.getInstance().searchPublicService(searchType, keywords, {
        onSuccess: function (list) {
            //console.log("查找公众号成功");
            //list 为匹配到的所以结果
            //that.stat.searchList=list;
            var listUnFollowed = [];
            $(list).each(function () {
                this.hasFollowed == false && listUnFollowed.push(this);
            });
        }
    });
    

    订阅、取消订阅公众号

    //订阅公众号
    var publicServiceType = RongIMLib.ConversationType.PUBLIC_SERVICE;
    RongIMClient.getInstance().subscribePublicService(publicServiceType, publicServiceId, {
        onSuccess: function (list) {
            console.log("订阅公众号成功");
        }
    });
    
    //取消订阅公众号
    RongIMClient.getInstance().unsubscribePublicService(publicServiceType, publicServiceId, {
        onSuccess: function (list) {
            console.log("取消订阅公众号成功");
        }
    });
    

    获取订阅公众号列表

    //获取已关注公众号
    RongIMClient.getInstance().getPublicServiceList({
        onSuccess: function (list) {
            console.log("获取已关注公众号成功");
        }
    });
    

    变量解释:

    名称 说明
    conversationType 7 为应用公众服务,8 为公有公众服务。
    hasFollowed 是否关注。
    isGlobal 是否全局公众号,true 表示为是,false 表示为否。
    introduction 公众号功能描述。
    menu 自定义菜单。
    name 公众号昵称。
    portraitUri 头像 url。
    publicServiceId 公众号 Id。

    配置参数

    http 或 https

    1、有服务的情况下无需设置 http 或 https,WebSDK 自动兼容 ,但访问静态文件必须,路径以 file:///D:**** 开头的必须设置:

    2、DCloudHBuilder 开发者一定要设置。

    window["SCHEMETYPE"] = "http";

    用户、群组、聊天室信息维护

    融云提供的即时消息传输服务,不在 App 之外建立并行的用户体系,具体的用户、群组信息及聊天室详细信息均需要在应用服务器进行维护并给端上提供查询、修改等服务,最后再及时与融云进行同步,下面给出一种集成处理方式。

    点击查看代码实现示例

    必读文档

    1. 融云架构介绍
    2. 融云 Server API 相关的开发文档(主要是用户和群组、聊天室部分)
    3. WebIM 集成引导

    在使用融云服务时和用户、群组、聊天室相关的逻辑如下:

    1. 融云需要发送消息相关的用户、群组、聊天室信息,具体如下:

      应用服务器维护用户所有信息,请求融云注册用户(提供 id、name、portrait),id 用于消息收发,name 用于 push,此接口同时提供了刷新方法。

      应用服务器维护群组及成员信息,也就是说,群的创建、群成员的维护都需要在应用服务器完成后同步到融云,但只同步群组(群 id)及群成员信息(成员 id),两种 id 同样用于消息的收发,消息发送给群组id,群成员可以获取对应消息。

    2. 用户创建和加入聊天室是在端上调用 SDK 相应方法完成,具体参考 Web SDK Demo 代码示例

    3. 融云通过链接服务器、消息收发等携带相关 id (用户 Id、群组 Id)到各端,端上通过 id 请求应用服务器获取详细信息(用户名、头像、群组名称、群头像、群成员信息以及其他业务需要的职位、等级等业务相关数据)。

      用户使用 Token 链接融云,成功后返回当前用户的 id,可以获取登录用户的详细信息。

      接收到消息时,消息体里有 conversationType、targetId 和 senderUserId,单聊(conversationType = 1)可以通过 userId = senderUserId 获取发送者详细信息,群聊(conversationType = 3)可以通过 groupId = targetId 获取群组信息,可以直接返回群组及成员信息,也可以分开请求获取,具体取决于接口设计。

    4. 收到聊天室消息(conversationType = 4),可以通过 senderUserId 得知发送者 id,通过 targetId 得知聊天室 id,然后可以获取聊天室成员列表,进而处理相应的用户信息逻辑。

    最后提供一种具体实现的代码参考:https://github.com/rongcloud/websdk-demo/blob/master/user-group.js

    表情库

    表情库引用地址

    获取官方表情库 (当前版本为 2.2.7 ) :
    <script src="http(s)://cdn.ronghub.com/RongEmoji-2.2.7.min.js"></script>
    代码示例: https://rongcloud.github.io/websdk-demo/emoji.html

    表情库使用方法

    1. 兼容表情库 2.2.6 及以下版本
    2. 默认支持 128 个 Emoji 表情并且支持自定义扩展 Emoji
    3. 支持范围:
      (1) IE7+、Edge、Chrome 30+、Firefox 30+、Safari 10+ 等主流桌面版浏览器
      (2) Android 4.4+ 系统的 Chrome 浏览器以及微信浏览器
      (3) iPhone 操作系统 iOS 8.0+ 的 Safari 浏览器以及微信浏览器

    1、Emoji 初始化

    使用默认参数初始化

    RongIMLib.RongIMEmoji.init();
    

    通过配置初始化

    // 表情信息可参考 http://unicode.org/emoji/charts/full-emoji-list.html
    var config = {
      size: 24, // 大小, 默认 24, 建议18 - 58
      url: "//f2e.cn.ronghub.com/sdk/emoji-48.png", // Emoji 背景图片
      lang: "zh", // Emoji 对应名称语言, 默认 zh
      // 扩展表情
      extension: {
        dataSource: {
          u1F914: {
            en: "thinking face", // 英文名称
            zh: "思考", // 中文名称
            tag: "🤔", // 原生 Emoji
            position: "0 0" // 所在背景图位置坐标
          }
        },
        // 新增 Emoji 背景图 url
        url: "//cdn.ronghub.com/thinking-face.png"
      }
    };
    RongIMLib.RongIMEmoji.init(config);
    

    2、获取 Emoji 列表

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

    3、Emoji 转名称

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

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

    4、名称转 Emoji

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

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

    5、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"
    

    6、名称转 HTML

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

    7、支持 ADM、CMD

    // requirejs
    require.config({
        paths: {
            'RongIMEmoji': 'http(s)://cdn.ronghub.com/RongEmoji-2.2.6.min'
        }
    });
    require(['RongIMEmoji'], function(RongIMEmoji) {
        var message = "\uf600测试 Emoji";
        RongIMEmoji.symbolToEmoji(message);
        // => "😀测试 Emoji"
    });
    

    动态表情库

    表情包:表情包下包含一组表情,可同时存在多个表情包

    表情:具体的动态表情,表情一定归属于一个表情包

    兼容性 :IE6+、Chrome、FireFox、Safari、iOS Safari、Android4.0+ 的浏览器

    引入

    // Normal
    <script src="http[s]://cdn.ronghub.com/rong-sticker-1.0.0[.min].js"></script>
    
    // RequieJS
    require.config({
      paths: {
        RongSticker: 'http[s]://cdn.ronghub.com/rong-sticker-1.0.0[.min]'
      }
    });
    
    require(['RongSticker'], function(RongSticker) {
      // 用法请参考: https://github.com/rongcloud/websdk-demo/sticker/sticker.html
    });
    

    示例

    动态表情https://rongcloud.github.io/websdk-demo/sticker/sticker.html

    IM 收发表情https://rongcloud.github.io/websdk-demo/sticker/message.html

    RequireJShttps://rongcloud.github.io/websdk-demo/sticker/require.html

    接口

    初始化

    API RongSticker.init(config);

    config 说明

    属性名 类型 必传 说明 版本
    appkey String 应用的唯一标识,创建应用请移步 开发者后台 1.0.0
    url String 表情包获取服务地址 1.0.0
    extensions Array 扩展消息包 1.0.0

    示例

    var config = {
      appkey: 'appkey'
    };
    var rongSticker = RongSticker.init(config);
    

    扩展包示例

    var extensions = [{
      // 表情包 Id
      id: "c60plBGwk2686yv4vmv4H9",
      name: "嗨宝宝",  
      desc: "融云自制表情嗨宝宝",
      icon: "http://sticker.ronghub.com/c60plBGwk2686yv4vmv4H9/icon_c60plBGwk2686yv4vmv4H9.png",
      poster: "http://sticker.ronghub.com/c60plBGwk2686yv4vmv4H9/cover_c60plBGwk2686yv4vmv4H9.png",
      order: 1,
      author: "rongcloud",
      copyright: "rongcloud",
      // 表情列表
      stickers: [{
        id: "c60plBGwk2686yv4vmv4H9",
        name: "嗨宝宝",  
        desc: "融云自制表情嗨宝宝",
        icon: "http://sticker.ronghub.com/c60plBGwk2686yv4vmv4H9/icon_c60plBGwk2686yv4vmv4H9.png",
        poster: "http://sticker.ronghub.com/c60plBGwk2686yv4vmv4H9/cover_c60plBGwk2686yv4vmv4H9.png",
        order: 1,
        author: "rongcloud",
        copyright: "rongcloud"
      }]
    }];
    
    var config = {
      appkey: 'appkey',
      extensions: extensions
    };
    var rongSticker = RongSticker.init(config);
    

    获取表情包列表

    API Package.getList(callback);

    参数说明

    属性名 类型 必传 说明 版本
    callback Function 回调函数,用来接收数据 1.0.0

    示例

    var config = {
      appkey: 'appkey'
    };
    var rongSticker = RongSticker.init(config);
    var Package = rongSticker.Package;
    Package.getList(function(result, error){
      // result.packages => 表情包列表
      // error => 错误信息,正常返回时 error 为 null
    });
    

    packages 结构

    [
      {
        id: "c60plBGwk2686yv4vmv4H9",
        name: "嗨宝宝",  
        desc: "融云自制表情嗨宝宝",
        icon: "http://sticker.ronghub.com/c60plBGwk2686yv4vmv4H9/icon_c60plBGwk2686yv4vmv4H9.png",
        poster: "http://sticker.ronghub.com/c60plBGwk2686yv4vmv4H9/cover_c60plBGwk2686yv4vmv4H9.png",
        order: 1,
        author: "rongcloud",
        copyright: "rongcloud"
      }
    ]
    

    获取表情列表

    API Sticker.getList(package, callback);

    package

    属性名 类型 必传 说明 版本
    id String 表情包 Id 1.0.0

    callback

    属性名 类型 必传 说明 版本
    callback Function 回调函数,用来接收数据 1.0.0

    示例

    var config = {
      appkey: 'appkey'
    };
    var rongSticker = RongSticker.init(config);
    var Sticker = rongSticker.Sticker;
    
    var package = {
      id: 'c60plBGwk2686yv4vmv4H9'
    };
    Sticker.getList(function(result, error){
      // result.stickers => 表情列表
      // error => 错误信息,正常返回时 error 为 null
    });
    

    stickers 结构

    [
      {
        packageId: "c60plBGwk2686yv4vmv4H9"
        stickerId: "d1PN1xTZ47p9nfMNWfGpyH",
        desc: "木问题",
        url: "http://sticker.ronghub.com/c60plBGwk2686yv4vmv4H9/image_d1PN1xTZ47p9nfMNWfGpyH.gif",
        thumbUrl: "http://sticker.ronghub.com/c60plBGwk2686yv4vmv4H9/thumb_d1PN1xTZ47p9nfMNWfGpyH.png",
        height: 240,
        width: 240,
        order: 1
      }
    ]
    

    获取表情

    API Sticker.get(stciker, callback);

    stciker

    属性名 类型 必传 说明 版本
    packageId String 表情包 Id 1.0.0
    stickerId String 表情 Id 1.0.0

    callback

    属性名 类型 必传 说明 版本
    callback Function 回调函数,用来接收数据 1.0.0

    示例

    var config = {
      appkey: 'appkey'
    };
    var rongSticker = RongSticker.init(config);
    var Sticker = rongSticker.Sticker;
    
    var sticker = {
      packageId: 'c60plBGwk2686yv4vmv4H9',
      stickerId: 'd1PN1xTZ47p9nfMNWfGpyH'
    };
    Sticker.get(function(sticker, error){
      // sticker => 表情
      // error => 错误信息,正常返回时 error 为 null
    });
    

    sticker 结构

    {
      packageId: "c60plBGwk2686yv4vmv4H9"
      stickerId: "d1PN1xTZ47p9nfMNWfGpyH",
      desc: "木问题",
      url: "http://sticker.ronghub.com/c60plBGwk2686yv4vmv4H9/image_d1PN1xTZ47p9nfMNWfGpyH.gif",
      thumbUrl: "http://sticker.ronghub.com/c60plBGwk2686yv4vmv4H9/thumb_d1PN1xTZ47p9nfMNWfGpyH.png",
      height: 240,
      width: 240,
      order: 1
    }
    

    声音库

    声音库引用地址

    获取官方声音库 (当前版本 2.2.5 ) :
    <script src="http(s)://cdn.ronghub.com/Libamr-2.2.5.min.js"></script>
    <script src="http(s)://cdn.ronghub.com/RongIMVoice-2.2.5.min.js"></script>
    代码示例: https://rongcloud.github.io/websdk-demo/voice.html

    声音库使用方法

    支持范围:
    ​ (1) IE9+、Edge、Chrome 49+、Firefox 52+、Safari 等主流桌面版浏览器
    ​ (2) Android 4.4+ 系统的默认浏览器以及微信浏览器
    ​ (3) iOS Safari 浏览器以及微信浏览器

    1、初始化

    RongIMLib.RongIMVoice.init();
    

    2、播放音频

    /*
    音频格式: base64 格式的 AMR
    完整示例音频: https://cdn.ronghub.com/voice-amr-base64.json
    */
    var audioFile = "IyFBTVIKLNEafAAeef/hgmeAH8AD...";
    // 音频文件长度   
    var duration = audioFile.length / 1024;
    // 预加载
    RongIMLib.RongIMVoice.preLoaded(audioFile, function(){
        // 播放声音
        RongIMLib.RongIMVoice.play(audioFile, duration);
    });
    

    3、停止播放

    RongIMLib.RongIMVoice.stop(audioFile);
    

    上传插件

    插件内置 3 个云厂商上传方式,可参考七牛对其他云厂商的支持,且支持私有文件上传服务。

    使用融云文件存储注意事项:
    1、融云 SDK 中默认上传文件存储有效期为 6 个月
    2、文件不支持迁移

    1、七牛云

    需配置 token ,七牛官方文档Demo

    2、腾讯云

    需配置 sign 和 bucket ,腾讯官方文档Demo

    3、阿里云

    需配置 appServer,bucket,region,OSSUrl ,阿里官方文档Demo

    4、私有文件上传服务

    私有文件上传服务需要暴露 uploadProcess , upload.js 中会调用全局的 uploadProcess 方法。

    细节可参考 上传七牛云 Demo

    示例:

    window.uploadProcess = function(file, options, callback){
        // file => 上传的文件对象(file 或 base64)
        // options => 调用上传接口传入的 config 对象
        // callback => 调用上传接口传入的 callback 对象
    };
    

    客服插件

    下载融云客服插件包,集成第三方客服功能,详细查看客服集成指南

    音视频服务

    详细请查看 Web CallLib 开发指南

    如何开发 WebIM

    如何基于 Web SDK 快速开发出一款 IM 产品?参考 Web IM 集成开发可以快速系统的进行开发。

    同时,融云在 GitHub 上提供了 Web IM Demo 代码示例,可供参考。

    开源项目

    为了方便广大开发者,节约开发资源,融云在 GitHub 上提供以下开源项目: