外賣吃多了，你都聽到過這中聲音，有好奇過是怎么實現的嗎？

其實很簡單，就是前端不斷的請求后臺接口，根據情況自動播放前端的mp3之類的早就準備好的音頻。

前端核心代碼：<div class="btn-group float-left message"><a href="javascript:" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"style="position: relative"><span>消息提醒</span><div class="text-center ml-2 totalNum"hiddenstyle="width: 18px;height: 18px;line-height: 18px;border-radius:999px;display: inline-block;background-color: #ff4544;color:#fff;">5</div></a><div class="dropdown-menu dropdown-menu-right message-list" hidden></div></div><script>var checkUrl = "<?=Yii::$app->urlManager->createUrl(['mch/get-data/order'])?>";var checkUrlNew = "<?=Yii::$app->urlManager->createUrl(['mch/get-data/order-pharmacist'])?>";var pharmacist="<?=$pharmacist?>";var sound='';if(pharmacist){sound = "<?=Yii::$app->request->baseUrl . '/statics/'?>Baidu-TTS.mp3";}else {sound = "<?=Yii::$app->request->baseUrl . '/statics/'?>/5611.wav";}function playSound(id) {var borswer = window.navigator.userAgent.toLowerCase();if (borswer.indexOf("ie") >= 0) {//IE內核瀏覽器var strEmbed = '<embed name="embedPlay" src="' + sound + '" autostart="true" hidden="true" loop="false"></embed>';if ($("body").find("embed").length <= 0)$("body").append(strEmbed);var embed = document.embedPlay;//瀏覽器不支持 audion，則使用 embed 播放embed.volume = 100;} else {//非IE內核瀏覽器var strAudio = "<audio id='audioPlay' src='" + sound + "' hidden='true'>";if ($("body").find("audio").length <= 0)$("body").append(strAudio);var audio = document.getElementById("audioPlay");//瀏覽器支持 audionaudio.play();}}function is_index(indexOf, list) {for (var i = 0; i < list.length; i++) {if (indexOf == list[i]) {return true;}}return false;}// 訂單消息function checkmessage() {$.ajax({url: checkUrl,type: 'get',dataType: 'json',success: function (res) {var sound_list = JSON.parse(localStorage.getItem('sound_list'));if (!sound_list) {sound_list = [];}if (res.code == 0) {var count = res.data.length;if (count == 0) {return;}$('.message-list').empty();for (var i = 0; i < count; i++) {$('.message-list').prop('hidden', false);$('.totalNum').prop('hidden', false).html(count);var type = res.data[i].type;var order_type = res.data[i].order_type;if (order_type == 4) {var html = "<a target='_blank' class='dropdown-item' data-index='" + res.data[i].id + "' href='" + res.data[i].url + "'>" + res.data[i].name + "申請商品上架</a>";} else {if (type == 0) {var html = "<a target='_blank' class='dropdown-item' data-index='" + res.data[i].id + "' href='" + res.data[i].url + "'>" + res.data[i].name + "下了一個訂單</a>";} else {var html = "<a target='_blank' class='dropdown-item' data-index='" + res.data[i].id + "' href='" + res.data[i].url + "'>" + res.data[i].name + "一個售后訂單</a>";}}$('.message-list').append(html);if (res.data[i].is_sound == 0 && !is_index(res.data[i].id, sound_list)) {sound_list.push(res.data[i].id);playSound(res.data[i].id);}}localStorage.setItem('sound_list', JSON.stringify(sound_list));$('.message-list').append("<a class='dropdown-item' style='text-align:center' href='<?=Yii::$app->urlManager->createUrl(['mch/store/order-message', 'status' => 1])?>'>全部消息</a>");}}});}//藥師訂單消息function checkmessage_ph() {$.ajax({url:checkUrlNew,type: 'get',dataType: 'json',success: function (res) {var sound_list_new = JSON.parse(localStorage.getItem('sound_list_new'));if (!sound_list_new) {sound_list_new = [];}if (res.code == 0) {var count = res.data.length;if (count == 0) {return;}$('.message-list').empty();console.log(res.data);for (var i = 0; i < count; i++) {$('.message-list').prop('hidden', false);$('.totalNum').prop('hidden', false).html(count);var type = res.data[i].type;var order_type = res.data[i].order_type;var rx_exist=res.data[i].rx_exist;if (order_type == 4) {var html = "<a target='_blank' class='dropdown-item' data-index='" + res.data[i].id + "' href='" + res.data[i].url + "'>" + res.data[i].name + "申請商品上架</a>";} else {if (type == 0) {if(rx_exist==1){var html = "<a target='_blank' class='dropdown-item' data-index='" + res.data[i].id + "' href='" + res.data[i].url + "'>" + res.data[i].name + "下了一個處方藥訂單</a>";}if(rx_exist==0){var html = "<a target='_blank' class='dropdown-item' data-index='" + res.data[i].id + "' href='" + res.data[i].url + "'>" + res.data[i].name + "下了一個訂單</a>";}} else {var html = "<a target='_blank' class='dropdown-item' data-index='" + res.data[i].id + "' href='" + res.data[i].url + "'>" + res.data[i].name + "一個售后訂單</a>";}}$('.message-list').append(html);if (!is_index(res.data[i].id, sound_list_new)) {sound_list_new.push(res.data[i].id);if(res.data[i].rx_exist==1){playSound(res.data[i].id);}}}localStorage.setItem('sound_list_new', JSON.stringify(sound_list_new));$('.message-list').append("<a class='dropdown-item' style='text-align:center' href='<?=Yii::$app->urlManager->createUrl(['mch/store/order-message', 'status' => 1])?>'>全部消息</a>");}}});}$(document).ready(function () {$('.message').hover(function () {$('.message-list').show();}, function () {$('.message-list').hide();});$('.message-list').on('click', 'a', function () {var num = $('.totalNum');num.text(num.text() - 1);if (num.text() == 0) {num.prop('hidden', true);$('.message-list').prop('hidden', true)}$.ajax({url: '<?=Yii::$app->urlManager->createUrl(['mch/get-data/message-del'])?>',type: 'get',dataType: 'json',data: {'id': $(this).data('index')},success: function (res) {if (res.code == 0) {window.location.href = $(this).data('url');}}});$(this).remove();});setInterval(function () {<?php if($pharmacist){?>checkmessage_ph();<?php }else{?>checkmessage();<?php }?>}, 30000);});</script> public function search(){if (!$this->validate()) {return $this->errorResponse;}$query = OrderMessage::find()->alias('om')->where(['om.store_id' => $this->store_id,'om.shop_id' => 0,'om.is_delete' => 0,'om.order_type' => [0, 1, 2, 3, 4]]);if ($this->is_read) {$query->andWhere(['or',['om.is_read' => 0],['om.is_sound'=>0]]);}$count = $query->count();$pagination = new Pagination(['totalCount' => $count, 'pageSize' => $this->limit]);$list = $query->orderBy(['om.addtime' => SORT_DESC])->limit($pagination->limit)->offset($pagination->offset)->asArray()->all();$urlManager = \Yii::$app->urlManager;// 此處考慮在 cache 或 setting 內做緩存，存儲 order_message 表的更新時間，以及查詢結果// 插入 order_message 時，在 beforeInsert 內清空緩存// -- wi1dcardforeach ($list as $index => &$value) {switch ($value['order_type']) {case 3:$yy_order = YyOrder::findOne(['id' => $value['order_id'], 'store_id' => $this->store_id]);if ($value['type'] == 0) {$value['url'] = $urlManager->createUrl(['mch/book/order/index', 'status' => 1]);} else {$value['url'] = $urlManager->createUrl(['mch/book/order/index', 'status' => 3]);}$user = User::findOne(['id' => $yy_order->user_id]);$order['order_no'] = $yy_order->order_no;$order['name'] = $user->nickname;break;case 4:$mch_goods = Goods::findOne(['id' => $value['order_id']]);$mch = Mch::findOne(['id' => $mch_goods->mch_id]);$value['url'] = $urlManager->createUrl(['mch/mch/goods/goods', 'keyword' => $mch_goods->name]);$order['order_no'] = $mch_goods->name;$order['name'] = $mch->name;break;default:if ($value['type'] == 0) {$value['url'] = $urlManager->createUrl(['mch/order/index', 'status' => 1]);} else {$value['url'] = $urlManager->createUrl(['mch/order/refund']);}switch ($value['order_type']) {case 0:$class = "app\models\Order";break;case 1:$class = "app\models\MsOrder";$value['url'] = $urlManager->createUrl(['mch/miaosha/order/index', 'status' => 1]);break;case 2:$class = "app\models\PtOrder";$value['url'] = $urlManager->createUrl(['mch/group/order/index', 'status' => 1]);break;default:break;}$order = $class ? $class::findOne(['id' => $value['order_id'], 'store_id' => $this->store_id]) : [];//砍價訂單if($value['order_type']==0 && $order->type==2){$value['url'] = $urlManager->createUrl(['mch/bargain/order/index']);$value['is_bargain'] = 1;}}$value['order_no'] = $order['order_no'];$value['name'] = $order['name'];$value['platform'] = User::find()->where(['id' => $order['user_id']])->select('platform')->scalar();$time = time() - $value['addtime'];if ($time < 60) {$value['time'] = $time . '秒前';} elseif ($time < 3600) {$value['time'] = ceil($time / 60) . '分鐘前';} elseif ($time < 86400) {$value['time'] = ceil($time / 3600) . '小時前';} else {$value['time'] = ceil($time / 86400) . '天前';}}return ['list' => $list,'pagination' => $pagination];}

?

總結

以上是生活随笔為你收集整理的消息提醒：您有新的订单，请及时处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。