Curso de Laravel

Aprende LARAVEL de una buena vez

Cabecera principal de presentación del curso de Domina Laravel. Desarrolla proyectos web profesionales con PHP y Laravel
gratis
texto

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 1 mes

Foto de JuanDMeGon

Juan David Meza González

JuanDMeGon

Magister, Ingeniero, Desarrollador
Web & Instructor

¡Listo!

En breve recibirás un mensaje de confirmación. Verifica, por si acaso, la carpeta de correo no deseado.

...

Si te parece bien, te enviaré de vez en cuando, mensajes de interés sobre los temas que se tratan en el sitio.

Tu dirección de correo electrónico será almacenada con un interés según el artículo en el que te encuentres.

Por supuesto, puedes cancelar tu suscripción en cualquier momento.