PC端使用融云IM即时通讯
龚振濂
引入
在public的index.html下引入
<script src="https://cdn.ronghub.com/RongIMLib-2.5.0.min.js"></script>
<script src="https://cdn.ronghub.com/RongEmoji-2.2.7.min.js"></script>
<script src="https://cdn.ronghub.com/rong-sticker-1.0.0.min.js"></script>
初始化
在需要使用IM通讯的页面引入即可
export function rongyunInit(){
//融云初始化
RongIMLib.RongIMClient.init('IM密钥');
//表情库初始化
RongIMLib.RongIMEmoji.init();
// 连接状态监听器
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.setOnReceiveMessageListener({
// 接收到的消息
onReceived: function (message) {
// 判断消息类型
switch(message.messageType){
case RongIMClient.MessageType.TextMessage:
// message.content.content => 文字内容
// console.log(message)
break;
case RongIMClient.MessageType.VoiceMessage:
console.log(message)
// message.content.content => 格式为 AMR 的音频 base64
break;
case RongIMClient.MessageType.ImageMessage:
console.log(message)
// message.content.content => 图片缩略图 base64
// message.content.imageUri => 原图 URL
break;
case RongIMClient.MessageType.LocationMessage:
console.log(message)
// message.content.latiude => 纬度
// message.content.longitude => 经度
// message.content.content => 位置图片 base64
break;
case RongIMClient.MessageType.RichContentMessage:
console.log(message)
// message.content.content => 文本消息内容
// message.content.imageUri => 图片 base64
// message.content.url => 原图 URL
break;
case RongIMClient.MessageType.InformationNotificationMessage:
console.log(message)
// do something
break;
case RongIMClient.MessageType.ContactNotificationMessage:
console.log(message)
// do something
break;
case RongIMClient.MessageType.ProfileNotificationMessage:
console.log(message)
// do something
break;
case RongIMClient.MessageType.CommandNotificationMessage:
console.log(message)
// do something
break;
case RongIMClient.MessageType.CommandMessage:
console.log(message)
// do something
break;
case RongIMClient.MessageType.UnknownMessage:
// console.log(message)
break;
default:
// do something
console.log(message)
}
}
});
var token = localStorage.im_token
//连接服务器
RongIMClient.connect(token, {
onSuccess: function(userId) {
console.log('连接服务器成功:' + 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(info);
}
});
//是否设置重新连接
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,
// 网络嗅探地址 [http(s)://]cdn.ronghub.com/RongIMLib-2.2.6.min.js 可选
url: 'cdn.ronghub.com/RongIMLib-2.2.6.min.js',
// 重试频率 [100, 1000, 3000, 6000, 10000, 18000] 单位为毫秒，可选
rate: [100, 1000, 3000, 6000, 10000]
};
RongIMClient.reconnect(callback, config);
}
查看历史消息
export function getChatRecord(obj){
if(obj.type == 1){
var conversationType = RongIMLib.ConversationType.PRIVATE; // 单聊, 其他会话选择相应的会话类型即可
}else {
var conversationType = RongIMLib.ConversationType.GROUP;
}
var targetId = obj.id; // 想获取自己和谁的历史消息，targetId 赋值为对方的 Id
var timestrap = null; // 默认传 null，若从头开始获取历史消息，请赋值为 0, timestrap = 0;
if(obj.isHead){
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);
}
});
}
清除历史消息
export function clearChatRecord(id){
var params = {
conversationType: RongIMLib.ConversationType.PRIVATE, // 会话类型
targetId: id + '', // 目标 Id
timestamp: store.state.msgInfo.msgArr[store.state.msgInfo.msgArr.length - 1].sentTime // 清除时间点
};
RongIMLib.RongIMClient.getInstance().clearRemoteHistoryMessages(params, {
onSuccess: function() {
// 清除成功
store.commit('msgArr' , {})
},
onError: function(error) {
// 请排查：单群聊消息云存储是否开通
console.log(error);
}
});
}
发送消息
export function sendMessage(obj){
//发送消息
var msg = new RongIMLib.TextMessage({ content: obj.value, extra: obj.type });
if(obj.type == 1){
var conversationType = RongIMLib.ConversationType.PRIVATE; // 单聊, 其他会话选择相应的会话类型即可
}else{
var conversationType = RongIMLib.ConversationType.GROUP; // 单聊, 其他会话选择相应的会话类型即可
}
var targetId = obj.id // 目标 Id
// console.log(obj)
RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, {
onSuccess: function (message) {
// message 为发送的消息对象并且包含服务器返回的消息唯一 Id 和发送消息时间戳
// console.log('发送成功' , message);
},
onError: function (errorCode, message) {
var info = '';
switch (errorCode) {
case RongIMLib.ErrorCode.TIMEOUT:
info = '超时';
break;
case RongIMLib.ErrorCode.UNKNOWN:
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;
}
console.log('发送失败: ' + info + errorCode);
}
});
}
获取未读消息
export function getUnReadMsg(obj){
// var conversationType = ''
// if(obj.type == 1){
// var conversationType = RongIMLib.ConversationType.PRIVATE; // 单聊, 其他会话选择相应的会话类型即可
// }else {
// var conversationType = RongIMLib.ConversationType.GROUP;
// }
// console.log(obj)
var getUnreadCount = RongIMClient.getInstance().getUnreadCount;
getUnreadCount(obj.type,obj.id,{
onSuccess:function(count) {
//count 会话未读数
// console.log(count)
store.commit('unReadMsgFn' , count)
},
onError:function(error){
console.log(error)
}
});
}
清除已读消息数
export function clearReadMsg(obj){
if(obj.type == 1){
var conversationType = RongIMLib.ConversationType.PRIVATE; // 单聊, 其他会话选择相应的会话类型即可
}else {
var conversationType = RongIMLib.ConversationType.GROUP;
}
var clearUnreadCount = RongIMClient.getInstance().clearUnreadCount;
clearUnreadCount(conversationType, obj.id, {
onSuccess: function () {
// console.log('清除成功')
},
onError: function (errorCode) {console.log(errorCode)}
});
}
类似资料：