wire:poll

El sondeo es una técnica utilizada en las aplicaciones web para “sondear” al servidor (enviar peticiones a intervalos regulares) en busca de actualizaciones. Es una forma sencilla de mantener una página actualizada sin necesidad de una tecnología más sofisticada como WebSockets.

Uso básico

Usar polling dentro de Livewire es tan simple como añadir wire:poll a un elemento.

A continuación se muestra un ejemplo de un componente SubscriberCount que muestra el recuento de suscriptores de un usuario:

<?php

namespace App\Livewire;

use Illuminate\Support\Facades\Auth;
use Livewire\Component;

class SubscriberCount extends Component
{
    public function render()
    {
        return view('livewire.subscriber-count', [
            'count' => Auth::user()->subscribers->count(),
        ]);
    }
}

<div wire:poll>
    Subscriptores: {{ $count }}
</div>

Normalmente, este componente mostraría el recuento de suscriptores del usuario y nunca se actualizaría hasta que se actualizara la página. Sin embargo, debido a wire:poll en la plantilla del componente, este componente se actualizará cada 2,5 segundos, manteniendo el recuento de suscriptores actualizado.

También puede especificar una acción que se dispare en el intervalo de sondeo pasando un valor a wire:poll:

<div wire:poll="refreshSubscribers">
    Subscriptores: {{ $count }}
</div>

Ahora, el método refreshSubscribers() del componente será llamado cada 2,5 segundos.

Control de tiempo

El principal inconveniente del sondeo es que puede consumir muchos recursos. Si tiene mil visitantes en una página que utiliza polling, se lanzarán mil peticiones de red cada 2,5 segundos.

La mejor manera de reducir las peticiones en este escenario es simplemente alargar el intervalo de sondeo.

Puedes controlar manualmente la frecuencia con la que el componente realizará el sondeo añadiendo la duración deseada a wire:poll de esta forma:

<div wire:poll.15s> <!-- En segundos... -->

<div wire:poll.15000ms> <!-- En milisegundos... -->

Aceleración en segundo plano

Para reducir aún más las peticiones al servidor, Livewire acelera automáticamente el sondeo cuando una página está en segundo plano. Por ejemplo, si un usuario mantiene una página abierta en otra pestaña del navegador, Livewire reducirá el número de peticiones de sondeo en un 95% hasta que el usuario vuelva a visitar la pestaña.

Si desea evitar este comportamiento y mantener el sondeo de forma continua, incluso cuando una pestaña está en segundo plano, puede añadir el modificador .keep-alive a wire:poll:

<div wire:poll.keep-alive>

Viewport throttling

Otra medida que puede tomar para sondear sólo cuando sea necesario, es añadir el modificador .visible a wire:poll. El modificador .visible indica a Livewire que sólo sondee el componente cuando sea visible en la página:

<div wire:poll.visible>

Si un componente que utiliza wire:visible está en la parte inferior de una página larga, no empezará a sondear hasta que el usuario lo desplace dentro de la ventana gráfica. Cuando el usuario se desplace, dejará de sondear de nuevo.