wire:poll

폴링은 웹 애플리케이션에서 서버에 업데이트를 위해 정기적으로 요청을 보내는(“폴링”) 기술입니다. 이는 WebSockets와 같은 더 정교한 기술 없이도 페이지를 최신 상태로 유지할 수 있는 간단한 방법입니다.

기본 사용법

Livewire에서 폴링을 사용하는 것은 요소에 wire:poll을 추가하는 것만큼 간단합니다.

아래는 사용자의 구독자 수를 보여주는 SubscriberCount 컴포넌트의 예시입니다:

<?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> 
    Subscribers: {{ $count }}
</div>

일반적으로 이 컴포넌트는 사용자의 구독자 수를 보여주고, 페이지를 새로고침하기 전까지는 업데이트되지 않습니다. 하지만 컴포넌트의 템플릿에 wire:poll이 있기 때문에, 이 컴포넌트는 이제 2.5초마다 스스로 새로고침되어 구독자 수를 최신 상태로 유지합니다.

또한, wire:poll에 값을 전달하여 폴링 간격마다 실행할 액션을 지정할 수도 있습니다:

<div wire:poll="refreshSubscribers">
    Subscribers: {{ $count }}
</div>

이제 컴포넌트의 refreshSubscribers() 메서드가 2.5초마다 호출됩니다.

타이밍 제어

폴링의 주요 단점은 리소스를 많이 사용할 수 있다는 점입니다. 폴링을 사용하는 페이지에 천 명의 방문자가 있다면, 2.5초마다 천 개의 네트워크 요청이 발생하게 됩니다.

이러한 상황에서 요청 수를 줄이는 가장 좋은 방법은 폴링 간격을 더 길게 설정하는 것입니다.

아래와 같이 원하는 지속 시간을 wire:poll에 추가하여 컴포넌트가 폴링하는 빈도를 수동으로 제어할 수 있습니다:

<div wire:poll.15s> <!-- 초 단위... -->

<div wire:poll.15000ms> <!-- 밀리초 단위... -->

백그라운드 스로틀링

서버 요청을 더욱 줄이기 위해, Livewire는 페이지가 백그라운드에 있을 때 폴링을 자동으로 제한합니다. 예를 들어, 사용자가 다른 브라우저 탭에서 페이지를 열어두면, Livewire는 사용자가 탭을 다시 방문할 때까지 폴링 요청 수를 95% 줄입니다.

이 동작을 비활성화하고, 탭이 백그라운드에 있어도 계속 폴링을 유지하고 싶다면, wire:poll에 .keep-alive 수식어를 추가할 수 있습니다:

<div wire:poll.keep-alive>

뷰포트 스로틀링

또 다른 방법으로, 꼭 필요할 때만 폴링을 하도록 .visible 수식어를 wire:poll에 추가할 수 있습니다. .visible 수식어는 Livewire에게 해당 컴포넌트가 페이지에 보일 때만 폴링하도록 지시합니다:

<div wire:poll.visible>

wire:visible을 사용하는 컴포넌트가 긴 페이지의 맨 아래에 있다면, 사용자가 해당 부분을 뷰포트에 스크롤할 때까지 폴링이 시작되지 않습니다. 사용자가 다시 스크롤하여 벗어나면 폴링이 다시 중지됩니다.