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>
有什么不懂的或者交流可以联系我QQ或者微信:635844844
前端小白一枚 希望每天能进步一点点