总结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 ......
}
});
}