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

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

Синтаксис

<div wire:poll.visible="methodName">
	...
</div>

Можно также указать интервал в миллисекундах:

<div wire:poll.visible.5000ms="methodName">
	...
</div>

Допускается использование как с явным указанием времени, так и без него (по умолчанию интервал составляет 2000 мс).

Пример

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

<?php
	namespace AppLivewire;

	use LivewireComponent;
	use AppModelsUser;

	class UserStats extends Component
	{
		public $userCount = 0;

		public function mount()
		{
			$this->updateStats();
		}

		public function updateStats()
		{
			$this->userCount = User::count();
		}

		public function render()
		{
			return view('livewire.user-stats');
		}
	}
?>

<div wire:poll.visible.3000ms="updateStats">
	<h3>Online users: {{ $userCount }}</h3>
</div>

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

<div>
	<h3>Online users: 42</h3>
</div>

Число $userCount будет обновляться каждые 3 секунды, но только пока элемент виден на экране. Как только пользователь прокрутит страницу и элемент исчезнет из видимой области, опрос приостановится.

Пример

Рассмотрим более сложный пример с обновлением списка уведомлений. Компонент будет проверять наличие новых уведомлений каждые 5 секунд, если блок видим:

<?php
	namespace AppLivewire;

	use LivewireComponent;
	use AppModelsNotification;

	class NotificationBell extends Component
	{
		public $notifications = [];

		public $count = 0;

		public function mount()
		{
			$this->refreshNotifications();
		}

		public function refreshNotifications()
		{
			$notifications = Notification::where('user_id', auth()->id())
				->where('read', false)
				->latest()
				->limit(5)
				->get();

			$this->notifications = $notifications->toArray();
			$this->count = count($this->notifications);
		}

		public function render()
		{
			return view('livewire.notification-bell');
		}
	}
?>

<div wire:poll.visible.5000ms="refreshNotifications" class="bell-container">
	<span class="bell-icon">🔔</span>
	@if ($count > 0)
		<span class="badge">{{ $count }}</span>
	@endif
	
	@if (count($notifications) > 0)
		<ul class="notification-list">
			@foreach ($notifications as $notification)
				<li>{{ $notification['message'] }}</li>
			@endforeach
		</ul>
	@endif
</div>

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

<div class="bell-container">
	<span class="bell-icon">🔔</span>
	<span class="badge">3</span>
	<ul class="notification-list">
		<li>New comment on your post</li>
		<li>You have a friend request</li>
		<li>System update available</li>
	</ul>
</div>

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

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

директиву wire:poll,
которая выполняет опрос сервера без проверки видимости элемента
директиву wire:poll.keep-alive,
которая поддерживает соединение активным между опросами
директиву wire:load,
которая выполняет действие при загрузке компонента
метод mount,
который инициализирует компонент при его создании