Hace unos días conocíamos Mercure. Hicimos una breve introducción al protocolo abierto de Les-Tilleuls.coop que permite enviar actualizaciones de datos a navegadores web en tiempo real.

Como sabes, uno de los  productos típicos con estas características y funcionalidades es el chat.

El Chat es un método de comunicación digital en el que necesitas realizar conversaciones de forma instantánea.

Si tu aplicación ya tiene un chat implementado, es muy probable que la API de Websocket juegue un papel importante en tus procesos de desarrollo. Sin embargo, Mercure también tiene mucho que decir en este sentido.

Es por ello que hoy quiero desarrollar contigo un sencillo chat utilizando Symfony, algo de Vanilla JavaScript y Mercure. Me he inspirado el repositorio de Stefpe, para hacerlo. Así que dale estrellas, ¡por favor!

Espero que este artículo y aplicación te ayuden a seguir conociendo los fundamentos  de Mercure y a desarrollar productos digitales entusiasmantes para tus clientes, con tu tecnología de siempre en el backend.

Proyecto Symfony

Cómo vimos en la sesión anterior, necesitas configurar primero un proyecto de Symfony para preparar el entorno de backend para tu aplicación. Docker es tu mejor aliado ahora mismo, por tanto, solamente tienes que seguir las indicaciones en el post anterior, y tendrás un servidor funcionando, con Mercure configurado y algunos controladores de Symfony programados.

¿Y el código fuente?

Si necesitas acceso al código fuente de este post, puedes tener acceso al fork del repositorio de stefan.poeltl aquí. Recuerda que para que funcione correctamente, el Docker daemon debe estar ejecutándose en tu máquina.

Si no quieres seguir el artículo de la semana pasada, puedes seguir las instrucciones de Stefan que te comparto en este artículo. También las puedes encontrar en el  repositorio de Github para configurar Symfony mediante Docker.

En la consola de tu máquina ejecutas el siguiente comando:

docker run --rm -it -v $PWD:/app composer create-project symfony/website-skeleton symfony_mercure

Si todo ha ido bien, y si lo necesitas, ahora sólo tienes que ajustar la configuración de base de datos, editando los ficheros .env, y doctrine.yaml.

Después necesitas crear, si no existe, un fichero docker-compose.yml y añadir el siguiente contenido:

docker-compose.yml

En el artículo anterior vimos cómo instalar el componente Mercure de Symfony. Cuando lo instalas - mediante “composer require symfony/mercure” - en tu fichero de configuración de servicios  de Symfony "config/services.yaml" se añaden dos variables de entorno:

parametros .env

También como vimos en el post anterior, “MERCURE_PUBLISH_URL”, como el nombre indica sirve para definir cómo se puede acceder al Hub de Mercure desde una aplicación Symfony, y MERCURE_JWT_SECRET es tu clave secreta de JWT. Su has seguido hasta aquí, estos valores ya deben estar ajustados en tu fichero .env.

Servicios y Controladores para la interacción del chat

Además del servicio Publisher, necesitarás también suscribir a las actualizaciones, por tanto debes crear un nuevo Controlador para un Suscriptor (Subscriber) mediante el comando de Symfony:

php bin/console make:controller Chat

Gracias a este comando, Symfony ha creado por ti un nuevo controlador llamado Chat y una nueva vista de forma automática.

Añadimos el camino /publish/{topic} de Publisher y el tópico del subscriptor. 

Utilizaremos la vista para suscribir al Hub de Mercure añadiendo, y utilizando JavaScript y EventSource. Ajusta el fichero "templates/chat/index.html.twig" para que refleje lo siguiente:

templates/chat/index.html.twig

Cómo puedes ver en el código de JavaScript anterior, lo que el script hace es enviar peticiones POST a la ruta "/publish/{topic}"  del Publisher desde el formulario.

Ejecutar y probar el Chat

Si todo ha ido bien, ¡a partir de este momento ya tienes un chat básico funcionando! Para probarlo, primero ejecutas “docker-compose up”, para compilar, (re)crear, iniciar y conectar al contenedor tu servicio. Después, puedes abrir dos ventanas en tu navegador preferido con la ruta del chat : http://localhost:8080/chat, y ya puedes empezar una conversación en tiempo real:

Ejemplo de nuestro nuevo chat funcionado

Conclusión

¡Y eso todo! ¿Dificil? Es obvio que esta solución es interesante si no quieres tener JavaScript en el Backend, y/o te cuesta entender Websockets. Lo cierto es que a partir de este momento tienes preparado un sistema para tu propio servicio de chat, desarrollado en Symfony y Mercure.

Obviamente que te queda algún trabajo por delante - estilos, ID de los últimos eventos, localStorage, usuarios, etc…- si quieres implementar esta aplicación en producción. Si necesitas ayuda, ¡ya sabes donde estamos! ¡No dudes en contactarnos!

¿Crees que Mercure es realmente útil?

Foto: Image by skeeze from Pixabay

Fuentes:

Compartir es construir