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 相关文章推荐
常用的几段javascript代码分享
Mar 25 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 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与SQL注入攻击[一]
2007/04/17 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
pygame实现成语填空游戏
2019/10/29 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
COS美国官网:知名服装品牌
2019/04/08 全球购物
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
工艺工程师工作职责
2013/11/23 职场文书
医学专业五年以上个人求职信
2013/12/03 职场文书
高中地理教学反思
2014/01/29 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
老公保证书
2015/01/17 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
数学备课组工作总结
2015/08/12 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server