PC端使用融云IM即时通讯

融云PC端开发者文档

引入

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