融云web开发

总结web融云的几要点:

RongIMClient.init("")//这是初始化,需要填参数就是你的APPKEY。

var token="token"//这个不难理解吧,获取后台返给你的token

上面的做好后就开始连接融云服务器了

// 连接融云服务器。
RongIMClient.connect(token, {
        onSuccess: function(userId) {
// console.log(userId)
        console.log("Login successfully."+ userId);
        //userId是申请token时的填写的id,到时候可以封装在下面的extra中传过去
                getHistoryMessage()
    },
    onTokenIncorrect: function() {
        console.log('token无效');
    },
    onError:function(errorCode){
        var info = '';
        switch (errorCode) {
            case RongIMLib.ErrorCode.TIMEOUT:
                info = '超时';
                break;
            case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                info = '未知错误';
                break;
            case RongIMLib.ErrorCode.UNACCEPTABLE_PaROTOCOL_VERSION:
                info = '不可接受的协议版本';
                break;
            case RongIMLib.ErrorCode.IDENTIFIER_REJECTED:
                info = 'appkey不正确';
                break;
            case RongIMLib.ErrorCode.SERVER_UNAVAILABLE:
                info = '服务器不可用';
                break;
        }
        console.log(errorCode);
    }
});

// 连接状态监听器
RongIMClient.setConnectionStatusListener({
    onChanged: function (status) {
        switch (status) {
            //链接成功
            case RongIMLib.ConnectionStatus.CONNECTED:
                console.log('链接成功');
                 expression()
                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.NETWORK_UNAVAILABLE:
                console.log('网络不可用');
                break;
        }
    }
});

//这里就是监听消息

// 消息监听器
RongIMClient.setOnReceiveMessageListener({
    // 接收到的消息
    onReceived: function (message) {
        // 判断消息类型
                console.log(message);
//              $(".region").html(message.content.user.name)//对方聊天姓名
//               console.log(message.content.user.portrait)
//              console.log(message.content.content);
        switch(message.messageType){
//              console.log(message.content.content);
//message接受到的消息(包含发送的信息,也可以在extra中添加要传递的值,如:时间等)
            case RongIMClient.MessageType.TextMessage:
          //处理表情
            RongIMLib.RongIMEmoji.init();
var message = message.content.content;
// 将 message 中的原生 Emoji 转化为对应名称
var icon5=RongIMLib.RongIMEmoji.emojiToHTML(message);
//end
str = '<div class="chat_list"><div class="head_photo lf"><img src="'+im_icon+'"/></div><div class="chat_conten lf"><div class="Triangle_left"></div><p>'+ icon5 +'</p></div><div class="clear"></div></div>';
//生成聊天内容
div.innerHTML += str;
        div.scrollTop = div.scrollHeight ;
//在页面追加你要生成的内容
            console.log("TextMessage")
                break;
            case RongIMClient.MessageType.ImageMessage:
                console.log("ImageMessage")
                if(message.content.imageUri==""){
str = '<div class="chat_list"><div class="head_photo lf"><img src="'+im_icon+'"/></div><div class="chat_conten lf"><div class="Triangle_left"></div><img src="'+ message.content.content +'"/></div><div class="clear"></div></div>';
}else{
str = '<div class="chat_list"><div class="head_photo lf"><img src="'+im_icon+'"/></div><div class="chat_conten lf"><div class="Triangle_left"></div><img src="'+ message.content.imageUri +'"/></div><div class="clear"></div></div>';
}
//生成聊天内容
div.innerHTML += str;
        div.scrollTop = div.scrollHeight ;
//在页面追加你要生成的内容
                break;
            case RongIMClient.MessageType.VoiceMessage:
            str = '<div class="chat_list"><div class="head_photo lf"><img src="'+im_icon+'"/></div><div class="chat_conten lf"><div class="Triangle_left"></div><p class="voice" name="'+message.content.content+'">语音</p></div><div class="clear"></div></div>';
div.innerHTML += str;
        div.scrollTop = div.scrollHeight ;
            break;
            case RongIMClient.MessageType.DiscussionNotificationMessage:
                // message.content.extension => 讨论组中的人员。
                console.log("DiscussionNotificationMessage")
                break;
            case RongIMClient.MessageType.RichContentMessage:
                // message.content.content => 文本消息内容。
                // message.content.imageUri => 图片 base64。
                // message.content.url => 原图 URL。
//在页面追加你要生成的内容
                console.log("RichContentMessage")
                break;
            case RongIMClient.MessageType.DiscussionNotificationMessage:
                // message.content.extension => 讨论组中的人员。
                console.log("DiscussionNotificationMessage")
                break;
            case RongIMClient.MessageType.InformationNotificationMessage:
                // do something...
                console.log("InformationNotificationMessage")
                break;
            case RongIMClient.MessageType.ContactNotificationMessage:
                // do something...
                console.log("ContactNotificationMessage")
                break;
            case RongIMClient.MessageType.ProfileNotificationMessage:
                // do something...
                console.log("ProfileNotificationMessage")
                break;
            case RongIMClient.MessageType.CommandNotificationMessage:
                // do something...
                console.log("CommandNotificationMessage")
                break;
            case RongIMClient.MessageType.CommandMessage:
                // do something...
                console.log("CommandMessage")
                break;
            case RongIMClient.MessageType.UnknownMessage:
                // do something...
                console.log("UnknownMessage")
                break;
            default:
            // 自定义消息
            // do something...
        }
div.scrollTop = div.scrollHeight;//滑动到底部
    }
});
}

