一、营业场景
项目的发展须要吧本来本身的写的通信换为第三方的，多家对照后挑选了融云IM通信，项目要完成的功用这如果单聊、群聊、谈天室、发送的内容为笔墨、图片、文件、语音通话与视频通话。听起来挺庞杂的我们一起来完成一下，先从一个demo最先，文章会一向保护下去，晓得项目本期项目开辟完毕。
二、举行设置
2.1，注册开辟者帐号
2.2，引入sdk
<script src="http(s)://cdn.ronghub.com/RongIMLib-2.3.0.min.js"></script>三、demo代码，完成收发音讯
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="http(s)://cdn.ronghub.com/RongIMLib-2.3.0.min.js"></script>
<style>
.content_box {
width: 212px;
min-height: 50px;
border: 1px solid #ff0000;
}
</style>
</head>
<body>
<div class="content_box"></div>
<input type="text" name="inputBox" id="inputBox" value="" />
<button class="postMessage">发音讯</button>
<script>
$(".postMessage").click(function() {
getMessage()
})
RongIMClient.init("c9kqb3rdcomoj"); //这是初始化，须要填参数就是你的APPKEY。这个不难理解。
var token = "WsOfFQOvy/v3nZ80UpjcOO9l67FGL9fs1E72VNcKY11y1jg3lz2Y6w8Rm/HZ6EyrhVc9pd7SHAsQspRYfSvwo21Y8SDjLVSLxh4/gZ9YyFI=";
// 衔接融云服务器。
RongIMClient.connect(token, {
onSuccess: function(userId) {
console.log("Login successfully." + userId);
//userId是请求token时的填写的id，到时候能够封装鄙人面的extra中传过去
},
onTokenIncorrect: function() {
console.log('token无效');
},
onError: function(errorCode) {
var info = '';
switch(errorCode) {
case RongIMLib.ErrorCode.TIMEOUT:
info = '超时';
//链接超时举行从新的链接start
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,
// 重试频次 [100, 1000, 3000, 6000, 10000, 18000] 单元为毫秒，可选
url: 'cdn.ronghub.com/RongIMLib-2.2.6.min.js',
// 收集嗅探地点 [http(s)://]cdn.ronghub.com/RongIMLib-2.2.6.min.js 可选
rate: [100, 1000, 3000, 6000, 10000]
};
RongIMClient.reconnect(callback, config);
//链接超时举行从新链接end
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);
}
});
// 设置衔接监听状况 （ status 标识当前衔接状况 ）
// 衔接状况监听器
RongIMClient.setConnectionStatusListener({
onChanged: function(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.content.content);
$(".content_box").text(message.content.content)
break;
case RongIMClient.MessageType.VoiceMessage:
// 对声响举行预加载
// message.content.content 花样为 AMR 花样的 base64 码
console.log(message.content.content);
break;
case RongIMClient.MessageType.ImageMessage:
// message.content.content => 图片缩略图 base64。
// message.content.imageUri => 原图 URL。
console.log(message.content.content);
break;
case RongIMClient.MessageType.DiscussionNotificationMessage:
// message.content.extension => 讨论组中的职员。
console.log(message.content.content);
break;
case RongIMClient.MessageType.LocationMessage:
// message.content.latiude => 纬度。
// message.content.longitude => 经度。
// message.content.content => 位置图片 base64。
console.log(message.content.content);
break;
case RongIMClient.MessageType.RichContentMessage:
// message.content.content => 文本音讯内容。
// message.content.imageUri => 图片 base64。
// message.content.url => 原图 URL。
console.log(message.content.content);
break;
case RongIMClient.MessageType.InformationNotificationMessage:
// do something...
console.log(message.content.content);
break;
case RongIMClient.MessageType.ContactNotificationMessage:
// do something...
console.log(message.content.content);
break;
case RongIMClient.MessageType.ProfileNotificationMessage:
// do something...
console.log(message.content.content);
break;
case RongIMClient.MessageType.CommandNotificationMessage:
// do something...
console.log(message.content.content);
break;
case RongIMClient.MessageType.CommandMessage:
// do something...
console.log(message.content.content);
break;
case RongIMClient.MessageType.UnknownMessage:
console.log(message.content.content);
// do something...
break;
default:
console.log(message.content.content);
// do something...
}
}
});
function getMessage() {
//天生谈天内容
$('.content_box').append();
//在页面追加你要天生的内容
// 定义音讯范例,笔墨音讯运用 RongIMLib.TextMessage
var msg = new RongIMLib.TextMessage({
content: $("#inputBox").val(),
extra: "附加要通报的值"
});
var conversationtype = RongIMLib.ConversationType.PRIVATE; // 私聊
var targetId = "3045462476240907"; // 目的 Id
RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
// 发送音讯胜利
onSuccess: function(message) {
console.log(message)
//message 为发送的音讯对象而且包括服务器返回的音讯唯一Id和发送音讯时候戳
console.log("Send successfully");
},
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);
}
});
}
</script>
</body>
</html>四、发送图片、文件音讯
4.1发送图片
能够经由过程发送笔墨的要领发送，图片的地点等信息写在extra里边，直接图片保存到本身的服务器。
经由过程融云发送图片的要领，与发送笔墨相似，不过有限定，100kb以下，仅支撑jpg花样
4.2发送文件
文件与图片同理
五、参考链接
http://www.rongcloud.cn/docs/…
http://www.rongcloud.cn/docs/…
