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 相关文章推荐
javascript 子窗体父窗体相互传值方法
May 31 Javascript
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
原生js实现回复评论功能
Jan 18 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 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
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
Vue下的国际化处理方法
2017/12/18 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
python实现单向链表详解
2018/02/08 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
python实现车牌识别的示例代码
2019/08/05 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
药剂专业学生求职信范文
2013/12/28 职场文书
高三语文教学反思
2014/01/15 职场文书
团代会宣传工作方案
2014/05/08 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
保护动物的宣传语
2015/07/13 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
公司周年庆寄语
2019/06/21 职场文书
Java 在线考试云平台的实现
2021/11/23 Java/Android