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 相关文章推荐
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
小程序实现点击tab切换左右滑动
Nov 16 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实现无限级分类实现代码(递归方法)
2011/01/01 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
基于PHP制作验证码
2016/10/12 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
python unichr函数知识点总结
2020/12/16 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
幼儿园教师教学反思
2014/02/06 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
我的求职择业计划书
2014/04/04 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
导游词之南京夫子庙
2019/12/09 职场文书