Laravel WebSockets: Como utilizar websockets con PHP 🛰

Hace un tiempo hablamos de Laravel WebSockets en el grupo de facebook Hablemos de Laravel y quedaron muchas cosas en el tintero. Así que, en este artículo vamos a ver mas sobre este excelente paquete.

¿Qué es Laravel WebSockets?

Laravel WebSockets es un paquete que nos permite trabajar con sockets utilizando PHP. Nos permite reemplazar servicios de terceros como Pusher o Laravel Echo Server y prescindir de un servidor Nodejs. Además, es muy fácil de utilizar y tiene una documentación realmente completa.

¿Para que sirve?

Laravel WebSocket nos permite establecer una conexión entre el navegador y el servidor donde podemos enviar un mensaje desde el servidor al cliente o viceversa (a diferencia de Ajax que solo nos permite enviar mensajes desde el cliente al servidor), todo esto sin la necesidad de utilizar javascript.

Los web sockets se utilizan normalmente en sitios web o aplicaciones donde el tiempo de respuesta tenga que ser al instante. Por eso es utilizando en chats, actividades de usuarios y notificaciones.

¿Por qué elegir Laravel WebSockets teniendo Pusher o Laravel Echo Server?

Muchas personas están acostumbradas a utilizar Pusher ya que viene integrado en Laravel. Pero tiene sus limitaciones como por ejemplo, el precio.

También tenemos la posibilidad de utilizar Laravel Echo Server pero su implementación es engorrosa y terminamos buscando la configuración correcta en StackOverflow después de algunas horas.

Además, ambas soluciones requieren que tengamos instalado Node.js en nuestro servidor.

En cambio, Laravel-WebSocket es gratis, su configuración es realmente simple y esta construido sobre Ratchet, un paquete de bajo nivel que trabaja con web sockets.

Laravel WebSockets tiene soporte para multi-tenancy, por lo que podemos configurar un único servidor websocket para utilizarlo en muchas aplicaciones diferentes.

No solo eso! Para proteger los mensajes transmitidos por el servidor websocket, el paquete tiene soporte SSL. De esta forma, todo el trafico pasara por HTTPS (si no sabes como configurar HTTPS en toda tu web, mira el articulo de SSL en Apache o SSL en Nginx)

Tal vez también te interese:

Instalar certificado SSL en Apache

laravel nginx ssl

Cómo utilizar Laravel con Docker La Guía Definitiva

Y no solo eso! Este maravilloso paquete viene con un panel de control en tiempo real que nos permite controlar todas nuestras conexiones y transmisiones que ocurren en nuestra aplicación. 👏

Cómo utilizar Laravel WebSockets

Como dijimos, es muy fácil utilizar este paquete ya que se instala y se configura como cualquier otro paquete de Laravel que hayas instalado con Componser.

Instalación

composer require beyondcode/laravel-websockets

A continuación, debes publicar el archivo de configuración.

php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

Si lo deseas, puedes publicar las migraciones del paquete que permite el almacenamiento de información y estadísticas de nuestro servidor websocket.

php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"

Y ejecutas las migraciones.

php artisan migrate

Y por ultimo debemos completar las variables de entorno APP_NAME, PUSHER_APP_ID, PUSHER_APP_KEY, PUSHER_APP_SECRET en nuestro archivo .env.

Pero, ¿por qué completar estas variables si dijimos que Laravel-WebSocket no utiliza Pusher? Esto es porque el paquete utiliza el código de Pusher (como los canales de transmisión) pero no el se servicio. Todos los mensajes son manejados por Ratchet y no por Pusher. Además, si tu proyecto utilizaba Pusher la migración será sin dolores de cabeza. 😉

Si no queres utilizar nada de nada de Pusher o Echo, entonces puedes definir tus propios canales y tendrás el control total de la mensajeria. Para eso, puedes mirar la documentación oficial de Laravel WebSockets.

Una vez que hayas terminado la instalado, puedes iniciar el servidor web socket con un simple comando:

php artisan websockets:serve

Integrar Laravel-WebSocket con Laravel Echo

Al final de tu archivo resources/js/bootstrap.js debes ingresar la siguiente configuración para establecer la comunicación entre el servidor websocket con el cliente.

import Echo from "laravel-echo"

window.Pusher = require('pusher-js');

window.Echo = new Echo({
broadcaster: 'pusher',
key: 'tu-key-pusher',
wsHost: window.location.hostname,
wsPort: 6001,
disableStats: true,
});

Como puedes ver estamos estableciendo disableStats en true para desactivar el envío de estadísticas a Pusher.

Eso es todo! Ahora ya puedes usar todas las funciones de Laravel Echo en combinación con Laravel WebSockets, como Presence Channels , Notifications y Broadcasting de Laravel.

Versión disponible de Laravel

El paquete Laravel-WebSocket fue lanzado a fines del 2018 por lo tanto lo hicieron disponible para la versión de Laravel 5.7 en adelante.

Bonus: Correr servidor web socket automáticamente

Para correr el servidor automáticamente tenemos que tener instalado Supervisor.

# Para Debian o Ubuntu
apt install supervisor

# Para Red Hat o CentOS
yum install supervisor
systemctl enable supervisor

Una vez instalado debemos crear un archivo dentro de /etc/supervisor/conf.d (en Debian o Ubuntu) o en /etc/supervisord.d (para Red Hat o CentOS). Y añade el siguiente contenido.

[program:websockets]
command=/usr/bin/php /home/laravel-echo/laravel-websockets/artisan websockets:serve
numprocs=1
autostart=true
autorestart=true
user=laravel-echo

Ya puedes reiniciar supervisor para que tome la nueva configuración y comience la ejecución.

supervisorctl update
supervisorctl start websockets

Si deseas verificar que esta funcionando, lo puedes hacer con el comando upervisorctl status.

Bonus 2: Acceder al Panel de Control

Para acceder al panel de control del Web Socket debemos ir a la ruta tudominio.com/laravel-websocket de nuestra aplicación. Si deseas modificar esta ruta lo puedes hacer desde el archivo de configuración config/websockets.php.

Conclusión

Laravel-WebSocket es un excelente paquete que nos permite manejar una sola tecnología en nuestro servidor descartando Node.js. Además, el panel de control es excelente y su instalación y configuración son muy fáciles. Si te gusto este artículo, házmelo saber en los comentarios de aquí abajo. Nos vemos en la próxima. 😉🤙