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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
JavaScript的类型简单说明
Sep 03 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
prettier自动格式化去换行的实现代码
Aug 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
php代码把全角数字转为半角数字
2007/12/10 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
phpwind放自动注册方法
2006/12/02 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
Python中多线程及程序锁浅析
2015/01/21 Python
Python用GET方法上传文件
2015/03/10 Python
python实现井字棋游戏
2020/03/30 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
python实现ID3决策树算法
2018/08/29 Python
django富文本编辑器的实现示例
2019/04/10 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
幼儿园教师工作感言
2014/02/15 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
校园广播稿范文
2015/08/19 职场文书