yaclty/kefu
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

添加消息提醒

Browse Source
This commit is contained in:
邰广银 2017-10-31 10:25:04 +08:00
parent a1845b56c5
commit 70e82ee93a
3 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/server/mine_fill_blue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

32
public/js/server/index.js
View File

@ -30,7 +30,7 @@ layui.use(['layer', 'form', 'jquery'], function () {
} }
function insert_section(uid) { function insert_section(uid) {
var html = '<section class="user-section" id="section-'+ uid +'" style="display: none;"></section>'; var html = '<section class="user-section" style="display:none;" id="section-'+ uid +'"></section>';
$(".message-container").append(html); $(".message-container").append(html);
} }
@ -66,9 +66,10 @@ layui.use(['layer', 'form', 'jquery'], function () {
function insert_user_html(id,name) { function insert_user_html(id,name) {
var html = '<div class="user-info layui-row" id="' + id + '">\n' + var html = '<div class="user-info layui-row" id="' + id + '">\n' +
' <div class="layui-col-xs3 user-avatar">\n' + ' <div class="layui-col-xs3 user-avatar">\n' +
' <img src="/images/server/mine_fill.png">\n' + ' <img src="/images/server/mine_fill_blue.png">\n' +
' </div>\n' + ' </div>\n' +
' <div class="layui-col-xs9 user-name">' + name + '-' + id + '</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>'; ' </div>';
$('.chat-user').append(html); $('.chat-user').append(html);
} }
@ -85,6 +86,15 @@ layui.use(['layer', 'form', 'jquery'], function () {
} }
} }
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 getUsers() { function getUsers() {
$.get('/users',function (data) { $.get('/users',function (data) {
if(data.code == 200){ if(data.code == 200){
@ -93,9 +103,10 @@ layui.use(['layer', 'form', 'jquery'], function () {
var data = data.data; var data = data.data;
data.forEach(function (user) { data.forEach(function (user) {
insert_user_html(user.uid,user.name); insert_user_html(user.uid,user.name + '#'+ (uuids.length + 1));
//创建聊天section //创建聊天section
insert_section(user.uid); insert_section(user.uid);
uuids.push(user.uid);
}); });
if(data.length > 0 && !currentUUID){ if(data.length > 0 && !currentUUID){
currentUUID = data[0].uid; currentUUID = data[0].uid;
@ -104,6 +115,7 @@ layui.use(['layer', 'form', 'jquery'], function () {
$(".user-info").css("background","#ffffff"); $(".user-info").css("background","#ffffff");
$("#"+currentUUID).css("background","#f2f3f5"); $("#"+currentUUID).css("background","#f2f3f5");
$(".user-section").hide(); $(".user-section").hide();
msg_sender_status(true);
$("#section-"+currentUUID).show(); $("#section-"+currentUUID).show();
} }
}); });
@ -141,15 +153,16 @@ layui.use(['layer', 'form', 'jquery'], function () {
socket.on('message', function(msg){ socket.on('message', function(msg){
insert_client_html(msg.uid,msg.content); insert_client_html(msg.uid,msg.content);
scrollToBottom(); scrollToBottom();
msg_notification(msg);
}); });
//后端推送来消息时 //后端推送来消息时
socket.on('update-users', function(msg){ socket.on('update-users', function(msg){
if(msg.type == 'offline'){ if(msg.type == 'offline'){
$("#"+msg.uid).remove(); //arrayRemove(uuids,msg.uid);
arrayRemove(uuids,msg.uid); $(".chat-user #"+msg.uid+" .user-avatar img").attr("src","/images/server/mine_fill.png");
$("#section-" + msg.uid).remove(); //$("#section-" + msg.uid).remove();
$(".chat-user").find("#"+msg.uid).remove(); //$(".chat-user").find("#"+msg.uid).remove();
msg_sender_status(false); msg_sender_status(false);
}else if(msg.type == 'online'){ }else if(msg.type == 'online'){
if(!currentUUID){ if(!currentUUID){
@ -173,6 +186,8 @@ layui.use(['layer', 'form', 'jquery'], function () {
insert_section(msg.uid); insert_section(msg.uid);
} }
} }
$(".chat-user #"+msg.uid+" .user-avatar img").attr("src","/images/server/mine_fill_blue.png");
} }
}); });
@ -191,6 +206,7 @@ layui.use(['layer', 'form', 'jquery'], function () {
$(".user-section").hide(); $(".user-section").hide();
$("#section-"+uid).show(); $("#section-"+uid).show();
msg_sender_status(true); msg_sender_status(true);
$(".chat-user #"+uid+" .msg-tips").hide();
}); });

6
views/server/index.ejs
View File

@ -147,6 +147,11 @@
width: 100px; width: 100px;
} }
.msg-tips{
margin-top: 25px;
display: none;
}
</style> </style>
<div class="layui-fluid"> <div class="layui-fluid">
<div class="friend"> <div class="friend">
@ -164,6 +169,7 @@
<img src="/images/server/tabpage.png"> <img src="/images/server/tabpage.png">
<div class="text">从左侧列表打开对话</div> <div class="text">从左侧列表打开对话</div>
</div> </div>
</div> </div>
<div class="message-sender"> <div class="message-sender">
<div class="sender-editor"> <div class="sender-editor">