专栏首页胡六娃的博客laravel-admin toastr 消息提醒和播放音频

laravel-admin toastr 消息提醒和播放音频

jquery-toastr 消息提醒、播放音频

应用情景,有新的订单生成,后台进行消息提醒并播放音频(这里用到轮询简单实现):下面附代码

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.timeOut=120000; // 保存2分钟
                toastr.warning(res.msg); // 提示文字
                toastr.options.onclick = function(){
                    location='order';  // 点击跳转页面
                };

                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];
    }

  实现效果:

注: 使用Google 浏览器如果无法播放提示音?

(1)、进入 chrome://flags/#autoplay-policy

(2)、找到 Autoplay policy

(3)修改Default

原文:https://www.cnblogs.com/Wenxiaopeng/p/11163079.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • mui页面跳转(传值+接收)

    用户4973967
  • php使用openssl进行Rsa长数据加密(117)解密(128)

    最近在使用rsa加密,字符串过长是总是自动截取,百度了发现是rsa对加密字符有长度的限制

    用户4973967
  • laravel maatwebsite/excel3.1 导入详解

    2. 在 config/app.php 中注册服务提供者到 providers 数组:

    用户4973967
  • Oracle 全表扫描及其执行计划(full table scan)

        全表扫描是Oracle访问数据库表是较为常见的访问方式之一。很多朋友一看到SQL语句执行计划中的全表扫描,就要考虑对其进行修理一番。全表扫描的存在,的确...

    Leshami
  • Python 高级特性

    这章有关Python中被认为高级的特性——就是说并不是每个语言都有的,也是说它们可能在更复杂的程序或库中更有用,但不是说特别特殊或特别复杂。

    py3study
  • Linux date命令知识点总结

    用法:date [选项]… [+格式] 或:date [-u|–utc|–universal] [MMDDhhmm[[CC]YY][.ss]]

    砸漏
  • 决策树

    输入: 训练集:D= \{(x_1,y_1),(x_2,y_2),...,(x_m,y_m)\} ;属性集:A= \{a_1,a_2,..,a_d\} 。

    花鸣溪
  • ztree实现根节点右击事件,显示添加删除

    1:在setting 配置里面,给callback设置,右击事件onRightClick:

    王小婷
  • 【leetcode刷题】T119-二叉树的层次遍历 II

    https://leetcode-cn.com/problems/binary-tree-level-order-traversal-ii/

    木又AI帮
  • 【leetcode刷题】20T5-Z 字形变换

    https://leetcode-cn.com/problems/zigzag-conversion

    木又AI帮

扫码关注云+社区

领取腾讯云代金券