jquery-toastr 消息提醒、播放音頻php
應用情景,有新的訂單生成,後臺進行消息提醒並播放音頻(這裏用到輪詢簡單實現):下面附代碼html
1.找到laravel-admin 中的 index.blade.php 文件進行編輯jquery
{{-- 音頻通知 --}}
<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.請求路由控制器laravel
/** * 輪詢判斷有沒有新訂單 * * @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]; }
實現效果:ajax
注: 使用Google 瀏覽器若是沒法播放提示音?chrome
(1)、進入 chrome://flags/#autoplay-policyjson
(2)、找到 Autoplay policy瀏覽器
(3)修改Defaultsession