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 相关文章推荐
JS与框架页的操作代码
Jan 17 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
ES6 Generator基本使用方法示例
Jun 06 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生成带logo二维码方法小结
2016/04/08 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
python实现简易动态时钟
2018/11/19 Python
python绘制封闭多边形教程
2020/02/18 Python
python软件都是免费的吗
2020/06/18 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
供货协议书范本
2014/04/22 职场文书
后备干部培训方案
2014/05/22 职场文书
2014年电厂工作总结
2014/12/04 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android