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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
js实现多图左右切换功能
Aug 04 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
JS实现轮播图效果
Jan 11 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
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 MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
浅谈scrapy 的基本命令介绍
2017/06/13 Python
简单易懂的python环境安装教程
2017/07/13 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
python英语单词测试小程序代码实例
2019/09/09 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
工程监理应届生求职信
2013/11/09 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
求职信内容怎么写
2014/05/26 职场文书
政风行风整改方案
2014/10/25 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
客房领班岗位职责
2015/02/11 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers