当前位置: 首页 > JS > web聊天系统的消息通知问题

web聊天系统的消息通知问题

最近在写一个基于企业内部使用的web聊天系统。web版的用起来的感觉没有客户端来的方便,但是客户端能有的功能,这个系统也都能做的。系统的通知用到了声音和桌面的弹窗提示。也会有title的闪烁提示。弹窗提醒针对IE这个让人头疼的浏览器还是不行。也没有更好的解决办法。

声音提示和桌面弹窗提示的原理:

声音提示

注意声音提示前提示已经加载了声音文件,有文章写的很多是临时create一个audio对象,然后audio.src,这样做是非常不好的,因为你每次调用声音的时候都会去后台请求一下这个声音文件。所以先加载出来是最好的方法。

<audio id="chat-audio" src="audio/system.wav" display="none"></audio>
function playAudio() {
    document.getElementById('chat-audio').play(); //pause()方法也可以暂停,具体可查html5的audio标签
}
//调用方式
playAudio();

桌面弹窗

function palyDeskNotice(theTitle, options) {
    if (Notification.permission !== "granted") {
        //先判断一下用户是否已经开启了桌面提示的权限,如果没有则提醒用户开启
        window.Notification.requestPermission(function(permission) {
            if (permission === "granted") showNotice(theTitle, options);
        });
    } else {
        showNotice(theTitle, options);
    }
}

function showNotice(theTitle, options) {
        //这个就是桌面弹窗
    var desknotice = new Notification(theTitle, options);
    desknotice.onclick = function() {
        //当用户点击弹窗的时候,要定位到聊天窗口
        window.focus();
        desknotice.close();
    };
    //页面退出时关闭提醒
    window.onbeforeunload = function() {
        desknotice.close();
    }
    //弹窗3秒后自动消失
    setTimeout(desknotice.close.bind(desknotice), 3000);
}
//调用方式
palyDeskNotice('来自xxx', {
    body: '内容',
    icon: "images/xxx.jpg"
});

title闪烁提醒的原理

var NewMsgNoticeflag = false,//闪烁标识
    newMsgNotinceTimer = null;

function newMsgCount() {
    if (NewMsgNoticeflag) {
        NewMsgNoticeflag = false;
        document.title = '【☏新消息】您有新的即时消息';
    } else {
        NewMsgNoticeflag = true;
        document.title = '【   】您有新的即时消息';
    }
}
//兼容性
var hiddenProperty = 'hidden' in document 
? 'hidden' : 'webkitHidden' in document 
? 'webkitHidden' : 'mozHidden' in document 
? 'mozHidden' : null;

var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function() {
        if (!document[hiddenProperty]) {
            clearInterval(newMsgNotinceTimer);
            newMsgNotinceTimer = null;
            document.title = 'beta-即时消息系统'; //窗口没有消息的时候默认的title内容
        }
    }
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
//调用方式
if (!newMsgNotinceTimer) newMsgNotinceTimer = setInterval("newMsgCount()", 200);

我研究过微信网页版的消息提示,也是基于这三种提醒的(声音、桌面弹窗、title闪烁)。这也是一个web版的聊天系统所必须有的,否则这个聊天系统就是不合格。


转载时请以 超链接的形式 注明:转自Ferman

                  

About me