<include file="public@head"/>
</head>
<body>
<style type="text/css">
*, *:before, *:after {
box-sizing: border-box;
}
.li{
padding: 10px;
}
.li .userImg img{
border-radius: 50%;
width: 30px;
height: 30px;
margin-bottom: 10px;
}
.li img {
width: 200px;
}
.chat{
width: 800px;
margin: auto;
overflow: auto;
box-shadow: 0 0 6px 0 #ccc;
}
.aside{
color: #f4f4f4;
background-color: #2e3238;
padding: 20px;
height: 600px;
padding: 0;
}
.aside header{
/*height: 40px*/
padding: 0;
}
.aside header img,.item img{
border-radius: 100%;
/*width: 80px;*/
height: 40px;
width: 40px;
padding: 0;
margin: 0;
}
.aside_top{
margin: 20px;
}
.aside .avatar{
vertical-align: middle;
}
.active{
background-color: hsla(0,0%,100%,.1);
}
.item{
padding: 9pt 15px;
border-bottom: 1px solid #292c33;
}
.message{
position: relative;
overflow: hidden;
background-color: #eee;
height: 600px;
padding: 0;
}
.message_list{
padding: 10px 15px;
overflow-y: scroll;
height: calc(100% - 128px);
}
.message_text{
position: absolute;
width: 100%;
bottom: 0;
left: 0;
height: 8pc;
border-top: 1px solid #ddd;
}
.message_text textarea {
padding: 10px;
height: calc(100% - 28px);
width: 100%;
border: none;
outline: 0;
font-family: Micrsofot Yahei;
resize: none;
}
.li_left{
}
.li_right{
text-align: right;
}
.info{
display: inline-block;
position: relative;
padding: 0 10px;
max-width: calc(100% - 40px);
min-height: 30px;
line-height: 2.5;
font-size: 9pt;
text-align: left;
word-break: break-all;
background-color: #fafafa;
border-radius: 4px;
}
.message_text button{
position: absolute;
right: 0;
bottom: 0;
width: 96px;
}
.flex-y-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
}
.send-time {
margin-left: 10px;
}
.message_text_column{
height: 28px;
line-height: 28px;
background: #fcfcfc;
}
.message_text_column img{
width: 20px;
height: 20px;
margin-left: 10px;
}
.file-btn{
position: absolute;
/* width: 100%; */
/* height: 100%; */
/* top: 0; */
width: 20px;
margin-left: 10px;
left: 0;
outline: none;
background-color: transparent;
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
</style>
<div class="wrap js-check-wrap" id="app">
<div class="chat row">
<div class="aside col-xs-3">
<div class="aside_top tow">
<header class="col-xs-12">
<img class="col-xs-4 avatar" :src="my_avatar.avatar">
<div class="col-xs-8">{{my_avatar.user_nickname}}</div>
</header>
</div>
<div class="item col-xs-12 flex-y-center" v-for="(vo,index) in tabs_list" :class="tab == index ? 'active' : ''" @click="tabs(vo.user_id,index)">
<img class="col-xs-4" :src="vo.avatar">
<div class="col-xs-8">{{vo.user_nickname}}</div>
</div>
</div>
<div class="message col-xs-9">
<div class="message_list">
<div class="li row" v-for="(vo,index) in message_list" :class="vo.senderUserId == my_avatar.id ? 'li_right' : 'li_left'">
<div class="userImg">
<img v-if="vo.senderUserId == my_avatar.id" :src="my_avatar.avatar" />
<img v-else :src="default_avatar"><span class="send-time" v-text="vo.sentTime"></span>
</div>
<div class="info" v-if="vo.messageType == 'TextMessage'" v-text="vo.content"></div>
<img v-if="vo.messageType == 'ImageMessage'" :src="vo.content" />
</div>
</div>
<div class="message_text">
<div class="message_text_column flex-y-center">
<a @click="uploadOneImage2('图片上传','')" href="javascript:;">
<img src="__STATIC__/images/message_text_column_img.png"
id="thumbnail-preview"
width="135" style="cursor: pointer"/>
</a>
</div>
<textarea placeholder="按 Enter 发送" v-model="content" @keyup="show($event)"></textarea>
<button type="button" @click="send()" class="btn btn-info">发送</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<script src="http://cdn.ronghub.com/RongIMLib-2.3.2.min.js"></script>
<script src="https://cdn.ronghub.com/RongEmoji-2.2.7.min.js"></script>
<reference path="__STATIC__/RongIMLib-2.3.2.d.ts">
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
tabs_id:'',
tabs_list:[],
message_list:[],
content:'',
my_avatar:[],
user_id:'',
senderUserId:'',
default_avatar:'',
tab:0
// history:''
},
methods: {
uploadOneImage2:function(dialog_title, input_selector, extra_params, app){
vm.openUploadDialog2(dialog_title, function (dialog, files) {
$(input_selector).val(files[0].filepath);
$(input_selector + '-preview').attr('src', files[0].preview_url);
$(input_selector + '-name').val(files[0].name);
}, extra_params, 0, 'image', app);
},
openUploadDialog2:function(dialog_title, callback, extra_params, multi, filetype, app){
Wind.css('artDialog');
multi = multi ? 1 : 0;
filetype = filetype ? filetype : 'image';
app = app ? app : GV.APP;
var params = '&multi=' + multi + '&filetype=' + filetype + '&app=' + app;
Wind.use("artDialog", "iframeTools", function () {
art.dialog.open(GV.ROOT + 'user/Asset/webuploader?' + params, {
title: dialog_title,
id: new Date().getTime(),
width: '600px',
height: '350px',
lock: true,
fixed: true,
background: "#CCCCCC",
opacity: 0,
ok: function () {
if (typeof callback == 'function') {
var iframewindow = this.iframe.contentWindow;
var files = iframewindow.get_selected_files();
var img_url = 'https://'+document.domain+'/'+files[0].url
vm.sendImg(img_url)
// console.log(img_url)
if (files && files.length > 0) {
callback.apply(this, [this, files, extra_params]);
} else {
return false;
}
}
},
cancel: true
});
});
},
// 消息列表切换
tabs:function(user_id,index){
vm.tab = index;
// console.log(user_id)
vm.senderUserId = user_id
var conversationType = RongIMLib.ConversationType.PRIVATE; //单聊,其他会话选择相应的消息类型即可。
var targetId = user_id; // 想获取自己和谁的历史消息，targetId 赋值为对方的 Id。
var timestrap = Date.parse(new Date()); // 默认传 null，若从头开始获取历史消息，请赋值为 0 ,timestrap = 0;
var count = 20; // 每次获取的历史消息条数，范围 0-20 条，可以多次获取。
RongIMLib.RongIMClient.getInstance().getHistoryMessages(conversationType, targetId, timestrap, count, {
onSuccess: function(history, hasMsg) {
// console.log(history)
vm.message_list = [];
for(var j=0;j<history.length;j++){
let obj = {};
let date = new Date(history[j].sentTime);
M = date.getMonth() + 1 + '-';
d = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
date = M+d+h+m+s
obj.senderUserId = history[j].senderUserId
obj.sentTime = date
if(history[j].messageType == 'TextMessage'){
obj.content = RongIMLib.RongIMEmoji.symbolToEmoji(history[j].content.content);
obj.messageType = 'TextMessage'
}else if(history[j].messageType == 'ImageMessage'){
obj.content = history[j].content.imageUri
obj.messageType = 'ImageMessage'
}
// console.log(history[j].content.content);
// console.log(obj.content)
vm.message_list.push(obj);
}
// console.log(vm.message_list)
},
onError: function(error) {
console.log("GetHistoryMessages,errorcode:" + error);
}
});
},
sendImg:function(img_url){
console.log(img_url)
var base64Str = "base64 格式缩略图";
var imageUri = img_url; // 上传到自己服务器的 URL。
var msg = new RongIMLib.ImageMessage({content:base64Str,imageUri:imageUri});
var conversationtype = RongIMLib.ConversationType.PRIVATE; // 单聊,其他会话选择相应的消息类型即可。
var targetId = vm.senderUserId;
RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
onSuccess: function (message) {
// console.log(message)
//message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
let date = new Date(Date.parse(new Date()));
M = date.getMonth() + 1 + '-';
d = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
date = M+d+h+m+s
var obj = {}
obj.content = message.content.imageUri;
obj.sentTime = date;
obj.senderUserId = vm.my_avatar.id;
obj.messageType = 'ImageMessage'
vm.message_list.push(obj);
vm.content = '';
},
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);
}
});
},
// 获取消息列表
send:function(){
var msg = new RongIMLib.TextMessage({content:vm.content,extra:"附加信息"});
// console.log(vm.senderUserId);
// console.log(vm.content);
var conversationtype = RongIMLib.ConversationType.PRIVATE; // 单聊,其他会话选择相应的消息类型即可。
var targetId = vm.senderUserId; // 目标 Id
RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
onSuccess: function (message) {
//message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
let date = new Date(Date.parse(new Date()));
M = date.getMonth() + 1 + '-';
d = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
date = M+d+h+m+s
var obj = {}
obj.content = message.content.content;
obj.sentTime = date;
obj.senderUserId = vm.my_avatar.id;
obj.messageType = 'TextMessage'
vm.message_list.push(obj);
vm.content = '';
},
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);
}
});
},
show: function (ev) {
var msg = new RongIMLib.TextMessage({content:vm.content,extra:"附加信息"});
// console.log(vm.senderUserId);
// console.log(vm.content)
var conversationtype = RongIMLib.ConversationType.PRIVATE; // 单聊,其他会话选择相应的消息类型即可。
var targetId = vm.senderUserId; // 目标 Id
if(ev.keyCode==13){
// alert('你按了回车键！')
RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
onSuccess: function (message) {
//message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
let date = new Date(Date.parse(new Date()));
M = date.getMonth() + 1 + '-';
d = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
date = M+d+h+m+s
var obj = {}
obj.content = message.content.content;
obj.sentTime = date;
obj.senderUserId = vm.my_avatar.id;
obj.messageType = 'TextMessage'
vm.message_list.push(obj);
vm.content = '';
},
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>
<script type="text/javascript">
$(function(){
// 设置连接监听状态 （ 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:
// console.log(message)
var date = new Date(Date.parse(new Date()));
M = date.getMonth() + 1 + ':';
d = date.getDate() + ':';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
// console.log(h+m+s);
date = M+d+h+m+s
var obj = {}
obj.content = RongIMLib.RongIMEmoji.symbolToEmoji(message.content.content);
obj.sentTime = date;
obj.senderUserId = message.senderUserId
obj.messageType = 'TextMessage'
vm.message_list.push(obj);
// message.content.content => 消息内容
break;
case RongIMClient.MessageType.VoiceMessage:
// 对声音进行预加载
// message.content.content 格式为 AMR 格式的 base64 码
break;
case RongIMClient.MessageType.ImageMessage:
var date = new Date(Date.parse(new Date()));
M = date.getMonth() + 1 + '-';
d = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
// console.log(h+m+s);
date = M+d+h+m+s
var obj = {}
obj.content = message.content.imageUri;
obj.sentTime = date;
obj.senderUserId = message.senderUserId
obj.messageType = 'ImageMessage'
vm.message_list.push(obj);
// message.content.content => 图片缩略图 base64。
// message.content.imageUri => 原图 URL。
break;
case RongIMClient.MessageType.DiscussionNotificationMessage:
// message.content.extension => 讨论组中的人员。
break;
case RongIMClient.MessageType.LocationMessage:
// message.content.latiude => 纬度。
// message.content.longitude => 经度。
// message.content.content => 位置图片 base64。
break;
case RongIMClient.MessageType.RichContentMessage:
// message.content.content => 文本消息内容。
// message.content.imageUri => 图片 base64。
// message.content.url => 原图 URL。
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...
}
}
});
$.ajax({
type:'GET',
url:"{:url('app/Others/get_my_avatar')}",
data:{
},
success:function(ret){
var res = JSON.parse(ret);
// console.log(ret)
vm.my_avatar = res;
}
});
// ***** 连接Rongyun必须在执行 RongIMLib.RongIMClient.init(appkey); 之后，并且所有除监听以外的方法都必须在 connect成功之后 再调用。 ****
//从服务器请求 appkey 和 token
//执行 RongIMLib.RongIMClient.init(appkey);
$.ajax({
type:'POST',
url:"{:url('app/Others/get_token')}",
data:{
},
success:function(ret){
var obj = JSON.parse(ret);
var token = obj.token;
var userIdList = [];
RongIMLib.RongIMClient.init(obj.appkey);
//连接服务器
RongIMClient.connect(token, {
onSuccess: function(userId) {
//获取会话列表
RongIMClient.getInstance().getConversationList({
onSuccess: function(list) {
// list => 会话列表集合。
// console.log(list[0].latestMessage.content.content);
vm.current_message_list =list
var conversationType = RongIMLib.ConversationType.PRIVATE; //单聊,其他会话选择相应的消息类型即可。
var targetId = list[0].targetId; // 想获取自己和谁的历史消息，targetId 赋值为对方的 Id。
var timestrap = null; // 默认传 null，若从头开始获取历史消息，请赋值为 0 ,timestrap = 0;
var count = 20; // 每次获取的历史消息条数，范围 0-20 条，可以多次获取。
RongIMLib.RongIMClient.getInstance().getHistoryMessages(conversationType, targetId, timestrap, count, {
onSuccess: function(history, hasMsg) {
// console.log(history)
for(var j=0;j<history.length;j++){
let obj = {};
let date = new Date(history[j].sentTime);
M = date.getMonth() + 1 + '-';
d = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
date = M+d+h+m+s
obj.senderUserId = history[j].senderUserId
obj.sentTime = date
if(history[j].messageType == 'TextMessage'){
obj.content = RongIMLib.RongIMEmoji.symbolToEmoji(history[j].content.content);
obj.messageType = 'TextMessage'
}else if(history[j].messageType == 'ImageMessage'){
obj.content = history[j].content.imageUri
obj.messageType = 'ImageMessage'
}
vm.message_list.push(obj);
}
},
onError: function(error) {
console.log("GetHistoryMessages,errorcode:" + error);
}
});
for(var i=0;i<list.length;i++){
var targetId = list[i].targetId; // 想获取自己和谁的历史消息，targetId 赋值为对方的 Id。
userIdList.push(targetId)
}
$.ajax({
type:'POST',
url:"{:url('app/Others/get_user_avatar_list')}",
data:{
userIdList:userIdList
},
success:function(ret){
var res = JSON.parse(ret);
vm.tabs_list=res;
vm.default_avatar = res[0].avatar;
vm.senderUserId = res[0].user_id;
}
});
},
onError: function(error) {
// do something...
}
},null);
},
onTokenIncorrect: function() {
console.log('token无效');
},
onError:function(errorCode){
var info = '';
switch (errorCode) {
case RongIMLib.ErrorCode.TIMEOUT:
info = '超时';
break;
case RongIMLib.ConnectionState.UNACCEPTABLE_PAROTOCOL_VERSION:
info = '不可接受的协议版本';
break;
case RongIMLib.ConnectionState.IDENTIFIER_REJECTED:
info = 'appkey不正确';
break;
case RongIMLib.ConnectionState.SERVER_UNAVAILABLE:
info = '服务器不可用';
break;
}
console.log(errorCode);
}
});
//Emoji 初始化
RongIMLib.RongIMEmoji.init();
//获取 Emoji 列表
var list = RongIMLib.RongIMEmoji.list;
// console.log(list);
},
error:function(v){
console.log(JSON.stringify(v));
}
});
});
</script>
</body>
</html>
3926
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
