Hay un caso de uso extremadamente potente que tenemos disponible en Livewire: el Streaming. Para entenderlo de forma sencilla, damos el siguiente concepto:
El streaming es una tecnología que permite la distribución de grandes volúmenes de datos (vídeo, audio, videojuegos o texto) de manera que el usuario puede empezar a consumir el contenido antes de que la descarga se complete.
Seguramente ya estás familiarizado con esto sin saberlo. Cuando ves un vídeo en YouTube o Netflix, no necesitas descargar los 2 GB de la película para empezar a verla; el reproductor va procesando los datos conforme llegan.
El Streaming en la Inteligencia Artificial
Hoy en día, el ejemplo más claro está en las IA como ChatGPT o Gemini. Cuando haces una pregunta, la respuesta no aparece de golpe tras 10 segundos de espera (esquema tradicional de 0% a 100%). En su lugar, vemos cómo la IA escribe palabra por palabra en tiempo real. Eso es streaming: consumir el resultado mientras la tarea aún se está procesando.
Implementación en Livewire 4
En Livewire moderno, utilizar esta tecnología es sorprendentemente directo. Vamos a aterrizar esto con un ejercicio sencillo: un contador que reduce su valor cada segundo.
El esquema tradicional (Sin Streaming)
Si usamos una función normal con un bucle while y un sleep(1), el navegador se quedará "pensando". El usuario verá el número inicial (por ejemplo, 3) y, tras tres segundos de espera, el número final (-1) aparecerá DE GOLPE. Se pierde todo el progreso intermedio.
resources\views\pages\stream\⚡count-down.blade.php
<?php
use App\Ai\Agents\PokemonAgent;
use Laravel\Ai\Streaming\Events\TextDelta;
use Livewire\Component;
new class extends Component
{
public $start = 3;
public function begin()
{
while ($this->start >= 0) {
// Pause for 1 second between numbers...
sleep(1);
// Decrement the counter...
$this->start = $this->start - 1;
};
}
}
?>
<div>
<flux:button wire:click="begin">Start count-down</flux:button>
<h1 class="text-center mt-4">Count: <span>{{ $start }}</span></h1>
</div>El esquema con Streaming
Para habilitar el progreso en tiempo real, utilizamos el método stream(). Aquí tienes los elementos clave de la magia:
$this->stream(
to: 'count',
content: $this->start,
replace: true,
);- El identificador (to): Debes asociar el flujo a un elemento HTML. Por ejemplo, un <span> con un ID o una referencia.
- El contenido (content): Es el dato que estamos enviando en cada iteración del bucle.
- La acción (replace) OPCIONAL: Por defecto, el streaming podría concatenar datos. Al usar replace: true, indicamos que cada nuevo dato debe sustituir al anterior, lo que crea el efecto de un contador que se actualiza.
resources\views\pages\stream\⚡count-down.blade.php
<?php
use App\Ai\Agents\PokemonAgent;
use Laravel\Ai\Streaming\Events\TextDelta;
use Livewire\Component;
new class extends Component
{
public $start = 3;
public function begin()
{
while ($this->start >= 0) {
// Stream the current count to the browser...
$this->stream(
to: 'count',
content: $this->start,
replace: true,
);
// Pause for 1 second between numbers...
sleep(1);
// Decrement the counter...
$this->start = $this->start - 1;
};
}
}
?>
<div>
<flux:button wire:click="begin">Start count-down</flux:button>
<h1 class="text-center mt-4">Count: <span wire:stream="count">{{ $start }}</span></h1>
</div>Al ejecutar el ejercicio anterior, veras que ahora aparece por pantalla 3 2 1 0 -1 es decir, los pasos INTERMEDIOS.
Los Stream son una tecnología clave al igual que el HTTP, WebSockets, etc y que son usados ENORMEMENTE en el desarrollo moderno (en la sección de proyectos, mostramos un uso con un agente de IA).
Lo "extraño" del Streaming: Propiedades vs. Contenido
Un detalle que puede parecer abstracto es qué valor se muestra realmente en pantalla.
- Inicio y Fin: Al empezar y al terminar la función, el componente muestra el valor real de la propiedad definida en la clase (el estado de Livewire clásico).
public $start = 3;
- Durante el proceso: Mientras el flujo de streaming está activo, lo que ves en el navegador es el contenido que envías manualmente a través del método stream:
content: $this->start,
Es como si, por un momento, el navegador ignorara el valor de la variable y solo escuchara lo que el "chorro" de datos le envía. Por eso, si en el contenido sumas un valor arbitrario (como un +10), verás ese número en pantalla aunque la propiedad interna del contador siga siendo diferente.
Aplicaciones Reales: Chatbots y Asistentes
Esta tecnología es el estándar actual para construir asistentes virtuales. En la sección de proyectos del libro, desarrollaremos un Chatbot similar a Gemini. Veremos cómo, al preguntar, el asistente empieza a renderizar fragmentos de la respuesta conforme la API los genera.
Sin el streaming, la experiencia de usuario sería frustrante, obligando a esperar largos periodos frente a una pantalla de carga. Con esto, le damos dinamismo y una sensación de respuesta inmediata a nuestras aplicaciones.