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 16 PHP
php HandlerSocket的使用
May 02 PHP
PHP版微信公众平台红包API
Apr 02 PHP
php删除指定目录的方法
Apr 03 PHP
php使用cookie实现记住用户名和密码实现代码
Apr 27 PHP
php读取der格式证书乱码解决方法
Jun 22 PHP
WordPress中用于检索模版的相关PHP函数使用解析
Dec 15 PHP
教你php如何实现验证码
Jan 20 PHP
thinkPHP实现将excel导入到数据库中的方法
Apr 22 PHP
PHP设计模式之工厂模式详解
Oct 24 PHP
php实现解析xml并生成sql语句的方法
Feb 03 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
Feb 10 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
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
javascript 动态添加表格行
2006/06/22 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
python 安装impala包步骤
2020/03/28 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
村居抓节水倡议书
2014/05/19 职场文书
节约用水演讲稿
2014/05/21 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
停电通知范文
2015/04/16 职场文书
工作自我评价范文
2019/03/21 职场文书
解析MySQL索引的作用
2022/03/03 MySQL