1.引入融云相关JS文档,这个不难理解。我建议一定要引最新版本。
<script src="http://cdn.ronghub.com/RongIMLib-2.2.5.min.js"></script>
2.在初次加载融云中我们所要做的事情:
RongIMClient.init("appkey");//这是初始化,需要填参数就是你的APPKEY。这个不难理解。
var token = "";//注册时的token
3.链接融云的服务器。
RongIMClient.connect(token,
{
onSuccess: function(userId) {
console.log("Login successfully." + userId);
},
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);
}
});
4.设置消息监听
// 设置连接监听状态 ( 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.NETWORK_UNAVAILABLE:
console.log('网络不可用');
break;
}
}});
// 消息监听器
RongIMClient.setOnReceiveMessageListener({
// 接收到的消息
onReceived: function (message) {
// 判断消息类型
switch(message.messageType){
case RongIMClient.MessageType.TextMessage:
console.log(message.content.content);
//发送的消息内容将会被打印
break;
case RongIMClient.MessageType.ImageMessage:
// do something...
break;
case RongIMClient.MessageType.DiscussionNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.LocationMessage:
// do something...
break;
case RongIMClient.MessageType.RichContentMessage:
// do something...
break;
case RongIMClient.MessageType.DiscussionNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.InformationNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.ContactNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.ProfileNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.CommandNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.CommandMessage:
// do something...
break;
case RongIMClient.MessageType.UnknownMessage:
// do something...
break;
default:
// 自定义消息
// do something...
}
}
});
5.发送消息
// 定义消息类型,文字消息使用 RongIMLib.TextMessage
var msg = new RongIMLib.TextMessage({content:"hello",extra:"附加信息"});
//或者使用RongIMLib.TextMessage.obtain 方法.具体使用请参见文档
//var msg = RongIMLib.TextMessage.obtain("hello");
var conversationtype = RongIMLib.ConversationType.PRIVATE; // 私聊
var targetId = "xxx"; // 目标 Id
RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
// 发送消息成功
onSuccess: function (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);
}
}
);
7.融云不提供聊天的样式 所以聊天框还是需要我们自己去设置的
CSS:
div.speech {
margin: 10px 0;
padding: 8px;
table-layout: fixed;
word-break: break-all;
position: relative;
background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#ffffff), color-stop(0.1, #ececec), color-stop(0.5, #dbdbdb), color-stop(0.9, #dcdcdc), to(#8c8c8c) );
border: 1px solid #989898;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
div.speech:before {
content: '';
position: absolute;
width: 0;
height: 0;
left: 15px;
top: -20px;
border: 10px solid;
border-color: transparent transparent #989898 transparent;
}
div.speech:after {
content: '';
position: absolute;
width: 0;
height: 0;
left: 17px;
top: -16px;
border: 8px solid;
border-color: transparent transparent #ffffff transparent;
}
div.speech.right {
box-shadow: -2px 2px 5px #CCC;
margin-right: 10px;
width: 75%;
float: right;
background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#e4ffa7), color-stop(0.1, #bced50), color-stop(0.4, #aed943), color-stop(0.8, #a7d143), to(#99BF40) );
}
div.speech.right:before {
content: '';
position: absolute;
width: 0;
height: 0;
top: 9px;
bottom: auto;
left: auto;
right: -10px;
border-width: 9px 0 9px 10px;
border-color: transparent #989898;
}
div.speech.right:after {
content: '';
position: absolute;
width: 0;
height: 0;
top: 10px;
bottom: auto;
left: auto;
right: -8px;
border-width: 8px 0 8px 9px;
border-color: transparent #bced50;
}
div.speech.left {
box-shadow: 2px 2px 2px #CCCCCC;
margin-left: 10px;
width: 75%;
float: left;
background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#ffffff), color-stop(0.1, #eae8e8), color-stop(0.4, #E3E3E3), color-stop(0.8, #DFDFDF), to(#D9D9D9) );
}
div.speech.left:before {
content: '';
position: absolute;
width: 0;
height: 0;
top: 9px;
bottom: auto;
left: -10px;
border-width: 9px 10px 9px 0;
border-color: transparent #989898;
}
div.speech.left:after {
content: '';
position: absolute;
width: 0;
height: 0;
top: 10px;
bottom: auto;
left: -8px;
border-width: 8px 9px 8px 0;
border-color: transparent #eae8e8;
}
.leftimg {
float: left;
margin-top: 10px;
}
.rightimg {
float: right;
margin-top: 10px;
}
.leftd {
clear: both;
float: left;
background: url(../img/ueser3.jpg) 0px 10px no-repeat;
padding-left: 40px;
}
.rightd {
clear: both;
float: right;
background: url(../img/ueser3.jpg) right 10px no-repeat;
padding-right: 40px;
}
.clear {
clear: both;
}
HTML:
<div class="leftd">
<div class="speech left"> 你在吗? </div>
</div>
前端小白一枚 希望每天能进步一点点