综述

最近在开发一个网页端的客服系统，需求要求聊天双方接收到消息能有语音提醒，并且客服端如果存在未读消息要求每隔五分钟给客服语音提醒一下。客服聊天系统使用PHP的Workerman框架进行开发，由于语音提醒实现的功能一样，故而在本篇博文中从简描述，只进行定时循环提醒的功能记录，不说实时的那个语音提醒，因为思路都是一样的，主要是看如何实现自动播放语音功能。

思路

实时提醒

这个就比较明确了，就是在接收到消息的同时进行语音播放，大家可以根据自己的逻辑进行将代码放到合适的地方。

定时提醒

这个主要首先判断客户是否存在未读的消息，如果存在则语音提醒，如果不存在，则不进行提醒。故而要在HTML页面写一个定时器，每五分钟访问一次接口，查询客服是否存在未读消息，然后在后台开发一个接口用于返回客户是否存在未读消息。

代码实现

<!--=======================================-->
<!--Created by ZHIHUA·WEI.-->
<!--Author: Wei ZhiHua-->
<!--Date: 2019/01/09-->
<!--Time: 下午 17:26-->
<!--Project: ZHIHUA·WEI-->
<!--Power:JS实现聊天接收到消息语言自动提醒-->
<!--=======================================-->
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>JS实现聊天接收到消息语言自动提醒(您有新的消息请注意查收)</title><!--引入CSS、JS--><script type="text/javascript" src="public/common/js/jquery-1.8.1.min.js"></script>
</head>
<style>#audio_click {margin-top: 32px;height: 40px;}#audio_click a {text-decoration: none;background: #2f435e;color: #f2f2f2;padding: 10px 30px 10px 30px;font-size: 16px;font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;font-weight: bold;border-radius: 3px;-webkit-transition: all linear 0.30s;-moz-transition: all linear 0.30s;transition: all linear 0.30s;}#audio_click a:hover {background: #385f9e;}
</style>
<body>
<!--dom结构部分-->
<div style="width: 100%;text-align: center"><!--用来存放item--><h1>JS实现聊天接收到消息语言自动提醒</h1><h3>(您有新的消息请注意查收)</h3><div id="audio_click"><a id="btn_audio" href="#">播放语音</a></div><div id="audio_play"></div>
</div>
</body>
<script>$(function () {var html = '';html += '<audio id="audioPlay">';//格式ogg音频地址html += '<source src="/public/static/layui/newmsg.ogg" type="audio/ogg">';//格式mp3音频地址html += '<source src="/public/static/layui/newmsg.mp3" type="audio/mpeg">';//格式wav音频地址html += '<source src="/public/static/layui/newmsg.wav" type="audio/wav">';html += '</audio>';//将代码写入到页面中$(html).appendTo("#audio_play");//轮询ajax检测未读消息，每五分钟var setTime = setInterval(function () {$.ajax({type: "post",url: "{:url('index/getNoReadMsg')}", //查询客服是否有未读消息dataType: "json",success: function (ret) {if (ret.code == 1) {//有则进行播放语音提醒$('#audioPlay')[0].play();}}});}, 300000);});$("#btn_audio").click(function () {//这就代码就是播放语音的关键代码$('#audioPlay')[0].play();});
</script>
</html>

下载

本源码包文件我已经上传到资源库中，有需要的童鞋可以自行下载，里面包含代码和音频文件。下载地址：JS实现聊天接收到消息语言自动提醒(您有新的消息请注意查收)

之后将代码中相应的资源路径修改之后即可使用。

JS实现聊天接收到消息语言自动提醒(您有新的消息请注意查收)相关推荐

java实现未读消息提醒_JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】...
本文实例讲述了JS(jQuery)实现聊天接收到消息语言自动提醒功能.分享给大家供大家参考,具体如下: 综述最近在开发一个网页端的客服系统,需求要求聊天双方接收到消息能有语音提醒,并且客服端如果存在 ...
RabbitMQ之消息的自动应答、手动应答和消息持久化（Java开发）
1.消息的自动和手动应答 boolean autoAck = true;//消息自动应答 channel.basicConsume(WQ_QUEUE,autoAck,consumer); 默认情况下, ...
html页面国际化之谷歌翻译js实践,支持通过判断浏览器语言自动将中文翻译成英文
实践过程最近boss提出了一个需求,需要支持打开的页面自动翻译成英文,csdn来回找资料,最终确定使用谷歌翻译js插件,这个插件测试只支持手动翻译,没能满足打开页面通过判断浏览器语言自动翻译成英文的 ...
msgget();msgsnd();msgrcv();msgctl(); 消息队列 Linux进程间的通信方式之消息队列
Linux进程间的通信方式 ----消息队列. 消息队列和共享内存类似消息队列它允许一个或多个进程向它写消息,一个或多个进程向它写读消息. 消息队列存在于系统内核中,消息的数量受系统限制. 我们来看 ...
易语言晨风机器人源_易语言FQ自动聊天机器人源码,易语言自动聊天插件制作源码...
自动聊天插件制作易语言源码系统结构:加入消息记录,智能处理消息,加载插件信息,保存词库,词库初始化,关键词查询,加载词库,初始化插件,加入命令,处理命令,取插件,调用插件,取插件信息,时间, === ...
python自动推送消息_Python自动接收微信群消息并推送相应的公众号文章
原标题:Python自动接收微信群消息并推送相应的公众号文章封面图片:<Python程序设计基础与应用>(ISBN:9787111606178),董付国,机械工业出版社用书教师可以联系 ...
聊天室（C语言）- 基于文件编程、网络通信、数据库实现
聊天室(C语言) 源码连接 https://download.csdn.net/download/G1842965496/83970608 项目面试问题 C/C++/嵌入式-面试题汇总 --基于文件编 ...
Java消息服务~自动分配的消息头
消息头的值由JMS提供者来设置,开发者setJMSXxx()分配的值忽略. JMSDestination 消息头使用一个Topic 或 Queue 对象来标识目的地. Topic destinatio ...
返回的图片 buffer 怎么接收_面试题：Kafka 会不会丢消息？怎么处理的?
Kafka存在丢消息的问题,消息丢失会发生在Broker,Producer和Consumer三种. Broker Broker丢失消息是由于Kafka本身的原因造成的,kafka为了得到更高的性能和吞 ...

JS实现聊天接收到消息语言自动提醒(您有新的消息请注意查收)

综述

思路

实时提醒

定时提醒

代码实现

下载

JS实现聊天接收到消息语言自动提醒(您有新的消息请注意查收)相关推荐

最新文章

热门文章