Puede suceder que en ciertas ocasiones necesitemos que la información se actualice sola; puede ser un chat, el relato de un partido de fútbol, las publicaciones de una red social, etc. Porque claro, no sería de mucha utilidad para el usuario si éste tuviese que recargar la página manualmente para ver actualizaciones.
Por ejemplo si quisiéramos ver desde un panel los usuarios que se van registrando en ese momento:
Pero justo otra persona crea una cuenta, entonces tendríamos que recargar la página todo el tiempo para ver los últimos usuarios registrados.
Supongamos que tenemos una lista de usuarios en un foreach:
<tbody>
@foreach ($users as $user)
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
<td class="px-6 py-4">
{{ $user->id }}
</td>
<th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{{ $user->name }}
</th>
<td class="px-6 py-4">
{{ $user->email }}
</td>
</tr>
@endforeach
</tbody>Ahora queremos que cada cierto tiempo este bloque de código se actualice solo, podemos usar la directiva: wire:poll:
<tbody wire:poll>
<!-- Resto del código -->
</tbody>Entonces si por ejemplo desde otra ventana cambiamos la información de un usuario, podemos ver estas actualizaciones al instante:
Aclarar varias cosas:
Los cambios no son en tiempo real, como Socket IO en Node.js. Sino que cada cierto tiempo se refrescará el bloque de código para mostrar posibles actualizaciones (setInterval)
Además por defecto este cambio se realizará cada 2 segundos, lo cual no siempre es una buen idea, de modo que genera un consumo excesivo de nuestro servidor.
Podemos cambiar este comportamiento:
<tbody wire:poll.10000ms>
<!-- Resto del código -->
</tbody>En este último caso comfiguramos el tiempo a 10.000 milisegundos, es decir 10 segundos.
Para más información podés visitar la página de Livewire: