Antes de comenzar...
Publica tu servidor de Laravel WebSockets en un servidor creado en Clouding
En un artículo anterior exploramos cómo desplegar completamente desde cero nuestro propio servidor en Clouding.io para publicar allí un proyecto Laravel. Pues bien, en esta ocasión vamos a hablar de un tipo particular de proyecto Laravel para establecer conexiones en tiempo real con Laravel WebSockets.
El foco principal esta vez será el proyecto de Laravel WebSockets en sí, pero para ello primero necesitamos un servidor con todas las herramientas mínimas instaladas y configuradas.
Para los detalles de todo el proceso de despliegue y preparación de un servidor para proyectos Laravel, sigue este artículo. Puedes omitir el proceso de despliegue del proyecto Laravel mostrado en dicho artículo, pues ahora vamos a desplegar otro tipo de proyecto.
Una vez tengas creado y desplegado tu servidor en Clouding, asegúrate de tener todo. En este punto, necesitas, como mínimo, Nginx, PHP y, Composer. Si tienes todo, continuemos:
Preparando y publicando el proyecto de Laravel WebSockets en tu servidor
En este preciso momento, puedes copiar la dirección IP asignada a tu servidor desde el panel de control de Clouding y, al acceder a esa IP desde tu navegador, deberás poder ver el mensaje tradicional de Nginx "Welcome to Nginx" lo cual es señal de que todo salió bien. Ahora, con tu servidor creado y una dirección IP pública, también puedes acceder al mismo por medio de SSH.
Usualmente, los sistemas operativos actuales permiten hacer uso de un comando llamado "ssh" (sí, igual que el protocolo) para establecer conexiones seguras (esto incluye a Windows, a partir de la versión 10). En el caso de que estés en Windows y este comando no sea reconocido en tu consola de comandos, entonces dale una mirada a este video para resolverlo.
Conéctate a tu servidor
Es momento de usar el comando sshdesde nuestra consola (ya sea iTerm, PowerShell, CMD, CMDER, etc. según tu sistema operativo) y ejecutar ssh [email protected]. La IP aparece en el panel del sitio o incluso te llegó a tu correo electrónico, junto con la contraseña. Si te preguntas, debemos usar root, porque es el usuario que se crea por defecto en los sistemas basados en Linux.
Desplegando el proyecto de Laravel WebSockets
Por fines prácticos, ya he creado un proyecto con todo preparado y configurado que podrías desplegar en tu servidor para probar y así tendrás el mismo código base para seguir el artículo. Puedes encontrarlo en el repositorio del proyecto.
Por otro lado, si prefieres hacer todo por cuenta propia, esencialmente, lo que debes hacer es crear un proyecto Laravel tradicional y luego agregarle el paquete de Laravel WebSockets con sus archivos de configuración. Puedes encontrar los detalles del proceso en la documentación oficial de Laravel WebSockets. En cuanto tengas el proyecto creado, publícalo en un repositorio de git en línea (GitHub es habitual) y continúa para sincronizarlo en tu VPS.
Ya conociendo el repositorio con el proyecto, vamos a obtener su estructura, usando el comand git, desde el servidor:
git clone https://github.com/JuanDMeGon/servidor-websockets-realtime-con-laravel.git /var/www/laravel-websockets
Lo anterior clonará todo el contenido del proyecto de Laravel WebSockets creado al interior del servidor en Clouding, en la carpeta /var/www/laravel-websockets.
Accede por medio de cd, a la carpeta recién creada del proyecto para realizar la instalación de todas las dependencias con composer:
cd /var/www/laravel-websockets
composer install --no-dev
Ahora, hay que asegurarse de generar el archivo de entorno (.env) junto con asignar los permisos necesarios para que la aplicación funcione correctamente y, luego, generar la llave de la aplicación así:
cp .env.example .env
chown -R www-data storage
chown -R www-data bootstrap/cache
php artisan key:generate
Finalmente, debes configurar el entorno para conectarse a una base de datos (usaremos SQLite para que sea sencillo), y sea adecuado para un entorno de producción, además de indicar las credenciales que usará Laravel WebSockets para autenticar los servicios que se conecten. Para ello, algunas de las entradas en tu archivo .env deben lucir así:
APP_ENV=production
APP_DEBUG=false
DB_CONNECTION=sqlite
#Comenta las siguientes líneas con un #
#DB_HOST=127.0.0.1
#DB_PORT=3306
#DB_DATABASE=laravel
#DB_USERNAME=root
#DB_PASSWORD=
#Las credenciales para Laravel WebSockets, provienen del Pusher
PUSHER_APP_ID=123456
PUSHER_APP_KEY=some_key
PUSHER_APP_SECRET=some_secret
En cuanto tengas el entorno configurado, es necesario migrar la base de datos en el archivo database.sqlite que debes crear al interior de la carpeta database del proyecto, con los siguientes comandos:
touch database/database.sqlite
php artisan migrate --force
Hecho todo lo anterior, deberías poder ejecutar el servidor de Laravel WebSockets directamente en la consola y comprobar que todo funcione. Para ello deberías poder ejecutar lo siguiente y ver un mensaje que diga "Starting the WebSocket server on port 6001..." y ningún error.
php artisan websockets:serve
Una vez compruebes el comando anterior, puedes detenerlo presionando Ctrl + C y deberás asegurarte de que dicho comando esté siempre en ejecución. Para ello, usarás supervisor, así que vamos con ello.
Mantén el servidor de Laravel WebSockets corriendo con Supervisor
Supervisor, es un paquete que puedes instalar con apt y que se encargará de mantener en ejecución los comandos que le indiques. En este caso nos será de gran utilidad para mantener en ejecución el comando de Laravel WebSockets. Así que ejecuta los siguientes comandos para instalarlo y luego crear el archivo de configuración para el proyecto.
apt install supervisor -y
nano /etc/supervisor/conf.d/laravel-websockets.conf
Una vez tengas abierto ese archivo, allí pondrás las instrucciones para que el domando de Laravel WebSockets esté siempre en ejecución.
[program:laravel_websockets]
command=php /var/www/laravel-websockets/artisan websockets:serve
numprocs=1
autostart=true
autorestart=true
Asegúrate de guardar los cambios en el archivo y, finalmente, debes indicarle a supervisor que reconozca ese nuevo proceso y se haga cargo. Para ello, ejecuta las siguientes instrucciones.
supervisorctl reread
supervisorctl update
#Este podría dar error si ya se ha iniciado el proceso
supervisorctl start laravel_websockets
Con lo anterior, si ejecutas supervisorctl status, debería indicarte que un proceso llamado laravel_websockets tiene como estado RUNNING.
Muy bien. En este punto, ya está todo listo para configurar el servidor web para que las peticiones tanto a la aplicación web como a los WebSockets sean atendidas por Nginx.
Configurado Nginx para servir el proyecto de Laravel WebSockets
Nginx es un servidor web que nos permitirá dos cosas importantes para este proyecto. La primera, será atender las peticiones HTTP regulares a nuestro proyecto. La segunda, atender aquellas peticiones que requieran conexiones por medio de WebSockets a la aplicación en una ubicación específica. Lo podrás hacer por facilidad, en el archivo de configuración del sitio por defecto de Nginx o en el sitio que ya tengas configurado para ello.
# Abre el archivo de configuración del sitio
nano /etc/nginx/sites-available/default
# Con esta configuración
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/laravel-websockets/public;
index index.php;
server_name _;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
}
location /app {
proxy_pass http://127.0.0.1:6001;
proxy_read_timeout 60;
proxy_connect_timeout 60;
proxy_redirect off;
# Allow the use of websockets
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
Con la configuración anterior, tu servidor Nginx atenderá las peticiones HTTP regulares y, además, las peticiones enviadas a /app serán dirigidas al servicio de Laravel WebSockets que está corriendo de forma local en el puerto 6001.
Hecho lo anterior, ya está todo listo para comprobar el funcionamiento del servidor de Laravel WebSockets.
Comprobando Laravel WebSockets con Postman
En versiones recientes, Postman permite realizar conexiones a WebSockets. Puedes encontrar los detalles de cómo hacerlo acá.
Esencialmente, si envías la petición de conexión a la dirección IP del servidor, seguido por /app/llave_configurada deberá indicarte una conexión establecida. Una conexión con el protocolo WS://, a la dirección siguiente, con base a la configuración indicada en este artículo, debería funcionar:
ws://93.189.91.137/app/some_key
Si lo anterior funciona, ya podrás entonces conectarte por medio de Laravel Echo o cualquier otro cliente de WebSockets para transmitir mensajes en tiempo real.
Eso ha sido todo :) Recuerda que puedes seguir este mismo proceso y comprobar detalles siguiendo el video acá. Adicionalmente, no olvides de crear tu cuenta en Clouding y obtener ese bono de 5€ que te permitirá probar las funciones de tu servidor y tus proyectos sin costo alguno.
Déjame tus comentarios y sugerencias, espero poder seguir agregando artículos y actualizaciones a este mismo con base a los comentarios.
La última actualización de este artículo fue hace 2 años
