Директива wire:poll.keep-alive

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

Основное отличие от обычной директивы wire:poll заключается в том, что wire:poll.keep-alive не обновляет шаблон компонента после каждого запроса, если данные не изменились. Это делает ее более эффективной для поддержания соединения без лишней нагрузки на сервер и клиент. Директива особенно полезна при работе с websocket-соединениями или при реализации механизмов "серверного пуша".

Синтаксис

<div wire:poll.keep-alive="methodName">
	...
</div>

По умолчанию интервал между запросами составляет 2 секунды. При необходимости вы можете указать свой интервал в миллисекундах:

<div wire:poll.keep-alive.5000="methodName">
	...
</div>

Если метод не указан, директива будет вызывать метод render компонента:

<div wire:poll.keep-alive>
	...
</div>

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class TaskStatus extends Component
	{
		public $status = 'pending';
		public $progress = 0;
		public $taskId = 1;
		
		public function checkStatus()
		{
			// Simulating background task status check
			if ($this->progress < 100) {
				$this->progress += 10;
				
				if ($this->progress >= 100) {
					$this->status = 'completed';
				}
			}
			
			return $this->status;
		}
		
		public function render()
		{
			return view('livewire.task-status');
		}
	}
?>

<div wire:poll.keep-alive.3000="checkStatus">
	<h3>Task Status</h3>
	<p>Status: {{ $status }}</p>
	<p>Progress: {{ $progress }}%</p>
	<div>
		Progress bar: {{ str_repeat('=', $progress / 10) }}
	</div>
</div>

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

<div>
	<h3>Task Status</h3>
	<p>Status: completed</p>
	<p>Progress: 100%</p>
	<div>
		Progress bar: ==========
	</div>
</div>

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use IlluminateSupportFacadesLog;
	
	class FileUploadMonitor extends Component
	{
		public $uploadId;
		public $isComplete = false;
		public $fileSize = 0;
		public $uploadedSize = 0;
		
		public function mount($uploadId)
		{
			$this->uploadId = $uploadId;
			$this->fileSize = 10245760; // 10MB
		}
		
		public function checkUploadProgress()
		{
			// Simulate upload progress
			if ($this->uploadedSize < $this->fileSize) {
				$this->uploadedSize += 102400; // 100KB per poll
				
				if ($this->uploadedSize >= $this->fileSize) {
					$this->isComplete = true;
					Log::info('Upload completed for ID: ' . $this->uploadId);
				}
			}
			
			return [
				'progress' => round(($this->uploadedSize / $this->fileSize) * 100),
				'uploaded' => $this->uploadedSize,
				'total' => $this->fileSize,
				'complete' => $this->isComplete
			];
		}
		
		public function render()
		{
			return view('livewire.file-upload-monitor');
		}
	}
?>

<div wire:poll.keep-alive.1000="checkUploadProgress">
	<h4>File Upload Monitor</h4>
	
	<div>
		Upload status:
		@if ($isComplete)
			<span>✅ Complete</span>
		@else
			<span>⏳ Uploading...</span>
		@endif
	</div>
	
	<div>
		Progress:
		<div>
			{{ round(($uploadedSize / $fileSize) * 100) }}%
			({{ number_format($uploadedSize / 1024) }}KB / 
			{{ number_format($fileSize / 1024) }}KB)
		</div>
	</div>
	
	@if ($isComplete)
		<div>
			<button wire:click="$reset">
				Upload New File
			</button>
		</div>
	@endif
</div>

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

<div>
	<h4>File Upload Monitor</h4>
	<div>
		Upload status: ✅ Complete
	</div>
	<div>
		Progress: 100% (10000KB / 10000KB)
	</div>
	<div>
		<button>Upload New File</button>
	</div>
</div>

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

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