iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!系列 第 13

Day 13 | 元件狀態:輪詢 Polling

今天要介紹的功能 Polling ,用Google 翻譯出來是「輪詢」,不過這個詞並不常見就是了,大致上可以想像成是每一段時間執行一次,像是 JavaScript 的 setInterval()。在顯示時間或是要定時讀取資料時就非常的方便。透過 wire:poll,預設狀態下可以每 2秒 自動發送請求到後端來更新這個區塊的內容。下面就來看看實際的運作方式吧!

官方文件
我的DEMO頁面

基礎使用

要顯示目前的伺服器時間日期的話,可以透過 PHP 內建的 now() 來取得。在這邊會依照預設的每兩秒鐘更新一次畫面:

<div wire:poll>
    Current time: {{ now() }}
</div>

如果要手動調整更新的頻率也是可以的,在後面加上 750ms 或是 1000ms

<div wire:poll.750ms>
    Current time: {{ now() }}
</div>

也可以定時執行某些後端的 Function

<h5 wire:poll.1000ms="addCount">
    Count: {{ $count }}
</h5>

注意:更新時會使畫面重新渲染,因此像是 now() 這種 function 就會被比較快的定時更新掉。


背景執行

如果觀察 DEMO 頁面中的計數器,會發現瀏覽器不在當前頁面時就會減少執行的次數,從而減少對後端的請求,如果想要在背景也繼續定時產生請求可以透過 keep-alive 來達成:

<div wire:poll.keep-alive>
    Current time: {{ now() }}
</div>

元素可見時執行

有些時候需要常常更新的區塊可能在頁面底部(例如一頁式網站),如果只要讓視窗出現在使用者的畫面中才產生定時請求的話,則可以加上 visible

<div wire:poll.visible></div>

上一篇
Day 12 | 元件狀態:讀取 Loading States
下一篇
Day14 | 元件狀態:離線 Offline
系列文
Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!34

尚未有邦友留言

立即登入留言