融云 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 Key
RongIMLib.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'; // 目标 Id
var pushContent = 'user 发送了一条消息'; // Push 显示内容
var pushData = null; // Push 通知时附加信息, 可不填
var orientation = {
userIds: [ 'user1', 'user2' ]
}; // 群定向消息, 仅发消息给群中的 user1 和 user2
RongIMClient.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 data
contentType: false, //tell jQuery not to set contentType
data:formData,
success: function(data){
addasf=data.data.filesUrl
console.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 = 0
Record();
}
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',// 目标 Id
timestamp: 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 - 58
url: '//f2e.cn.ronghub.com/sdk/emoji-48.png', // Emoji 背景图片
lang: 'zh', // Emoji 对应名称语言, 默认 zh
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;
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 对应名称转化为原生 Emoji
RongIMLib.RongIMEmoji.symbolToEmoji(message);
// => '😀😁测试 Emoji'
var message = '\uf600测试 Emoji';
// 将 message 中的原生 Emoji (包含 Unicode ) 转化为 HTML
RongIMLib.RongIMEmoji.emojiToHTML(message);
// => "<span class='rong-emoji-content' name='[笑嘻嘻]'>😀</span>测试 Emoji"
var message = '[露齿而笑]测试 Emoji';
// 将 message 中的 Emoji 对应名称转化为 HTML
RongIMLib.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/
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
