Índice de contenido
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.
Anteriormente vimos como usar los diálogos de confirmación en Laravel Livewire.
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.
Aprendamos a usar el uso de las islas en Laravel Livewire.