融云 web 即时通讯
☺
官网https://www.rongcloud.cn/?utm_source=baiduBrand&utm_term=rongyun
老版本但更为详细的开发文档https://www.rongcloud.cn/docs/web.html#call 赞!
(#吐槽#融云官网不详细,群聊还有bug…虽然后来修改了…)
兼容性
浏览器支持:
Chrome Firefox Safari IE (6 – 11) Edge QQ 微信 Android(2.3.6+)
引用融云js
<script src="http://cdn.ronghub.com/RongIMLib-2.5.1.js"></script><!-- <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script> --><!-- 获取官方表情库 (当前版本为 2.2.7 ) ： --><script src="http(s)://cdn.ronghub.com/RongEmoji-2.2.7.min.js"></script><!-- HTTP --><script src="http://cdn.ronghub.com/RongEmoji-2.2.7.js"></script><!-- HTTPS --><script src="https://cdn.ronghub.com/RongEmoji-2.2.7.js"></script><!-- 压缩版 --><script src="https://cdn.ronghub.com/RongEmoji-2.2.7.min.js"></script>
初始化
<script>var appkey = '0vnjpoad0****' //融云控制台 = => 服务管理 = => App KeyRongIMLib.RongIMClient.init(appkey)var token = "dw9Uu03IbP29fY1fZA3S3Aa5eTumsZ694lbg28WddTejbdwnwEXZ6Q9eXkYboo1PY1aWRNhB2CBfXVSidMCUp6D2yarpcjdW795BVykCFGq9QrONjefEBg==";// 测试的token 是融云控制台 = => 服务管理 = => API调用 软件用滴是后台生成的
</script>
连接状态监听器
RongIMClient.setConnectionStatusListener({onChanged: function(status) {// 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.connect(token, {onSuccess: function(userId) {console.log('连接成功, 用户 id 为', userId);// 连接已成功, 此时可通过 getConversationList 获取会话列表并展示},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;default:info = errorCode;break;}console.log('连接失败, 失败原因: ', info);}
});
获取会话列表
var conversationTypes = null;//获取的会话类型, 获取所有会话类型传 null,//单聊[RongIMLib.ConversationType.PRIVATE]//群聊[RongIMLib.ConversationType.GROUP]var count = 150;RongIMClient.getInstance().getConversationList({onSuccess: function(list) {// console.log('获取会话列表成功', list);for(var i = 0; i < list.length; i ++){}},onError: function(error) {console.log('获取会话列表失败', error);},}, conversationTypes, count);
消息监听器
RongIMClient.setOnReceiveMessageListener({// 接收到的消息onReceived: function (message) {// 判断消息类型switch(message.messageType){case RongIMClient.MessageType.TextMessage:// message.content.content => 消息内容console.log(message.content.content)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.RichContentMessage:// message.content.content => 文本消息内容。// message.content.imageUri => 图片 base64。// message.content.url => 原图 URL。break;}}});
消息发送
var isMentioned = true; // @ 消息
var mentioneds = new RongIMLib.MentionedInfo(); // @ 消息对象
mentioneds.type = RongIMLib.MentionedType.PART;
mentioneds.userIdList = [ 'user1', 'user2' ]; // @ 人员列表var msg = new RongIMLib.TextMessage({ content: 'hello RongCloud!', extra: '附加信息', mentionedInfo: mentioneds });
var conversationType = RongIMLib.ConversationType.GROUP; // 群聊, 其他会话选择相应的消息类型即可
var targetId = 'group1'; // 目标 Idvar pushContent = 'user 发送了一条消息'; // Push 显示内容
var pushData = null; // Push 通知时附加信息, 可不填var orientation = {userIds: [ 'user1', 'user2' ]
}; // 群定向消息, 仅发消息给群中的 user1 和 user2RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, {onSuccess: function (message) {// message 为发送的消息对象并且包含服务器返回的消息唯一 id 和发送消息时间戳console.log('发送文本消息成功', message);},onError: function (errorCode) {console.log('发送文本消息失败', errorCode);}
}, isMentioned, pushContent, pushData, null, orientation);
图片
图片和文件消息有一个上传的问题,具体叙述官网有
现用的是input file 类型
<input type="file" class="file" name="file" id="fileimg" /> <img src="" class="tret" alt="" id="target" /> var fidsale = document.getElementById('fileimg').files[0];window.UploadFile.resize(fidsale,config,function(imageData){target.src = imageData;ltimg=imageData});var formData = new FormData();formData.append("file", fidsale);formData.append("type",1);//上传图片的接口,把图片保存在自己的服务器$.ajax({type:"POST",url: "http://1**************/fileUpload",processData: false, //tell jQuery not to process the datacontentType: false, //tell jQuery not to set contentTypedata:formData,success: function(data){addasf=data.data.filesUrlconsole.log(data.data.filesUrl)}})
图片消息发送
var base64Str = ltimg; // 压缩后的 base64 略缩图, 用来快速展示图片var imageUri = addasf; // 上传到自己服务器的 url. 用来展示高清图片var msg = new RongIMLib.ImageMessage({content: base64Str, imageUri: imageUri});console.log(msg)RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, {onSuccess: function (message) {console.log('发送图片消息成功', message);},onError: function (errorCode) {console.log('发送图片消息失败', errorCode);}});
插一条css
object-fit: contain;
css3 object-fit详解
object-fit理解
CSS3 background-size出现的比较早，大家应该知道其支持的一些值，除了数值之外，其还支持几个关键字，例如：cover, contain等。
object-fit也是类似的，但还是有些差异，具体有5个值：
.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }
每个属性值的具体含义如下（自己理解的白话文，官方释义见官网）：
fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
历史记录
var timestrap = i == 1 ? 0 : null;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 => 是否还有历史消息可以获取。//获取更多历史记录mach.onclick = function() {if (hasMsg) {// var timestrap = 0Record();}console.log(list)for(var a = 0; a < list.length ; a++){}},onError: function(error) {console.log('GetHistoryMessages, errorcode:' + error);}});
删除会话
// 删除会话var conversationType = RongIMLib.ConversationType.PRIVATE;// var conversationTypes = [RongIMLib.ConversationType.PRIVATE, RongIMLib.ConversationType.GROUP];var targetId = targetId RongIMClient.getInstance().removeConversation(conversationType, targetId, {onSuccess: function(bool) {console.log('删除指定会话成功');},onError: function(error) {console.log('删除指定会话失败', error);}});//清除会话RongIMClient.getInstance().clearConversations({onSuccess: function() {console.log('清除会话成功');},onError: function(error) {console.log('清除会话失败', error);}}, conversationTypes);var params = {conversationType:RongIMLib.ConversationType.GROUP, // 会话类型targetId: '2019PN1116Q51024dg10',// 目标 Idtimestamp: 1573884482646 // 清除时间点};// 清除历史消息RongIMLib.RongIMClient.getInstance().clearRemoteHistoryMessages(params, {onSuccess: function() {console.log('成功')// location.reload(true)// 清除成功},onError: function(error) {// 请排查：单群聊消息云存储是否开通console.log(error);}});
表情
RongIMLib.RongIMEmoji.init();var config = {size: 24, // 大小, 默认 24, 建议18 - 58url: '//f2e.cn.ronghub.com/sdk/emoji-48.png', // Emoji 背景图片lang: 'zh', // Emoji 对应名称语言, 默认 zh extension: {dataSource: {u1F914: { // 自定义 u1F914 对应的表情en: 'thinking face', // 英文名称zh: '思考', // 中文名称tag: '🤔', // 原生 Emojiposition: '0 0' // 所在背景图位置坐标}},url: '//cdn.ronghub.com/thinking-face.png' // 新增 Emoji 背景图 url}};RongIMLib.RongIMEmoji.init(config);var list = RongIMLib.RongIMEmoji.list;console.log(list)/*list => [{unicode: 'u1F600',emoji: '😀',node: span,symbol: '[笑嘻嘻]'},...]*/for(var a = 0; a < list.length ; a++){}var message = '😀😁测试 Emoji';// 将 message 中的原生 Emoji 转化为对应名称RongIMLib.RongIMEmoji.emojiToSymbol(message);// => '[笑嘻嘻][露齿而笑]测试 Emoji'var message = '[笑嘻嘻][露齿而笑]测试 Emoji';// 将 message 中的 Emoji 对应名称转化为原生 EmojiRongIMLib.RongIMEmoji.symbolToEmoji(message);// => '😀😁测试 Emoji'var message = '\uf600测试 Emoji';// 将 message 中的原生 Emoji (包含 Unicode ) 转化为 HTMLRongIMLib.RongIMEmoji.emojiToHTML(message);// => "<span class='rong-emoji-content' name='[笑嘻嘻]'>😀</span>测试 Emoji"var message = '[露齿而笑]测试 Emoji';// 将 message 中的 Emoji 对应名称转化为 HTMLRongIMLib.RongIMEmoji.symbolToHTML(message);// => "<span class='rong-emoji-content' name='[露齿而笑]'>😁</span>测试 Emoji"
简单说明
conversationType Number 会话类型
(单聊 ==1 == RongIMLib.ConversationType.PRIVATE;)
(群 == 3 ==RongIMLib.ConversationType.GROUP;)
targetId String 目标 id
senderUserId String 发送者 id
消息结构:https://docs.rongcloud.cn/im/imlib/web/message-list/structure/
支付宝扫一扫
微信扫一扫