//这里我先处理下语言

//处理声音
$(function(){
$("#chat").on("click",".voice",function(){
var name=$(this).attr("name")
// console.log(name)
// 对声音进行预加载                
        RongIMLib.RongIMVoice.init();
        var audioFile = name;
// 音频文件长度   
var duration = audioFile.length / 1024;
// 预加载
RongIMLib.RongIMVoice.preLoaded(audioFile, function(){
    // 播放声音
    RongIMLib.RongIMVoice.play(audioFile, duration);
});
})
})

//处理按下事件

document.onkeydown = function(e){
console.log(event.keyCode)
if(event.keyCode == 13){
getMessage()
}
}

//处理文本发送或表情发送

var msg,conversationtype,targetId
//文本类
function getMessage(){
var value = contain.value.replace(/(^\s*)|(\s*$)/g,"");
if(value.length == 0){
return
}
console.log(icon)
//转换表情
RongIMLib.RongIMEmoji.init();
var message = value;
// 将 message 中的原生 Emoji 转化为对应名称
var icon5=RongIMLib.RongIMEmoji.emojiToHTML(message);
//
str = '<div class="chat_list"><div class="head_photo rf"><img src="'+icon+'"/></div><div class="chat_conten rf"><div class="Triangle_right"></div><p>'+ icon5 +'</p></div><div class="clear"></div></div>';
    //生成聊天内容
    div.innerHTML += str;
    //在页面追加你要生成的内容
div.scrollTop = div.scrollHeight ;
contain.value = "";
var user = {//这是你要定义的内容
    id : userId,
    name : user_name,
    portrait : icon //头像 
};
    // 定义消息类型,文字消息使用 RongIMLib.TextMessage
    msg = new RongIMLib.TextMessage({content:value,user:user});
    conversationtype = RongIMLib.ConversationType.PRIVATE; // 私聊
    targetId = im_id; // 目标 Id
    console.log(im_id)
    //ios和安卓
    msg = new RongIMLib.TextMessage({content:value,user:user});
conversationtype = RongIMLib.ConversationType.PRIVATE; // 单聊,其他会话选择相应的消息类型即可。
targetId = im_id; // 目标 Id
pushData = "your pushInfo";
console.log(msg)
console.log(value)
//
    uploading()
}

//处理图片上传

