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 相关文章推荐
简单采集了yahoo的一些数据
Feb 14 PHP
php csv操作类代码
Dec 14 PHP
兼容firefox,chrome的网页灰度效果
Aug 08 PHP
解析curl提交GET,POST,Cookie的简单方法
Jun 29 PHP
PHP读取大文件的类SplFileObject使用介绍
Apr 09 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
Nov 25 PHP
Web程序工作原理详解
Dec 25 PHP
php基础教程
Aug 26 PHP
分享一个漂亮的php验证码类
Sep 29 PHP
php实现文章置顶功能的方法
Oct 20 PHP
THINKPHP截取中文字符串函数实例代码
Mar 20 PHP
Yii2汉字转拼音类的实例代码
Apr 18 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 常用类整理
2009/12/23 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
python中pycurl库的用法实例
2014/09/30 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
表彰先进的通报
2014/01/31 职场文书
工作所在部门证明
2014/09/21 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
邀请函怎么写
2015/01/30 职场文书
详解Vue slot插槽
2021/11/20 Vue.js