Laravel admin实现消息提醒、播放音频功能


Posted in Javascript onJuly 10, 2019

应用情景,有新的订单生成,后台进行消息提醒并播放音频(这里用到轮询简单实现):下面附代码

1.找到laravel-admin 中的 index.blade.php 文件进行编辑

{{-- 音频通知 --}}
<audio style="display:none; height: 0" id="bg-music" preload="auto" src="http://fjdx.sc.chinaz.com/Files/DownLoad/sound1/201511/6571.mp3" loop="loop"></audio>
<script>
  function LA() {}
  LA.token = "{{ csrf_token() }}";
  var getting = {
    url:'/admin/sendNotice',
    dataType:'json',
    success: function (res) {
      console.log(res);
      if(res.code == 200){





        toastr.options.onclick = function(){
          location.href='/admin/order'; // 点击跳转页面
        };




  toastr.options.timeOut=120000; // 保存2分钟




  toastr.warning(res.msg); // 提示文字
        var audio = document.getElementById('bg-music'); // 启用音频通知
        audio.play();
        setTimeout(function(){
          audio.load(); // 1.5秒后关闭音频通知
        },1500);
      }
    },
    error: function (res) {
      console.log(res);
    }
  };
  //关键在这里,Ajax定时访问服务端,不断获取数据 ,这里是5秒请求一次。
  window.setInterval(function(){$.ajax(getting)},5000);
</script>

2.请求路由控制器

/**
   * 轮询判断有没有新订单
   *
   * @return void
   */
  public function sendNotice()
  {

 // 处理逻辑


 $count = 0;  // 获取的结果
    $getCount = session()->get('count');
    if ($count > $getCount) {
      session()->put('count', $count); // 存session
      return ['code' => 200, 'msg' => '您有新的订单请及时处理'];
    }

   // 不成立的话则存最新的值
    session()->put('count', $count);
    return ['code' => 201];
  }

实现效果:

Laravel admin实现消息提醒、播放音频功能

注意:

    使用Google 浏览器如果无法播放提示音?

1、进入  chrome://flags/#autoplay-policy

Laravel admin实现消息提醒、播放音频功能

2、找到 Autoplay policy

Laravel admin实现消息提醒、播放音频功能

3、修改Default

总结

以上所述是小编给大家介绍的Laravel-admin 消息提醒、播放音频功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
vue实现表格过滤功能
Sep 27 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 #Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 #jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 #jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 #jQuery
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 #Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 #Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 #Javascript
You might like
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
Python文件及目录操作实例详解
2015/06/04 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
python的concat等多种用法详解
2018/11/28 Python
Django框架 querySet功能解析
2019/09/04 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
简历中个人自我评价范文
2013/12/26 职场文书
留学推荐信中文范文
2015/03/26 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python