网站在线客服系统新消息提醒功能,支持浏览器桌面通知提醒,网页新消息声音,标题闪动效果功能实现
当我们的网站收到一条新消息的时候,需要能通知给正在访问网页的人员
浏览器打开的情况下,可以展示在电脑桌面右下角(需要在HTTPS环境下)
//浏览器桌面通知 function notify(title, options, callback) { // 先检查浏览器是否支持 if (!window.Notification) { console.log("浏览器不支持notify"); return; } options.body=replaceHtml(options.body); console.log("浏览器notify权限:", Notification.permission); // 检查用户曾经是否同意接受通知 if (Notification.permission === 'granted') { var notification = new Notification(title, options); // 显示通知 if (notification && callback) { notification.onclick = function(event) { callback(notification, event); } setTimeout(function () { notification.close(); },3000); } } else { Notification.requestPermission().then( (permission) =>function(){ console.log("请求浏览器notify权限:", permission); if (permission === 'granted') { notification = new Notification(title, options); // 显示通知 if (notification && callback) { notification.onclick = function (event) { callback(notification, event); } setTimeout(function () { notification.close(); }, 3000); } } else if (permission === 'default') { console.log('用户关闭授权 可以再次请求授权'); } else { console.log('用户拒绝授权 不能显示通知'); } }); } }
并且同时可以响起声音提醒访客
//播放声音 function alertSound(id,src){ var b = document.getElementById(id); if(src){ b.src=src; } var p = b.play(); p && p.then(function(){}).catch(function(e){ console.log(e,b.src); }); }
以上两个函数是主要功能,还需要配合下面的调用方法
因为我是在vue下使用的,如没用vue可以酌情修改
html部分
<audio id="chatMessageAudio" style="display: none;" :src="require('@/assets/alert2.ogg')"></audio>
调用方法,tools是我的库名,酌情修改
//声音通知 tools.alertSound("chatMessageAudio"); //桌面通知 tools.notify(msg.name, { body: msg.content, icon: msg.avator },function(notification) { window.focus(); notification.close(); });
标题闪动
var flashing = false; function flashTitle() { if (flashing) { return; } flashing = true; var originalTitle = document.title; var intervalId; var newTitle = "🔥✉️" + originalTitle; function changeTitle() { document.title = document.title == originalTitle ? newTitle : originalTitle; } intervalId = setInterval(changeTitle, 1000); window.onfocus = function () { clearInterval(intervalId); document.title = originalTitle; flashing = false; }; }
十年开发经验程序员,离职全心创业中,历时三年开发出的产品《唯一客服系统》
一款基于Golang+Vue开发的在线客服系统,软件著作权编号:2021SR1462600。一套可私有化部署的网站在线客服系统,编译后的二进制文件可直接使用无需搭开发环境,下载zip解压即可,仅依赖MySQL数据库,是一个开箱即用的全渠道在线客服系统,致力于帮助广大开发者/公司快速部署整合私有化客服功能。
开源地址:唯一客服(开源学习版)
官网地址:唯一客服官网
标签:
javascript
, 在线客服源码
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
2022-02-11 [前端] 项目中的ICONO 纯 CSS 绘制的一套图标库
2022-02-11 [Golang] go env命令的意思
2022-02-11 智能在线客服系统源码GOFLY开发日志- 1. 最初的想法
2020-02-11 [HTTP]HTTP/1.1 协议Expect: 100-continue
2020-02-11 [MongoDB]mongodb的命令行操作