wire:poll
ポーリングは、Webアプリケーションでサーバにアップデートがないか「ポーリング」（一定間隔でリクエストを送信）するために使用されるテクニックです。これは、WebSocketsのようなより高度な技術を必要とせずに、ページを最新の状態に保つための簡単な方法です。Polling is a technique used in web applications to "poll" the server (send requests on a regular interval) for updates. It's a simple way to keep a page up-to-date without the need for a more sophisticated technology like WebSockets[/docs/events#real-time-events-using-laravel-echo].
基本的な使い方Basic usage
Livewire内でポーリングを使用するには、wire:pollを要素に追加するだけです。Using polling inside Livewire is as simple as adding wire:poll to an element.
以下は、ユーザーの登録者数を表示するSubscriberCountコンポーネントの例です。Below is an example of a SubscriberCount component that shows a user's subscriber count:
<?php
namespace App\Livewire;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;
class SubscriberCount extends Component
{
public function render()
{
return view('livewire.subscriber-count', [
'count' => Auth::user()->subscribers->count(),
]);
}
}
<div wire:poll> <!-- [tl! highlight] -->
Subscribers: {{ $count }}
</div>
通常、このコンポーネントはユーザーの登録者数を表示し、ページがリフレッシュされるまで更新されません。しかし、コンポーネントのテンプレートにwire:pollがあるため、このコンポーネントは2.5秒ごとに自動的にリフレッシュされ、登録者数を最新の状態に保ちます。Normally, this component would show the subscriber count for the user and never update until the page was refreshed. However, because of wire:poll on the component's template, this component will now refresh itself every 2.5 seconds, keeping the subscriber count up-to-date.
wire:pollに値を渡すことで、ポーリング間隔で発生するアクションを指定することもできます。You can also specify an action to fire on the polling interval by passing a value to wire:poll:
<div wire:poll="refreshSubscribers">
Subscribers: {{ $count }}
</div>
これで、コンポーネントのrefreshSubscribers()メソッドが2.5秒ごとに呼び出されます。Now, the refreshSubscribers() method on the component will be called every 2.5 seconds.
タイミング制御Timing control
ポーリングの主な欠点は、リソースを大量に消費する可能性があることです。ポーリングを使用するページに1000人の訪問者がいる場合、2.5秒ごとに1000件のネットワークリクエストがトリガーされます。The primary drawback of polling is that it can be resource intensive. If you have a thousand visitors on a page that uses polling, one thousand network requests will be triggered every 2.5 seconds.
このシナリオでリクエストを減らすための最良の方法は、ポーリング間隔を長くすることです。The best way to reduce requests in this scenario is simply to make the polling interval longer.
wire:pollに目的の期間を追加することで、コンポーネントのポーリング頻度を手動で制御できます。You can manually control how often the component will poll by appending the desired duration to wire:poll like so:
<div wire:poll.15s> <!-- 秒単位... -->
<div wire:poll.15000ms> <!-- ミリ秒単位... -->
バックグラウンドスロットリングBackground throttling
サーバリクエストをさらに削減するために、Livewireはページがバックグラウンドにある場合、自動的にポーリングをスロットリングします。たとえば、ユーザーが別のブラウザタブでページを開いたままにすると、Livewireはユーザーがタブを再度開くまで、ポーリングリクエストの数を95％削減します。To further cut down on server requests, Livewire automatically throttles polling when a page is in the background. For example, if a user keeps a page open in a different browser tab, Livewire will reduce the number of polling requests by 95% until the user revisits the tab.
この動作をオプトアウトして、タブがバックグラウンドにある場合でも継続的にポーリングする場合は、.keep-alive修飾子をwire:pollに追加します。If you want to opt-out of this behavior and keep polling continuously, even when a tab is in the background, you can add the .keep-alive modifier to wire:poll:
<div wire:poll.keep-alive>
ビューポートスロットリングViewport throttling
必要な場合にのみポーリングを行うためのもう1つの対策は、.visible修飾子をwire:pollに追加することです。.visible修飾子は、コンポーネントがページに表示されている場合にのみポーリングするようにLivewireに指示します。Another measure you can take to only poll when necessary, is to add the .visible modifier to wire:poll. The .visible modifier instructs Livewire to only poll the component when it is visible on the page:
<div wire:poll.visible>
wire:visibleを使用するコンポーネントが長いページの下部にある場合、ユーザーがそれをビューポートにスクロールするまでポーリングを開始しません。ユーザーがスクロールして離れると、再度ポーリングを停止します。If a component using wire:visible is at the bottom of a long page, it won't start polling until the user scrolls it into the viewport. When the user scrolls away, it will stop polling again.