/*
@Name: layui WebIM 1.0.0
@Author:贤心
@Date: 2014-04-25
@Blog: http://sentsin.com
*/
$(document).ready(function(){
alert(!imClose);
if(!imClose)
return;
var config = {
msgurl: url+'/iim/mailBox/list',
chatlogurl: url+'/iim/chatHistory?userid1='+currentId+"&userid2=",
aniTime: 200,
right: -232,
api: {
friend: url+'/iim/contact/friend', //好友列表接口
group: url+'/iim/contact/group', //群组列表接口
chatlog: url+'/iim/contact/chatLog', //聊天记录接口
groups: url+'/iim/contact/groups', //群组成员接口
sendurl: '' //发送消息接口
},
user: { //当前用户信息
id:currentId,
name: currentName,
face: currentFace
},
//自动回复内置文案,也可动态读取数据库配置
autoReplay: [
'您好,我现在有事不在,一会再和您联系。',
'你没发错吧?',
'洗澡中,请勿打扰,偷窥请购票,个体四十,团体八折,订票电话:一般人我不告诉他!',
'你好,我是主人的美女秘书,有什么事就跟我说吧,等他回来我会转告他的。',
'我正在拉磨,没法招呼您,因为我们家毛驴去动物保护协会把我告了,说我剥夺它休产假的权利。',
'<(@ ̄︶ ̄@)>',
'你要和我说话?你真的要和我说话?你确定自己想说吗?你一定非说不可吗?那你说吧,这是自动回复。',
'主人正在开机自检,键盘鼠标看好机会出去凉快去了,我是他的电冰箱,我打字比较慢,你慢慢说,别急……',
'(*^__^*) 嘻嘻,是贤心吗?'
],
chating: {},
hosts: (function(){
var dk = location.href.match(/\:\d+/);
dk = dk ? dk[0] : '';
return 'http://' + document.domain + dk + '/';
})(),
json: function(url, data, callback, error){
return $.ajax({
type: 'POST',
url: url,
data: data,
dataType: 'json',
success: callback,
error: error
});
},
stopMP: function(e){
e ? e.stopPropagation() : e.cancelBubble = true;
}
}, dom = [$(window), $(document), $('html'), $('body')], xxim = {};
//主界面tab
xxim.tabs = function(index){
var node = xxim.node;
node.tabs.eq(index).addClass('xxim_tabnow').siblings().removeClass('xxim_tabnow');
node.list.eq(index).show().siblings('.xxim_list').hide();
if(node.list.eq(index).find('li').length === 0){
xxim.getDates(index);
}
};
//节点
xxim.renode = function(){
var node = xxim.node = {
tabs: $('#xxim_tabs>span'),
list: $('.xxim_list'),
online: $('.xxim_online'),
setonline: $('.xxim_setonline'),
onlinetex: $('#xxim_onlinetex'),
xximon: $('#xxim_on'),
layimFooter: $('#xxim_bottom'),
xximHide: $('#xxim_hide'),
xximSearch: $('#xxim_searchkey'),
searchMian: $('#xxim_searchmain'),
closeSearch: $('#xxim_closesearch'),
layimMin: $('#layim_min')
};
};
//主界面缩放
xxim.expend = function(){
var node = xxim.node;
if(xxim.layimNode.attr('state') !== '1'){
xxim.layimNode.stop().animate({right: config.right}, config.aniTime, function(){
node.xximon.addClass('xxim_off');
try{
localStorage.layimState = 1;
}catch(e){}
xxim.layimNode.attr({state: 1});
node.layimFooter.addClass('xxim_expend').stop().animate({marginLeft: config.right}, config.aniTime/2);
node.xximHide.addClass('xxim_show');
});
} else {
xxim.layimNode.stop().animate({right: 1}, config.aniTime, function(){
node.xximon.removeClass('xxim_off');
try{
localStorage.layimState = 2;
}catch(e){}
xxim.layimNode.removeAttr('state');
node.layimFooter.removeClass('xxim_expend');
node.xximHide.removeClass('xxim_show');
});
node.layimFooter.stop().animate({marginLeft: 0}, config.aniTime);
}
};
//初始化窗口格局
xxim.layinit = function(){
var node = xxim.node;
//主界面
try{
/*
if(!localStorage.layimState){
config.aniTime = 0;
localStorage.layimState = 1;
}
*/
if(localStorage.layimState === '1'){
xxim.layimNode.attr({state: 1}).css({right: config.right});
node.xximon.addClass('xxim_off');
node.layimFooter.addClass('xxim_expend').css({marginLeft: config.right});
node.xximHide.addClass('xxim_show');
}
}catch(e){
//layIM.msg(e.message, 5, -1);
}
};
//聊天窗口
xxim.popchat = function(param){
var node = xxim.node, log = {};
log.success = function(layero){
layIM.setMove();
xxim.chatbox = layero.find('#layim_chatbox');
log.chatlist = xxim.chatbox.find('.layim_chatmore>ul');
log.chatlist.html('
'+ param.name +'×')
xxim.tabchat(param, xxim.chatbox);
//最小化聊天窗
xxim.chatbox.find('.layer_setmin').on('click', function(){
var indexs = layero.attr('times');
layero.hide();
node.layimMin.text(xxim.nowchat.name).show();
});
//关闭窗口
xxim.chatbox.find('.layim_close').on('click', function(){
var indexs = layero.attr('times');
layIM.close(indexs);
xxim.chatbox = null;
config.chating = {};
config.chatings = 0;
});
//关闭某个聊天
log.chatlist.on('mouseenter', 'li', function(){
$(this).find('em').show();
}).on('mouseleave', 'li', function(){
$(this).find('em').hide();
});
log.chatlist.on('click', 'li em', function(e){
var parents = $(this).parent(), dataType = parents.attr('type');
var dataId = parents.attr('data-id'), index = parents.index();
var chatlist = log.chatlist.find('li'), indexs;
config.stopMP(e);
delete config.chating[dataType + dataId];
config.chatings--;
parents.remove();
$('#layim_area'+ dataType + dataId).remove();
if(dataType === 'group'){
$('#layim_group'+ dataType + dataId).remove();
}
if(parents.hasClass('layim_chatnow')){
if(index === config.chatings){
indexs = index - 1;
} else {
indexs = index + 1;
}
xxim.tabchat(config.chating[chatlist.eq(indexs).attr('type') + chatlist.eq(indexs).attr('data-id')]);
}
if(log.chatlist.find('li').length === 1){
log.chatlist.parent().hide();
}
});
//聊天选项卡------------ 切换聊天人员
log.chatlist.on('click', 'li', function(){
var othis = $(this), dataType = othis.attr('type'), dataId = othis.attr('data-id');
var layimli = document.getElementById("layim_user"+dataType + dataId);
hightLight.stopTwinkle(layimli);
xxim.tabchat(config.chating[dataType + dataId]);
});
//发送热键切换
log.sendType = $('#layim_sendtype'), log.sendTypes = log.sendType.find('span');
$('#layim_enter').on('click', function(e){
config.stopMP(e);
log.sendType.show();
});
log.sendTypes.on('click', function(){
log.sendTypes.find('i').text('')
$(this).find('i').text('√');
});
xxim.transmit();
};
log.html = ''
+'
'
+''
+'
'
+' '+ param.name +''
+' '
+' —'
+' ×'
+' '
+'
'
+'
'
+'
'
+'
'
+'
'
+'
'
+'
'
+'
'
+'
发送
'
+'
'
+' √按Enter键发送'
+' 按Ctrl+Enter键发送'
+'
'
+'
'
+'
'
+'
';
if(config.chatings < 1){
$.layIM({
type: 1,
border: [0],
title: false,
shade: [0],
area: ['620px', '493px'],
move: '.layim_chatbox .layim_move',
moveType: 1,
closeBtn: false,
offset: [(($(window).height() - 493)/2)+'px', ''],
page: {
html: log.html
}, success: function(layero){
log.success(layero);
}
})
} else {
log.chatmore = xxim.chatbox.find('#layim_chatmore');
log.chatarea = xxim.chatbox.find('#layim_chatarea');
log.chatmore.show();
log.chatmore.find('ul>li').removeClass('layim_chatnow');
log.chatmore.find('ul').append(''+ param.name +'×');
log.chatarea.find('.layim_chatview').removeClass('layim_chatthis');
log.chatarea.append('');
xxim.tabchat(param);
}
//群组
log.chatgroup = xxim.chatbox.find('#layim_groups');
if(param.type === 'group'){
log.chatgroup.find('ul').removeClass('layim_groupthis');
log.chatgroup.append('');
xxim.getGroups(param);
}
//点击群员切换聊天窗
log.chatgroup.on('click', 'ul>li', function(){
xxim.popchatbox($(this));
});
};
//定位到某个聊天队列
xxim.tabchat = function(param){
var node = xxim.node, log = {}, keys = param.type + param.id;
xxim.nowchat = param;
xxim.chatbox.find('#layim_user'+ keys).addClass('layim_chatnow').siblings().removeClass('layim_chatnow');
xxim.chatbox.find('#layim_area'+ keys).addClass('layim_chatthis').siblings().removeClass('layim_chatthis');
xxim.chatbox.find('#layim_group'+ keys).addClass('layim_groupthis').siblings().removeClass('layim_groupthis');
xxim.chatbox.find('.layim_face>img').attr('src', param.face);
xxim.chatbox.find('.layim_face, .layim_names').attr('onclick','top.openTab("'+ param.href +'","通讯录", false)');
xxim.chatbox.find('.layim_names').text(param.name);
//xxim.chatbox.find('.layim_seechatlog').attr('href', config.chatlogurl + param.id);
xxim.chatbox.find('.layim_seechatlog').attr('onclick', "popchatLog('"+config.chatlogurl+param.id+"')");
log.groups = xxim.chatbox.find('.layim_groups');
if(param.type === 'group'){
log.groups.show();
} else {
log.groups.hide();
}
$('#layim_write').focus();
};
//弹出聊天窗
xxim.popchatbox = function(othis){
var node = xxim.node, dataId = othis.attr('data-id'), param = {
id: dataId, //用户ID
type: othis.attr('type'),
name: othis.find('.xxim_onename').text(), //用户名
face: othis.find('.xxim_oneface').attr('src'), //用户头像
href: url+'/iim/contact/index?name=' + encodeURIComponent(othis.find('.xxim_onename').text().substring(0,othis.find('.xxim_onename').text().length-4)) //用户主页
}, key = param.type + dataId;
if(!config.chating[key]){
xxim.popchat(param);
config.chatings++;
} else {
xxim.tabchat(param);
}
config.chating[key] = param;
var chatbox = $('#layim_chatbox');
if(chatbox[0]){
node.layimMin.hide();
chatbox.parents('.xubox_layer').show();
}
};
//请求群员
xxim.getGroups = function(param){
var keys = param.type + param.id, str = '',
groupss = xxim.chatbox.find('#layim_group'+ keys);
groupss.addClass('loading');
config.json(config.api.groups, {}, function(datas){
if(datas.status === 1){
var ii = 0, lens = datas.data.length;
if(lens > 0){
for(; ii < lens; ii++){
str += '
'+ datas.data[ii].name +'';
}
} else {
str = '没有群员';
}
} else {
str = ''+ datas.msg +'';
}
groupss.removeClass('loading');
groupss.html(str);
}, function(){
groupss.removeClass('loading');
groupss.html('请求异常');
});
};
//发送函数;
//var node;
var log = {
node:'',
// node : xxim.node,
// node.sendbtn : $('#layim_sendbtn'),
// node.imwrite = $('#layim_write'),
//发送
send:function(){
var data = {
content: log.node.imwrite.val(),
id: xxim.nowchat.id,
sign_key: '', //密匙
_: +new Date
};
//当前窗口句柄
var keys = xxim.nowchat.type + xxim.nowchat.id;
var layimli = document.getElementById("layim_user"+keys);
hightLight.stopTwinkle(layimli);
if(data.content.replace(/\s/g, '') === ''){
layIM.tips('说点啥呗!', '#layim_write', 2);
this.node.imwrite.focus();
} else {
log.imarea = xxim.chatbox.find('#layim_area'+ keys);//定位聊天窗口
log.imarea.append(log.html({//我发送的消息
time: xxim.time(),
name: config.user.name,
face: config.user.face,
content: data.content
}, 'me'));
xxim.socket.send(data.content);
log.node.imwrite.val('').focus();
log.imarea.scrollTop(log.imarea[0].scrollHeight);
// setTimeout(function(){
// log.imarea.append(log.html({//对面的回复
// time: '2014-04-26 0:38',
// name: xxim.nowchat.name,
// face: xxim.nowchat.face,
// content: config.autoReplay[(Math.random()*config.autoReplay.length) | 0]
// }));
// log.imarea.scrollTop(log.imarea[0].scrollHeight);
// }, 500);
/*
that.json(config.api.sendurl, data, function(datas){
});
*/
}
},
//聊天模版
html : function(param, type){
return ''
+''
+ function(){
if(type === 'me'){
return '
'+ param.time +''
+'
'+ param.name +''
+'

';
} else {
return '

'
+'
'+ param.name +''
+'
'+ param.time +'';
}
}()
+'
'
+''+ param.content +'
'
+'';
}
}
//消息传输
xxim.transmit = function(){
var node = xxim.node;
node.sendbtn = $('#layim_sendbtn');
node.imwrite = $('#layim_write');
log.node = node;
node.sendbtn.on('click', log.send);
node.imwrite.keyup(function(e){
if(e.keyCode === 13){
log.send();
}
});
};
//得到当前时间字符串,格式为:YYYY-MM-DD HH:MM:SS
xxim.time=function()
{
var now = new Date();
var year = now.getFullYear(); //年
var month = now.getMonth() + 1; //月
var day = now.getDate(); //日
var hh = now.getHours(); //时
var mm = now.getMinutes(); //分
var ss=now.getSeconds(); //秒
var clock = year + "-";
if(month < 10) clock += "0";
clock += month + "-";
if(day < 10) clock += "0";
clock += day + " ";
if(hh < 10) clock += "0";
clock += hh + ":";
if (mm < 10) clock += '0';
clock += mm+ ":";
if (ss < 10) clock += '0';
clock += ss;
return(clock);
}
//更新在线用户信息
xxim.updateOnlineStatus=function(arra)//更新在线用户信息
{
$("ul.xxim_chatlist li").each(function(){//状态还原
var span = $(this).find("span");
var text=span.text();
var dataId = $(this).attr("data-id");
if(text.indexOf("(")>=0){
text = text.substring(0,text.indexOf("("));
}
if((','+arra+",").indexOf(','+dataId+',')>=0){
span.html(text +"(在线)");
var $one_li = $(this).parent().find("li:eq(0)"); // 获取节点中第一个- 元素节点
$(this).insertBefore($one_li); //移动节点
}else{
span.html(text+"(离线)");
}
});
}
//websocket 发送消息
xxim.socket = {
webSocket:"",
init:function(){
if (!window.WebSocket){
alert("你的浏览器不支持websocket,请升级到IE10以上浏览器,或者使用谷歌、火狐、360浏览器。");
}
webSocket = new WebSocket(wsServer);
webSocket.onerror = function(event) {
alert("websockt连接发生错误,请刷新页面重试!")
};
webSocket.onopen = function(event) {
// webSocket.send("_online_user_"+currentId);
};
webSocket.onmessage = function(event) {
var data = event.data;
if(data.indexOf("_online_all_status_")>=0){
var dd = data.substring("_online_all_status_".length);
xxim.updateOnlineStatus(eval('('+dd+')').body.data);
}
if(data.indexOf('_sys_')>=0){//系统通知
//当前窗口句柄
var keys = xxim.nowchat.type + xxim.nowchat.id;
var imarea = xxim.chatbox.find('#layim_area'+ keys);//定位聊天窗口
imarea.append(log.html({//对面的回复
time: xxim.time(),
name: "系统",
face: 'static/layer-v2.0/layim/notify.png',
content: "系统通知:"+data.substring("_sys_".length)
}));
imarea.scrollTop(imarea[0].scrollHeight);
return;
}
if(data.indexOf('_msg_')>=0){//聊天信息
var arra = data.split("_msg_");
var li = $("ul.xxim_chatlist li[data-id="+arra[0]+"]:first");
var type = li.attr("type");
var face = li.find("img").attr("src");
var name = li.find("span").text();
var keys = type + arra[0];
if(xxim.chatbox == undefined || document.getElementById("layim_user"+keys) == undefined){// 聊天窗口没有弹出
xxim.popchatbox( $("ul.xxim_chatlist li[data-id="+arra[0]+"]:first"));//弹出聊天窗口
}
//只有窗口弹出时才能获得
var imarea = xxim.chatbox.find('#layim_area'+ keys);//定位聊天窗口
var layimli = document.getElementById("layim_user"+keys); //获取聊天窗口句柄
hightLight.highLight(layimli);
var time;
if(arra.length==4){//读取的聊天记录的时间
time = arra[3];
}else{
time = xxim.time();//当前时间
}
imarea.append(log.html({//对面的回复
time: time,
name: name,
face: face,
content: arra[2]
}));
imarea.scrollTop(imarea[0].scrollHeight);
}
};
},
send:function(data){
this.waitForConnection(function () {//连接建立才能发送消息
webSocket.send(currentId+"_msg_"+xxim.nowchat.id+"_msg_"+data);
}, 500);
}
,
sendData:function(data){
this.waitForConnection(function () {
webSocket.send(data);
}, 500);
},
waitForConnection : function (callback, interval) {//判断连接是否建立
if (webSocket.readyState === 1) {
callback();
} else {
var that = this;
setTimeout(function () {
that.waitForConnection(callback, interval);
}, interval);
}
}
}
//消息来时高亮显示
var hightLight={
addClass:function(elem,classString){
if(typeof(elem)=="string")
var obj = document.getElementById(elem);
else if(typeof(elem)=="object")
var obj = elem;
obj.className = obj.className + " "+classString;
},
removeClass:function(elem,classString){
if(typeof(elem)=="string")
var obj = document.getElementById(elem);
else if(typeof(elem)=="object")
var obj = elem;
obj.className = obj.className.replace(classString,"")
},
hasClass:function(elem,classString){
if (typeof(elem)=="string"){
var obj = document.getElementById(elem);
}else if(typeof(elem)=="object"){
var obj = elem;
}
if (obj.className.indexOf(classString)!=-1){
return true;
}else{
return false;
}
} ,
twinkle:function(objBox){
this.hasClass(objBox,"highLight")?this.removeClass(objBox,"highLight"):this.addClass(objBox,"highLight");
},
highLight:function(obj){
if (obj.highlightHandel!=null)
return;
obj.highlightHandel = setInterval(function(){hightLight.twinkle(obj)},250);
},
stopTwinkle:function (obj){
clearInterval(obj.highlightHandel);
this.removeClass(obj,"highLight");
obj.highlightHandel = undefined;
}
}
//事件
xxim.event = function(){
var node = xxim.node;
//主界面tab
node.tabs.eq(0).addClass('xxim_tabnow');
node.tabs.on('click', function(){
var othis = $(this), index = othis.index();
xxim.tabs(index);
});
//列表展收
node.list.on('click', 'h5', function(){
var othis = $(this), chat = othis.siblings('.xxim_chatlist'), parentss = othis.find("i");
if(parentss.hasClass('fa-caret-down')){
chat.hide();
parentss.attr('class','fa fa-caret-right');
} else {
chat.show();
parentss.attr('class','fa fa-caret-down');
}
});
//设置在线隐身
node.online.on('click', function(e){
config.stopMP(e);
node.setonline.show();
});
node.setonline.find('span').on('click', function(e){
var index = $(this).index();
config.stopMP(e);
if(index === 0){
node.onlinetex.html('在线');
node.online.removeClass('xxim_offline');
xxim.socket.sendData("_online_user_"+currentId);//用户上线
} else if(index === 1) {
node.onlinetex.html('隐身');
node.online.addClass('xxim_offline');
xxim.socket.sendData("_leave_user_"+currentId);//用户下线
}
node.setonline.hide();
});
node.xximon.on('click', xxim.expend);
node.xximHide.on('click', xxim.expend);
//搜索
node.xximSearch.keyup(function(){
var val = $(this).val().replace(/\s/g, '');
if(val !== ''){
node.searchMian.show();
node.closeSearch.show();
// 此处的搜索ajax参考xxim.getDates
xxim.searchDates(val);
// node.list.eq(3).html('
- 没有符合条件的结果
');
} else {
node.searchMian.hide();
node.closeSearch.hide();
}
});
node.closeSearch.on('click', function(){
$(this).hide();
node.searchMian.hide();
node.xximSearch.val('').focus();
});
//弹出聊天窗
config.chatings = 0;
node.list.on('click', '.xxim_childnode', function(){
var othis = $(this);
xxim.popchatbox(othis);
});
//点击最小化栏
node.layimMin.on('click', function(){
$(this).hide();
$('#layim_chatbox').parents('.xubox_layer').show();
});
//document事件
dom[1].on('click', function(){
node.setonline.hide();
$('#layim_sendtype').hide();
});
};
//检索人员
xxim.searchDates = function(name){
var node = xxim.node, myf = node.list.eq(3);
myf.addClass('loading');
config.json(config.api.friend, {}, function(datas){
if(datas.status === 1){
var i = 0, myflen = datas.data.length, str = '', item;
var num=0;
if(myflen > 1){
str += '- '
+'
'+ '联系人' +'
'
+'';
for(; i < myflen; i++){
item = datas.data[i].item;
for(var j = 0; j < item.length; j++){
if(item[j].name.indexOf(name)>=0){
str += '
'+ item[j].name +' ';
num++;
}
}
}
str += '
';
if(num > 0){
myf.html(str);
}else{
myf.html('- 没有任何数据
');
}
} else {
myf.html('- 没有任何数据
');
}
myf.removeClass('loading');
} else {
myf.html('- '+ datas.msg +'
');
}
}, function(){
myf.html('- 请求失败
');
myf.removeClass('loading');
});
};
//请求列表数据
xxim.getDates = function(index){
var api = [config.api.friend, config.api.group, config.api.chatlog],
node = xxim.node, myf = node.list.eq(index);
myf.addClass('loading');
config.json(api[index], {}, function(datas){
if(datas.status === 1){
var i = 0, myflen = datas.data.length, str = '', item;
if(myflen > 1){
if(index !== 2){
for(; i < myflen; i++){
str += '- '
+'
'+ datas.data[i].name +'('+ datas.data[i].nums +')
'
+'';
item = datas.data[i].item;
for(var j = 0; j < item.length; j++){
str += '
'+ item[j].name +' ';
}
str += '
';
}
} else {
str += '- '
+'
';
for(; i < myflen; i++){
str += '
'+ datas.data[i].name +''+ datas.data[i].time +' ';
}
str += '
';
}
myf.html(str);
} else {
myf.html('- 没有任何数据
');
}
myf.removeClass('loading');
xxim.socket.sendData("_online_user_"+currentId);//用户上线; //手动调用一次更新用户在线信息。
} else {
myf.html('- '+ datas.msg +'
');
}
}, function(){
myf.html('- 请求失败
');
myf.removeClass('loading');
});
};
//渲染骨架
xxim.view = (function(){
var xximNode = xxim.layimNode = $(''
+'
'
+'
×
'
+'
'
+'
'
+'
'
+'
'
+'
'
+'
'
+'
'
+'- '
+'在线'
+'
'
+'在线'
+'隐身'
+'
'
+' '
+' '
+'- '
+''
+'
'
+'
'
+' '
+' '
+''
+''
+'
'
+'
');
dom[3].append(xximNode);
xxim.socket.init();//启动websocket
xxim.renode();
xxim.getDates(0);
xxim.event();
xxim.layinit();
}());
});
//弹出聊天记录窗口
function popchatLog(url){
//iframe窗
top.layer.open({
type: 2,
title: '聊天记录',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['1100px', '650px'],
content: url
});
}