363 lines
13 KiB
JavaScript
363 lines
13 KiB
JavaScript
//一般直接写在一个js文件中
|
||
layui.use(['layer', 'form', 'jquery'], function () {
|
||
var layer = layui.layer
|
||
, form = layui.form
|
||
, $ = layui.jquery;
|
||
|
||
var currentUUID = '';
|
||
var uuid = '';
|
||
var socket = io.connect('http://'+document.domain+':9010',{
|
||
"transports":['websocket', 'polling']
|
||
});
|
||
|
||
var uuids = [];
|
||
var online_num = 0;
|
||
|
||
//页面初始化函数
|
||
function init() {
|
||
$(".admin-index").addClass("layui-this");
|
||
|
||
var height = document.body.clientHeight - 292;
|
||
$(".message-container").css("height", height);
|
||
|
||
window.onresize = function(){
|
||
var height = document.body.clientHeight - 292;
|
||
$(".message-container").css("height", height);
|
||
};
|
||
|
||
document.getElementById("msg-send-textarea").onkeydown=function(e){
|
||
if(e.keyCode == 13 && e.ctrlKey){
|
||
// 这里实现换行
|
||
document.getElementById("msg-send-textarea").value += "\n";
|
||
}else if(e.keyCode == 13){
|
||
// 避免回车键换行
|
||
e.preventDefault();
|
||
// 下面写你的发送消息的代码
|
||
msg_send();
|
||
}
|
||
}
|
||
}
|
||
|
||
//聊天窗口自动滚到底
|
||
function scrollToBottom() {
|
||
var div = document.getElementById('message-container');
|
||
div.scrollTop = div.scrollHeight;
|
||
}
|
||
|
||
function insert_section(uid) {
|
||
var html = '<section class="user-section" style="display:none;" id="section-'+ uid +'"></section>';
|
||
$(".message-container").append(html);
|
||
get_message(uid);
|
||
}
|
||
|
||
function insert_agent_html(msg){
|
||
var time = dateFormat();
|
||
if(msg.datetime){
|
||
time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(msg.datetime));
|
||
}
|
||
if(!msg.chat_type){
|
||
msg.chat_type = 'text';
|
||
}
|
||
var html = ' <div class="message-agent">\n' +
|
||
' <div class="message-agent-time-sender message-time-sender">\n' +
|
||
' <span class="message-agent-time">' + time + '</span>\n' +
|
||
' <span class="">我</span>\n' +
|
||
' </div>\n';
|
||
|
||
if(msg.chat_type == "text"){
|
||
html += ' <div class="message-agent-content message-content">\n' +
|
||
' <div>' + msg.content + '</div>\n' +
|
||
' </div>\n' ;
|
||
}else if(msg.chat_type == "image"){
|
||
html += ' <div class="msg-agent-img">' +
|
||
' <a href="'+ msg.image +'"target="_blank">' +
|
||
' <img src="' + msg.image + '" alt="photo">'+
|
||
' </a>' +
|
||
' </div>';
|
||
}
|
||
|
||
html += ' </div>';
|
||
$('#section-'+msg.uid).append(html);
|
||
}
|
||
|
||
|
||
function insert_client_html(msg){
|
||
var time = dateFormat();
|
||
if(msg.datetime){
|
||
time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(msg.datetime));
|
||
}
|
||
if(!msg.chat_type){
|
||
msg.chat_type = 'text';
|
||
}
|
||
var html = '<div class="message-client">\n' +
|
||
' <div class="message-time-sender">\n' +
|
||
' <span class="message-client-time">' + time + '</span>\n' +
|
||
' <span class="">客户</span>\n' +
|
||
' </div>\n' ;
|
||
if(msg.chat_type == "text"){
|
||
html += ' <div class="message-client-content message-content">\n' +
|
||
' <div>' + msg.content + '</div>\n' +
|
||
' </div>\n' ;
|
||
}else if(msg.chat_type == "image"){
|
||
html += ' <div class="msg-client-img">' +
|
||
' <a href="'+ msg.image +'"target="_blank">' +
|
||
' <img src="' + msg.image + '" alt="photo">'+
|
||
' </a>' +
|
||
' </div>';
|
||
}
|
||
|
||
html += ' </div>';
|
||
$('#section-'+msg.uid).append(html);
|
||
}
|
||
|
||
function insert_user_html(id,name) {
|
||
var html = '<div class="user-info layui-row" id="' + id + '">\n' +
|
||
' <div class="layui-col-xs3 user-avatar">\n' +
|
||
' <img src="/images/server/mine_fill_blue.png">\n' +
|
||
' </div>\n' +
|
||
' <div class="layui-col-xs8 user-name">' + name + '-' + id + '</div>\n' +
|
||
' <span class="layui-badge-dot layui-col-xs1 msg-tips"></span>'+
|
||
' </div>';
|
||
$('.chat-user').append(html);
|
||
}
|
||
|
||
function msg_sender_status(status){
|
||
if(status){
|
||
$(".btnMsgSend").removeClass("layui-btn-disabled");
|
||
$("#msg-send-textarea").removeAttr("disabled");
|
||
$(".empty-status").hide();
|
||
}else{
|
||
$(".btnMsgSend").addClass("layui-btn-disabled");
|
||
$("#msg-send-textarea").attr("disabled","disabled");
|
||
$(".empty-status").show();
|
||
}
|
||
}
|
||
|
||
function msg_notification(msg) {
|
||
$(".chat-user #"+msg.uid+" .msg-tips").show();
|
||
if(window.Notification && Notification.permission !== "denied") {
|
||
Notification.requestPermission(function(status) {
|
||
var n = new Notification('您有新的消息', { body: msg.content });
|
||
});
|
||
}
|
||
}
|
||
|
||
function update_online_status() {
|
||
var num = uuids.length;
|
||
if(online_num > num){
|
||
num = online_num;
|
||
}
|
||
$(".friend-head-right").html( online_num + ' / ' + num + ' 人' );
|
||
}
|
||
|
||
//发送消息
|
||
function msg_send() {
|
||
var msg = $("#msg-send-textarea").val();
|
||
if(msg){
|
||
var msg_sender = {
|
||
"type":'private',
|
||
"uid":currentUUID,
|
||
"content":msg,
|
||
"from_uid":uuid,
|
||
"chat_type":'text'
|
||
};
|
||
socket.emit('message', msg_sender);
|
||
insert_agent_html(msg_sender);
|
||
scrollToBottom();
|
||
$("#msg-send-textarea").val('');
|
||
}
|
||
}
|
||
|
||
//获取在线用户
|
||
function get_users() {
|
||
$.get('/users',function (data) {
|
||
if(data.code == 200){
|
||
$('.chat-user').html('');
|
||
|
||
var data = data.data;
|
||
|
||
data.forEach(function (user) {
|
||
insert_user_html(user.uid,user.name + '#'+ (uuids.length + 1));
|
||
//创建聊天section
|
||
insert_section(user.uid);
|
||
uuids.push(user.uid);
|
||
});
|
||
if(data.length > 0 && !currentUUID){
|
||
currentUUID = data[0].uid;
|
||
}
|
||
|
||
$(".user-info").css("background","#ffffff");
|
||
$("#"+currentUUID).css("background","#f2f3f5");
|
||
$(".user-section").hide();
|
||
msg_sender_status(true);
|
||
$("#section-"+currentUUID).show();
|
||
update_online_status();
|
||
}
|
||
});
|
||
}
|
||
|
||
//获取最新的五条数据
|
||
function get_message(uid) {
|
||
$.get('/message?uid='+uid,function (data) {
|
||
if(data.code == 200){
|
||
data.data.reverse().forEach(function (msg) {
|
||
if(msg.from_uid == uid){
|
||
msg.uid = msg.from_uid;
|
||
insert_client_html(msg);
|
||
}else{
|
||
msg.uid = msg.to_uid;
|
||
insert_agent_html(msg);
|
||
}
|
||
|
||
scrollToBottom();
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
$(".btnMsgSend").click(function(){
|
||
msg_send();
|
||
});
|
||
|
||
$(".picture-upload").click(function () {
|
||
var uploader = Qiniu.uploader({
|
||
runtimes: 'html5,flash,html4', // 上传模式，依次退化
|
||
browse_button: 'pickfiles', // 上传选择的点选按钮，必需
|
||
uptoken_url: '/uptoken', // Ajax请求uptoken的Url，强烈建议设置（服务端提供）
|
||
get_new_uptoken: false, // 设置上传文件的时候是否每次都重新获取新的uptoken
|
||
domain: 'http://kefuimg.chinameyer.com/', // bucket域名，下载资源时用到，必需
|
||
container: 'btn-uploader', // 上传区域DOM ID，默认是browser_button的父元素
|
||
max_file_size: '10mb', // 最大文件体积限制
|
||
flash_swf_url: 'path/of/plupload/Moxie.swf', //引入flash，相对路径
|
||
max_retries: 3, // 上传失败最大重试次数
|
||
dragdrop: false, // 开启可拖曳上传
|
||
drop_element: 'btn-uploader', // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
|
||
chunk_size: '4mb', // 分块上传时，每块的体积
|
||
auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
|
||
unique_names: true,
|
||
filters : {
|
||
max_file_size : '10mb',
|
||
prevent_duplicates: true,
|
||
// Specify what files to browse for
|
||
mime_types: [
|
||
{title : "Image files", extensions : "jpg,gif,png,bmp"}, // 限定jpg,gif,png后缀上传
|
||
]
|
||
},
|
||
init: {
|
||
'FilesAdded': function(up, files) {
|
||
plupload.each(files, function(file) {
|
||
// 文件添加进队列后，处理相关的事情
|
||
});
|
||
},
|
||
'BeforeUpload': function(up, file) {
|
||
// 每个文件上传前，处理相关的事情
|
||
},
|
||
'UploadProgress': function(up, file) {
|
||
// 每个文件上传时，处理相关的事情
|
||
},
|
||
'FileUploaded': function(up, file, info) {
|
||
// 查看简单反馈
|
||
var domain = up.getOption('domain');
|
||
var res = JSON.parse(info);
|
||
var sourceLink = domain +"/"+ res.key;
|
||
|
||
var msg_sender = {
|
||
"type":'private',
|
||
"uid":currentUUID,
|
||
"content":'图片消息',
|
||
"from_uid":uuid,
|
||
"chat_type":'image',
|
||
"image":sourceLink
|
||
};
|
||
socket.emit('message', msg_sender);
|
||
insert_agent_html(msg_sender);
|
||
scrollToBottom();
|
||
},
|
||
'Error': function(up, err, errTip) {
|
||
//上传出错时，处理相关的事情
|
||
$.toast("上传失败");
|
||
},
|
||
'UploadComplete': function() {
|
||
//队列文件处理完毕后，处理相关的事情
|
||
}
|
||
}
|
||
});
|
||
|
||
});
|
||
|
||
//连接服务器
|
||
socket.on('connect', function () {
|
||
console.log('连接成功...');
|
||
uuid = 'chat-kefu-admin';
|
||
var ip = $("#keleyivisitorip").html();
|
||
var msg = {
|
||
"uid" : uuid,
|
||
"ip" : ip
|
||
};
|
||
socket.emit('login', msg);
|
||
});
|
||
|
||
//后端推送来消息时
|
||
socket.on('message', function(msg){
|
||
insert_client_html(msg);
|
||
scrollToBottom();
|
||
msg_notification(msg);
|
||
});
|
||
|
||
//后端推送来消息时
|
||
socket.on('update-users', function(msg){
|
||
if(msg.type == 'offline'){
|
||
//arrayRemove(uuids,msg.uid);
|
||
$(".chat-user #"+msg.uid+" .user-avatar img").attr("src","/images/server/mine_fill.png");
|
||
$("#section-" + msg.uid).hide();
|
||
//$(".chat-user").find("#"+msg.uid).remove();
|
||
msg_sender_status(false);
|
||
}else if(msg.type == 'online'){
|
||
if(!currentUUID){
|
||
currentUUID = msg.uid;
|
||
}
|
||
|
||
if(currentUUID == uuid){
|
||
return false;
|
||
}
|
||
|
||
var index = uuids.indexOf(msg.uid);
|
||
if( index == -1){
|
||
uuids.push(msg.uid);
|
||
insert_user_html(msg.uid,msg.name + '#'+ (uuids.length + 1));
|
||
//创建聊天section
|
||
insert_section(msg.uid);
|
||
}else{
|
||
if($(".chat-user").find("#"+msg.uid).length == 0){
|
||
insert_user_html(msg.uid,msg.name + '#'+ (uuids.length + 1));
|
||
//创建聊天section
|
||
insert_section(msg.uid);
|
||
}
|
||
}
|
||
|
||
$(".chat-user #"+msg.uid+" .user-avatar img").attr("src","/images/server/mine_fill_blue.png");
|
||
}
|
||
update_online_status();
|
||
});
|
||
|
||
//更新用户在线数
|
||
socket.on('update_online_count', function(msg){
|
||
online_num = (msg.online_count - 1) >= 0 ? (msg.online_count - 1) : 0;
|
||
update_online_status();
|
||
});
|
||
|
||
//切换用户
|
||
$(document).on('click','.user-info',function(){
|
||
var uid = $(this).attr("id");
|
||
currentUUID = uid;
|
||
$(".user-info").css("background","#ffffff");
|
||
$("#"+uid).css("background","#f2f3f5");
|
||
$(".user-section").hide();
|
||
$("#section-"+uid).show();
|
||
msg_sender_status(true);
|
||
$(".chat-user #"+uid+" .msg-tips").hide();
|
||
});
|
||
|
||
init();
|
||
get_users();
|
||
}); |