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自定义日期格式化函数详细解析
Jan 14 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
vue项目实战总结篇
Feb 11 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 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
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
PHP实现倒计时功能
2020/11/16 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
python通过shutil实现快速文件复制的方法
2015/03/14 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
护理专业的自荐信
2013/10/22 职场文书
劳动竞赛口号
2014/06/16 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
远程教育学习心得体会
2016/01/23 职场文书