Curso Laravel Livewire - Funcionamiento de las peticiones para sincronizar propiedades y eventos
Ahora vamos a conocer en detalle cómo funciona Livewire; cómo es posible que se puedan comunicar ambos lados (cliente y servidor) de una manera “directa”.
Para este ejemplo, coloca de manera momentánea en tu formulario de categoría:
<label for="">Title</label>
<input type="text" wire:model.live='title'>Con el cual, cada vez que escribamos y no solamente cuando usamos un evento, se actualizará el estado de la propiedad $title.
Para esto, vamos a usar la consola de desarrolladores web del navegador y lo colocas en el apartado de “Network”.
Ahora, vamos a trabajar en el componente de Save.php y vamos escribiendo lentamente en cualquiera de los campos de texto wire:model, y veremos:
Si hicistes bien el ejercicio (escribir lentamente) verás que se realiza una petición por cada letra; estas peticiones es la forma en la cual, Livewire mantiene actualizado las propiedades definidas en la clase componente, con los campos referenciados como wire:model; en base a estas peticiones que realiza desde el cliente al servidor para mantener estas referencias sincronizadas.
Este control de peticiones que varía el funcionamiento según el tipo de directiva que se está empleando, se deben al decorador livewireScripts qué hay que colocar cuando queremos emplear Livewire; en esencia, el tipo de control que tratamos anteriormente.
Este decorador, junto con el de @livewireStyles lo tenemos definido por defecto en el Layout de layout/app.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
***
@livewireStyles
***
@livewireScripts
</body>
</html>Para probar esto, quita el decorador de script e intenta emplear cualquier directiva de Livewire; por ejemplo, la de submit, y verás que ya no funciona.
El decorador de livewireScripts permite inicializar todos los scripts para permitir trabajar con Livewire desde el lado del cliente, y esto incluye, el envío de las actualizaciones del wire:model, eventos clicks, submits, etc; el livewireScripts renderiza algo como:
<script data-turbo-eval="false" data-turbolinks-eval="false" >
if (window.livewire) {
console.warn('Livewire: It looks like Livewire\'s @livewireScripts JavaScript assets have already been loaded. Make sure you aren\'t loading them twice.')
}
window.livewire = new Livewire();
window.livewire.devTools(true);
// ***
</script>Importante notar que, con Livewire activado, puedes usar el wire:model como si fuera una propiedad reactiva en Vue (esta afirmación la hacemos como una manera de entender cómo funciona Livewire, aunque es importante aclarar que Livewire no es reactivo); es decir, mediante la propiedad de $title, si la definimos en la vista del componente:
<div>
<form wire:submit.prevent="submit">
<label for="">Título</label>
<h3 class="text-xl">***{{$title}}***</h3>
<input type="text" wire:model="title">
<label for="">Texto</label>
<input type="text" wire:model="text">
<button type="submit">Enviar</button>
</form>
</div>Verás cuando escribas algo en el wire:model:
Aparece reflejado el contenido, y de esta forma puedes entender el funcionamiento básico de Livewire para tener actualizadas las propiedades, esta característica de actualización automática, es decir, cada vez que escribíamos en un campo, se actualizaba en el servidor en base una petición, era como funcionaba Livewire hasta la versión 2, en la versión 3 se desactivó esta función por defecto al hacer demasiadas peticiones al servidor innecesarias, ya que en la mayoría de los casos, vamos a querer actualizar los atributos es al ocurrir algún evento, como click o envío de un formulario.
Transcripción del vídeo
Aquí quiero hacer una pequeña pausa y mencionar o practicar en una clase aparte lo que es un poco Cómo funcionan las peticiones para la actualización entre comillas full duplex que tenemos por aquí el que era la que te comentaba antes entiéndase que si actualizamos aquí en Blade o aquí en el cliente pero es Blade se actualiza en el servidor entiendas en la clase componente y viceversa es decir actualizamos clase componente se actualiza también por acá ya es algo que hicimos un poco pero me parece importante hacer una clase específicapara esto por si tienes alguna duda y también practicar aquí un poquito ya que esto era más fácil de explicar en las versiones anteriores de lare por la sencilla razón de que era automático pero por aquí ya no es entonces para que podamos ver el ejercicio ya que la idea es poder ver aquí las peticiones a medida que se actualiza vamos a colocar aquí al menos de manera momentánea justamente por acá punto live:
<input type="text" wire:model.live='title'>Lo que significa esto es que ahora se va a actualizar en vivo es decir cada vez que escribamos se va a actualizar en el servidor entonces por aquí vas a ver una petición al servidor tal cual puedes ver el Por qué hago esto es un poco lo comentado porque de esta forma me parece más sencillo explicarte el funcionamiento y bueno básicamente Cómo otra vez funciona el full duplex para la actualización en este caso de este campo pero lo mismo se aplica a este campo o cualquier otro campo que tú quieras colocar es decir a las propiedades que tenemos aquí definidas a nivel de clase y que estamos empleando mediante un entre comillas v-model de Vue que tenemos acá ya esto no sucedería con este para que también entiendas un poquito el sentido Fíjate que aquí no actualiza y aquí sí Entonces por aquí puedes ver O puedes imprimir también el del título como hicimos antes por aquí colocamos la impresión del título voy a recargar aquí:
<label for="">Title</label>
<input type="text" wire:model.live='title'>Ya que fue un cambio en el cliente y por aquí van apareciendo los cambios Claro en el servidor se vería si ahí tuviéramos algún proceso activo en este caso es cuando enviamos aquí el mensaje que vemos ahí el título y esto no ha cambiado en absoluto coloco un voy a colocar un debug eso no cambiado en absoluto pero ahora que lo tenemos definido en vivo me parece una forma más sencilla de entenderlo Ya que antes para hacer esta esta actualización se hacía era cuando enviamos el evento Ahora aquí es cuando escribimos esto obviamente no es recomendado tener esta actualización así así antes funcionaba.
Por defecto en Livewire en su versión 1 y 2 que era cada vez que escribíamos se enviaba una petición al servidor y cuando no queríamos este comportamiento teníamos que colocar ahí algún atributo ahorita no recuerdo cuál era pero por l razones esto lo cambiaron y ahora por defecto como te digo se encuentra suspendida la actualización en el servidor hasta que nosotros indiquemos a fuerzas que lo queremos en caso de que sea necesario ya que otra vez el ejemplo que te comentaba antes Si tienes por ejemplo 1000 clientes conectados y cada uno de ellos escriben promedio no sé 100 veces y tienes esto aquí activo Entonces sería 1000 por serían demasiadas peticiones al servidor y pudieras Obviamente colapsar el mismo Entonces para evitar eso es que lo desactivaron en la versión 3 a partir de la versión 3 pero un poco esto como te comentaba Entonces esto es lo que te explico un poquito por acá que abres la pestaña de Network coloca aquí al Live para hacer el ejercicio y ponte a ver aquí las peticiones Ya que en cada una de estas peticiones lo que está haciendo es actualizar el estado de la aplicación entiendas el estado como lo que tenemos en en la clase componente y también lo que tenemos en Blade para hacer ahí lo que te varias veces la comunicación full duplex y este ejercicio es más o menos lo que hemos hecho hasta este punto entonces bueno por aquí puedes explorar el objeto enviado Aunque puede a veces ser un poco difícil de ver ya que por aquí de estar mira aquí está la Data Fíjate que le pasa el título también le pasa el text ya más adelante también vamos a ver otras opciones para actualizar por ejemplo determinado un tiempo o solamente algunas propiedades etcétera Pero al menos de momento el funcionamiento básico es pasar como que todo el objeto tal cual puedes ver para mantener justamente esa actualización y por supuesto ya le pasa cosas de seguridad para que sepa que es válido y no es otra cosa o que llegó completo Entonces es lo que puedes ver por acá el el snapshot tal cual es ser el nombre que estaba buscando y ese es el funcionamiento básico esto mismo si nos fijamos cuando damos aquí un s que cuando estamos enviando una petición al servidor es lo mismo que deberíamos de ver.
Bueno voy a quitarle ese bendito debug para que sea más fácil de entender por aquí escribo otra vez un poco lo mismo Bueno fíjate que se escribió bastante rápido y ahí como un delate entonces aquí puedes ver lo mismo que veíamos antes el snapshot Y si damos un s Fíjate que es exactamente lo mismo que era el punto a que yo quería llegar claro cambian algunas cositas Por ejemplo aquí hay un método aquí no sería ningún método sino ya sería interno a livewire pero en esencia el snapshot es lo que tenemos por acá viene siendo Exactamente lo mismo le pasa el texto le pasa el título y todo lo demás ya que ese es el funcionamiento básico del livewire ese enviar este tipo de peticiones y Te pudieras preguntar cómo demonios hace eso bueno recordemos que por aquí en algún lado de la vida tenemos un template una plantilla maestra que realmente no la hemos explorado mucho para ver dónde la teníamos la tenemos aquí en resources views era components layouts bueno mi caso era este puede que en tu caso sea la que tenemos aquí afuera puede que sea esta Recuerda que al inicio al menos yo tuve un problema con el error que no encontraba el template.
Desactivar JS de Livewire
Entonces lo tuve que generar y justamente esta etiqueta que tenemos aquí la de script esto también lo puedes ver en los pasos de instalación manual del Livewire en los cuales tienes que colocar estas etiquetas para que puedas emplear estas características del livewire con el snot y es algo que esto se traduce si le damos aquí el código fuente a ver ver código fuente Aquí está Dónde está el Script para ver aja Aquí está Me parece que sería este eso lo hace automáticamente todo esto mediante este Script que tenemos aquí y arriba está el css Pero bueno css Y no tienes ninguna duda Pero si lo quitamos Este es el Style para ver dónde está el Aquí está si lo quitamos para ver era esta que estamos empleando es el otro voy a quitar todo esto a ver porque a veces tengo dudas Yo también en esto Ah no para ver si es este voy a quitar estos aquí también Bueno aquí hice una pausa lo limpié un poco más por alguna razón lo sigue inyectando aquí es este este es el que nos está aquí haciendo la actualización tal cual puedes ver entonces hubiera que ver De dónde la está tomando de que este el el Blade y no lo estoy inyectando bueno está un poquito extraño en mi caso porque realmente no debería de colocar esa etiqueta ahí aquí puedes ver que colocó un mensaje al final y bueno mágicamente lo coloca no sé si hay una especie de cacha extraña por ahí pero es esa etiqueta de l Script la que está trabajando de igual manera por aquí pudiéramos forzarlo un poco más ya que aparece Entonces lo quito aquí de manera manual venimos aquí a Network no sé si queda cargado vamos a ver si funciona ya puedes ver que no funciona ya no funciona aquí la actualización y es justamente eso lo que hace esta etiqueta de Script que tenemos acá habilitar todo lo que sería el jdc del livewire seguramente haya algún mw por ahí pero bueno tampoco hace falta quitarlo pero era para más o menos ponerte contexto de cómo funciona todo esto entonces bueno eso eran básicamente las pruebas que quería realizar para que entendieras el funcionamiento de livewire que es en pocas palabras Ese es el truco como quien dice bajo la manta que es enviar peticiones servidor para estar actualizando el estado es así de simple así que sin más que decir vamos a la siguiente clase
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter