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中的window.event.keyCode使用介绍
Apr 26 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
微信小程序地图实现展示线路
Jul 29 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
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
vue实现登录拦截
2020/06/29 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
Python中的super用法详解
2015/05/28 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
python构建指数平滑预测模型示例
2019/11/21 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
Python新手学习标准库模块命名
2020/05/29 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
Python使用Pygame绘制时钟
2020/11/29 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
教师评优的个人自我评价分享
2013/09/19 职场文书
二年级数学教学反思
2014/01/21 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
自我推荐信格式模板
2015/03/24 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
python通过函数名调用函数的几种方法总结
2021/06/07 Python