//图片类
function pictures(img_base){
// console.log(img_base)
// var value = contain.value.replace(/(^\s*)|(\s*$)/g,"");
// if(value.length == 0){
// return
// }
// console.log(icon)
str = '<div class="chat_list"><div class="head_photo rf"><img src="'+icon+'"/></div><div class="chat_conten rf"><div class="Triangle_right"></div><img src="'+ img_base +'"/></div><div class="clear"></div></div>';
    //生成聊天内容
    div.innerHTML += str;
    //在页面追加你要生成的内容
div.scrollTop = div.scrollHeight ;
contain.value = "";
var user = {//自定义内容
    id : userId,
    name : user_name,
    portrait : icon //头像 
};
//图片
var base64Str = img_base;
var imageUri = ""; // 上传到自己服务器的 URL。这里也可以不穿
msg = new RongIMLib.ImageMessage({content:base64Str,imageUri:imageUri});
conversationtype = RongIMLib.ConversationType.PRIVATE; // 单聊,其他会话选择相应的消息类型即可。
targetId = im_id; // 目标 Id
//
    uploading()
}

//接下来就是上传

//上传
function uploading(){
RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
                // 发送消息成功
        onSuccess: function (message) {
          //message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
            console.log("Send successfully");
            div.scrollTop = div.scrollHeight ;
        },
        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);
        }
    });
}

//上传完成了就差不多完成了,现在先处理下上传图片的base64压缩

//flie改变事件
$(function(){
$("#file").change(function(){
var m_this = this;
     cutImageBase64(m_this,null,400,0.8);  
})
})

//base64压缩
function cutImageBase64(m_this,id,wid,quality) {
    var file = m_this.files[0];
    var URL = window.URL || window.webkitURL;
    var blob = URL.createObjectURL(file);
    var base64;
var img = new Image();
    img.src = blob;
    img.onload = function() {
        var that = this;
        //生成比例
        var w = that.width,
            h = that.height,
            scale = w / h;
            w = wid || w;
            h = w / scale;
//生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        $(canvas).attr({
            width: w,
            height: h
        });
        ctx.drawImage(that, 0, 0, w, h);
        // 生成base64            
        base64 = canvas.toDataURL('image/jpeg', quality || 0.8);
//      console.log(base64)
        pictures(base64)
//      $(id).attr('src',base64);
    };
}

//获取表情列表

//表情
function expression(){
RongIMLib.RongIMEmoji.init();
var list = RongIMLib.RongIMEmoji.list;
// console.log(list)
var html="";
$.each(list, function(i,n) {
RongIMLib.RongIMEmoji.init();
var message = n.emoji;
// 将 message 中的原生 Emoji 转化为对应名称
var icon5=RongIMLib.RongIMEmoji.emojiToHTML(message);
html+='<div class="name" name="'+n.emoji+'"><div>'+icon5+'</div></div>'
});
$(".icon_list_list").html(html)
}

//下面是大家最重要的历史记录

