Директива wire:poll

Директива wire:poll вешается на HTML-элемент и автоматически выполняет запрос к серверу через указанный интервал времени. В значение передаётся время в миллисекундах или имя метода компонента. После каждого опроса Livewire обновляет шаблон компонента, отображая актуальные данные.

Синтаксис

<div wire:poll="methodName">
	{{ $data }}
</div>

Базовый синтаксис с указанием интервала:

<div wire:poll.5000ms="methodName">
	{{ $data }}
</div>

Пример

Давайте создадим компонент, который автоматически обновляет текущее время каждые 3 секунды:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Clock extends Component
	{
		public $time;
		
		public function mount()
		{
			$this->time = now()->format('H:i:s');
		}
		
		public function updateTime()
		{
			$this->time = now()->format('H:i:s');
		}
		
		public function render()
		{
			return view('livewire.clock');
		}
	}
?>

<div wire:poll.3000ms="updateTime">
	Current time: {{ $time }}
</div>

Результат выполнения кода:

<div>
	Current time: 15:23:47
</div>

В этом примере метод updateTime будет вызываться каждые 3 секунды, обновляя отображаемое время.

Пример

Давайте создадим опрос без указания метода, используя только интервал. В этом случае компонент будет полностью перерендериваться:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Status extends Component
	{
		public $status = 'online';
		public $users = 0;
		
		public function mount()
		{
			$this->users = rand(10, 50);
		}
		
		public function render()
		{
			$this->users = rand(10, 50);
			return view('livewire.status');
		}
	}
?>

<div wire:poll.2000ms>
	Status: {{ $status }}
	Users online: {{ $users }}
</div>

Результат выполнения кода:

<div>
	Status: online
	Users online: 27
</div>

В этом случае каждые 2 секунды вызывается метод render, который обновляет данные о количестве пользователей.

Пример

Давайте используем директиву wire:poll с модификатором .keep-alive, который предотвращает закрытие соединения между опросами:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Notifications extends Component
	{
		public $notifications = [];
		public $count = 0;
		
		public function mount()
		{
			$this->count = 0;
			$this->notifications = $this->generateNotifications();
		}
		
		public function generateNotifications()
		{
			$messages = ['New message received', 'System update available', 'User logged in'];
			return array_rand(array_flip($messages), rand(1, 2));
		}
		
		public function checkNotifications()
		{
			$this->count++;
			$this->notifications = $this->generateNotifications();
		}
		
		public function render()
		{
			return view('livewire.notifications');
		}
	}
?>

<div wire:poll.keep-alive.5000ms="checkNotifications">
	<h3>Notifications ({{ $count }})</h3>
	<ul>
		@foreach ($notifications as $notification)
			<li>{{ $notification }}</li>
		@endforeach
	</ul>
</div>

Результат выполнения кода:

<div>
	<h3>Notifications (3)</h3>
	<ul>
		<li>New message received</li>
		<li>User logged in</li>
	</ul>
</div>

Модификатор .keep-alive оптимизирует производительность при частых опросах, сохраняя соединение открытым.

Смотрите также

директиву wire:poll.visible,
которая запускает опрос только когда элемент виден
директиву wire:load,
которая вызывает метод при загрузке компонента
директиву wire:init,
которая выполняет код при инициализации компонента
директиву wire:change,
которая реагирует на изменение значения поля ввода