资讯专栏INFORMATION COLUMN

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

Soarkey / 2021人阅读

摘要:消息提示无非三种方式声音提示,桌面弹窗和闪烁提醒。声音提示注意声音提示前提示已经加载了声音文件,有文章写的很多是临时一个对象,然后这样做是非常不好的,因为你每次调用声音的时候都会去后台请求一下这个声音文件。所以先加载出来是最好的方法。

web消息提示无非三种方式:声音提示,桌面弹窗和title闪烁提醒。下面做一一介绍。

声音提示

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



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);

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79915.html

相关文章

  • 用Java构建一个简单WebSocket聊天项目之新增HTTP接口调度

    摘要:前言大家可以看看上一篇用构建一个简单的聊天室在上一篇文章中我们已经实现了自我对话好友交流群聊离线消息等的功能。系统通知恭喜您连续登录超过天,奖励积分。 本文首发公众号与个人博客:Java猫说 & 猫叔的博客 | MySelf,转载请申明出处。 前言 大家可以看看上一篇:用Java构建一个简单的WebSocket聊天室 在上一篇文章中我们已经实现了:自我对话、好友交流、群聊、离线消息等...

    vvpvvp 评论0 收藏0
  • Zulip聊天机器人Python开发

    摘要:最重要的一点,还提供了聊天机器人接口。所以我们希望可以通过聊天机器人的开发,把这些非技术人员需要查询的需求集成进去,然后智能解析他们发送的消息,并以友好方式自动答复数据结果。 Zulip是什么 Zulip是移动和桌面办公聊天解决方案开发商 一个强大的群组聊天软件 目前已被Dropbox收购并完全开源(github:https://github.com/zulip/zulip) 就Zul...

    ghnor 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<