//获取历史记录
function getHistoryMessage(){
//请确保单群聊消息云存储服务开通,且开通后有过收发消息记录
 RongIMClient.getInstance().getHistoryMessages(RongIMLib.ConversationType.PRIVATE, im_id, null, 20, {
    onSuccess: function(list, hasMsg) {
      // hasMsg为boolean值,如果为true则表示还有剩余历史消息可拉取,为false的话表示没有剩余历史消息可供拉取。
        // list 为拉取到的历史消息列表
//      console.log(list)
        var html="";
        $.each(list,function(i,n) {
        if(n.messageDirection==2){
        //处理文本
        if(n.messageType=="TextMessage"){
        //处理表情
            RongIMLib.RongIMEmoji.init();
var message = n.content.content;
// 将 message 中的原生 Emoji 转化为对应名称
var icon5=RongIMLib.RongIMEmoji.emojiToHTML(message);
        html+='<div class="chat_list"><div class="head_photo lf"><img src="'+im_icon+'"/></div><div class="chat_conten lf"><div class="Triangle_left"></div><p>'+ icon5 +'</p></div><div class="clear"></div></div>';
        }
        //处理表情
        if(n.messageType=="RichContentMessage"){
        //处理表情
            RongIMLib.RongIMEmoji.init();
var message = n.content.content;
// 将 message 中的原生 Emoji 转化为对应名称
var icon5=RongIMLib.RongIMEmoji.emojiToHTML(message);
        html+='<div class="chat_list"><div class="head_photo lf"><img src="'+im_icon+'"/></div><div class="chat_conten lf"><div class="Triangle_left"></div><p>'+ icon5 +'</p></div><div class="clear"></div></div>';
        }
        //处理图片
        if(n.messageType=="ImageMessage"){
        if(n.content.imageUri==""){//这里是吧base64拿来当图片链接的

        html+='<div class="chat_list"><div class="head_photo lf"><img src="'+im_icon+'"/></div><div class="chat_conten lf"><div class="Triangle_left"></div><img src="'+ n.content.content +'"/></div><div class="clear"></div></div>';
        }else{
        html+='<div class="chat_list"><div class="head_photo lf"><img src="'+im_icon+'"/></div><div class="chat_conten lf"><div class="Triangle_left"></div><img src="'+ n.content.imageUri +'"/></div><div class="clear"></div></div>';
        }
        }
        //处理语音
        if(n.messageType=="VoiceMessage"){
        html+='<div class="chat_list"><div class="head_photo lf"><img src="'+im_icon+'"/></div><div class="chat_conten lf"><div class="Triangle_left"></div><p class="voice" name="'+ n.content.content +'">语音</p></div><div class="clear"></div></div>';
        }
        }else{
        //处理文本
        if(n.messageType=="TextMessage"){
        //处理表情
            RongIMLib.RongIMEmoji.init();
var message = n.content.content;
// 将 message 中的原生 Emoji 转化为对应名称
var icon5=RongIMLib.RongIMEmoji.emojiToHTML(message);
        html+='<div class="chat_list"><div class="head_photo rf"><img src="'+icon+'"/></div><div class="chat_conten rf"><div class="Triangle_right"></div><p>'+ icon5 +'</p></div><div class="clear"></div></div>';
        }
        //处理表情
        if(n.messageType=="RichContentMessage"){
        //处理表情
            RongIMLib.RongIMEmoji.init();
var message = n.content.content;
// 将 message 中的原生 Emoji 转化为对应名称
var icon5=RongIMLib.RongIMEmoji.emojiToHTML(message);
        html+='<div class="chat_list"><div class="head_photo rf"><img src="'+icon+'"/></div><div class="chat_conten rf"><div class="Triangle_right"></div><p>'+ icon5 +'</p></div><div class="clear"></div></div>';
        }
        //处理图片
        if(n.messageType=="ImageMessage"){
        if(n.content.imageUri==""){
        html+='<div class="chat_list"><div class="head_photo lf"><img src="'+im_icon+'"/></div><div class="chat_conten lf"><div class="Triangle_left"></div><img src="'+ n.content.content +'"/></div><div class="clear"></div></div>';
        }else{
        html+='<div class="chat_list"><div class="head_photo lf"><img src="'+im_icon+'"/></div><div class="chat_conten lf"><div class="Triangle_left"></div><img src="'+ n.content.imageUri +'"/></div><div class="clear"></div></div>';
        }
        }
        //处理语音
        if(n.messageType=="VoiceMessage"){
        html+='<div class="chat_list"><div class="head_photo rf"><img src="'+icon+'"/></div><div class="chat_conten rf"><div class="Triangle_right"></div><p class="voice" name="'+ n.content.content +'">语音</p></div><div class="clear"></div></div>';
        }
        }
        });
        $("#chat").html(html)
        div.scrollTop = div.scrollHeight ;
//      
    },
    onError: function(error) {
        // APP未开启消息漫游或处理异常
            // throw new ERROR ......
    }
  });
}

 

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值