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 相关文章推荐
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
不同浏览器的怪癖小结
Jul 11 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
js中复选框的取值及赋值示例详解
Oct 18 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/11/16 PHP
php xml 入门学习资料
2011/01/01 PHP
PDO::quote讲解
2019/01/29 PHP
javascript算法学习(直接插入排序)
2011/04/12 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
Python中使用HTMLParser解析html实例
2015/02/08 Python
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
Python的Urllib库的基本使用教程
2015/04/30 Python
Python实现登录接口的示例代码
2017/07/21 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
python的pstuil模块使用方法总结
2019/07/26 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
python模块导入的方法
2019/10/24 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
django queryset相加和筛选教程
2020/05/18 Python
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
医学毕业生自我鉴定
2013/10/30 职场文书
财务工作失职检讨书
2014/11/21 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL