JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】


Posted in PHP onApril 16, 2019

本文实例讲述了JS(jQuery)实现聊天接收到消息语言自动提醒功能。分享给大家供大家参考,具体如下:

综述

最近在开发一个网页端的客服系统,需求要求聊天双方接收到消息能有语音提醒,并且客服端如果存在未读消息要求每隔五分钟给客服语音提醒一下。客服聊天系统使用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="#" rel="external nofollow" >播放语音</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>

下载

本源码包文件我已经上传到资源库中,有需要的童鞋可以自行下载,里面包含代码和音频文件。

完整实例代码点击此处本站下载

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

希望本文所述对大家JavaScript程序设计有所帮助。

PHP 相关文章推荐
php 处理上百万条的数据库如何提高处理查询速度
Feb 08 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
Oct 27 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
Jun 30 PHP
php中current、next与reset函数用法实例
Nov 17 PHP
php实现微信公众平台账号自定义菜单类
Dec 02 PHP
PHP中遇到的时区问题解决方法
Jul 23 PHP
thinkPHP自定义类实现方法详解
Nov 30 PHP
php获取当前月与上个月月初及月末时间戳的方法
Dec 05 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
Jun 29 PHP
php获取'/'传参的值简单方法
Jul 13 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
May 11 PHP
php反射学习之不用new方法实例化类操作示例
Jun 14 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
Apr 16 #PHP
Laravel中9个不经常用的小技巧汇总
Apr 16 #PHP
Laravel框架自定义公共函数的引入操作示例
Apr 16 #PHP
Laravel框架文件上传功能实现方法示例
Apr 16 #PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
Apr 16 #PHP
PHP获取远程http或ftp文件的md5值的方法
Apr 15 #PHP
php文件操作之文件写入字符串、数组的方法分析
Apr 15 #PHP
You might like
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
扒一扒JavaScript 预解释
2015/01/28 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
查询优化的一般准则有哪些
2015/03/08 面试题
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
小学生演讲稿
2014/01/12 职场文书
财务科科长岗位职责
2014/03/10 职场文书
给学校的建议书
2014/03/12 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
产品质量承诺书
2014/03/27 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书