350 lines
12 KiB
JavaScript
350 lines
12 KiB
JavaScript
//一般直接写在一个js文件中
|
|
layui.use(['layer', 'form', 'jquery'], function () {
|
|
var layer = layui.layer
|
|
, form = layui.form
|
|
, $ = layui.jquery;
|
|
|
|
var currentUUID = '';
|
|
var uuid = '';
|
|
// 创建socket连接
|
|
var socket = io.connect('http://' + document.domain + ':9010', {
|
|
"transports": ['websocket', 'polling'],
|
|
autoConnect: false
|
|
});
|
|
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.time) {
|
|
time = dateFormat("yyyy-MM-dd hh:mm:ss", new Date(msg.time));
|
|
}
|
|
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.time) {
|
|
time = dateFormat("yyyy-MM-dd hh:mm:ss", new Date(msg.time));
|
|
}
|
|
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();
|
|
});
|
|
|
|
$(".emoji-list li").click(function () {
|
|
var content = $("#msg-send-textarea").val();
|
|
$("#msg-send-textarea").val(content + " " + $(this).html() + " ");
|
|
$(".emoji-list").toggle();
|
|
});
|
|
|
|
$("#emojiBtn").click(function () {
|
|
$(".emoji-list").toggle();
|
|
});
|
|
|
|
//连接服务器
|
|
socket.on('connect', function () {
|
|
console.log('连接成功...');
|
|
uuid = 'chat-admin-' + data.username;
|
|
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();
|
|
});
|
|
|
|
const showLoginView = () => {
|
|
layer.prompt({
|
|
formType: 0,
|
|
title: '请先输入工号进行登录',
|
|
btnAlign: 'c',
|
|
btn: [' 登录 '],
|
|
closeBtn: 0,
|
|
shade :0.7,
|
|
value: ''
|
|
}, function (username, index, elem) {
|
|
if(!username){
|
|
showLoginView();
|
|
return;
|
|
}
|
|
$.post('/admin/login', {username}, (res) => {
|
|
if (res.code != 200) {
|
|
layer.msg(res.message);
|
|
return;
|
|
}
|
|
layer.msg('登录成功');
|
|
layer.closeAll();
|
|
console.log(res);
|
|
location.reload();
|
|
}, 'json').fail(() => {
|
|
layer.msg('登录异常请重试')
|
|
})
|
|
});
|
|
}
|
|
if (!data.username) {
|
|
showLoginView();
|
|
} else {
|
|
socket.connect();
|
|
init();
|
|
get_users();
|
|
}
|
|
}); |