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

Директива wire:stream используется для потоковой передачи данных от сервера к клиенту в процессе выполнения метода компонента. Она вешается на контейнерный элемент и связывает его с методом, который отправляет данные частями через поток. Это особенно полезно при работе с большими объемами данных, длительными процессами или генерацией контента в реальном времени.

В значении директивы передается имя публичного метода компонента. Внутри метода необходимо вызывать метод stream для отправки каждой порции данных. Передаваемые данные могут быть любого типа: строки, числа, массивы, HTML-код и т.д.

Синтаксис

<div wire:stream="methodName">
	{{-- Data will be inserted here --}}
</div>

Пример

Давайте создадим компонент, который выводит числа от 1 до 10 с задержкой в 1 секунду между каждым числом:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesOn;
	
	class StreamExample extends Component
	{
		#[On('start-stream')]
		public function startStream()
		{
			for ($i = 1; $i <= 10; $i++) {
				sleep(1);
				$this->stream('num', $i);
			}
		}
		
		public function render()
		{
			return view('livewire.stream-example');
		}
	}
?>

<div>
	<button wire:click="$dispatch('start-stream')">
		Start Stream
	</button>
	<div wire:stream="startStream">
	</div>
</div>

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

<div>
	<button>Start Stream</button>
	<div>1 2 3 4 5 6 7 8 9 10</div>
</div>

Пример

Давайте передадим в поток HTML-код для создания списка элементов в реальном времени:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesOn;
	
	class StreamList extends Component
	{
		#[On('generate-list')]
		public function generateList()
		{
			$items = ['a', 'b', 'c', 'd', 'e'];
			
			foreach ($items as $item) {
				sleep(1);
				$this->stream('list', '<li>' . $item . '</li>');
			}
		}
		
		public function render()
		{
			return view('livewire.stream-list');
		}
	}
?>

<div>
	<button wire:click="$dispatch('generate-list')">
		Generate List
	</button>
	<ul wire:stream="generateList">
	</ul>
</div>

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

<div>
	<button>Generate List</button>
	<ul>
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
		<li>e</li>
	</ul>
</div>

Пример

Давайте используем поток для обновления нескольких областей страницы одновременно:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesOn;
	
	class StreamMultiple extends Component
	{
		public $progress = 0;
		public $status = 'Waiting...';
		
		#[On('start-process')]
		public function startProcess()
		{
			for ($i = 1; $i <= 5; $i++) {
				sleep(1);
				$this->progress = $i * 20;
				$this->status = 'Processing step ' . $i;
				
				$this->stream('progress', $this->progress);
				$this->stream('status', $this->status);
			}
			
			$this->stream('status', 'Completed!');
		}
		
		public function render()
		{
			return view('livewire.stream-multiple');
		}
	}
?>

<div>
	<button wire:click="$dispatch('start-process')">
		Start Process
	</button>
	<div>
		Progress: <span wire:stream="startProcess" id="progress">0%</span>
	</div>
	<div>
		Status: <span wire:stream="startProcess" id="status">Waiting...</span>
	</div>
</div>

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

<div>
	<button>Start Process</button>
	<div>Progress: 100%</div>
	<div>Status: Completed!</div>
</div>

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

директиву wire:poll,
которая автоматически опрашивает сервер через заданные интервалы времени
директиву wire:loading,
которая показывает элементы во время выполнения запросов к серверу
директиву wire:click,
которая вызывает метод компонента при клике на элемент
директиву wire:model,
которая связывает поле ввода со свойством компонента