Laravel e WebSocket: l'ambiente di sviluppo

Le applicazioni di chat in tempo reale stanno diventando sempre più popolari grazie alla loro capacità di fornire comunicazioni immediate tra gli utenti. Con Laravel, un potente framework PHP, e WebSocket, una tecnologia che permette una comunicazione bidirezionale tra il client e il server, possiamo creare una chat performante e reattiva.

In questo tutorial vi guideremo passo dopo passo attraverso il processo di configurazione di Laravel e WebSocket, la creazione dei modelli e dei controller necessari e l'implementazione del frontend per la nostra applicazione. Al termine di questa guida avrete una comprensione chiara di come integrare WebSocket in un'applicazione Laravel per sviluppare funzionalità di chat in tempo reale. Prepariamoci a entrare nel mondo della comunicazione istantanea e a costruire la nostra chat!

Requisiti tecnici

Per seguire questo tutorial su come realizzare una chat in tempo reale utilizzando Laravel e WebSocket è necessario avere una buona conoscenza di alcune tecnologie e strumenti. È importante che tu abbia familiarità con Laravel, inclusi concetti come routing, controller, modelli e migrazioni.

Oltre a Laravel, dovresti avere competenze solide in HTML e CSS per strutturare e stilizzare il frontend dell'applicazione. La conoscenza di JavaScript è poi essenziale poiché utilizzeremo WebSocket e dovrai essere a tuo agio con la manipolazione del DOM e la gestione degli eventi.

Assicurati di avere un ambiente di sviluppo configurato con PHP, Composer e Laravel installati, oltre a Node.js ed npm per gestire le dipendenze del progetto e configurare WebSocket. Anche se non è strettamente necessario, avere una comprensione di base di come funzionano i WebSocket può essere utile per seguire meglio le spiegazioni e il codice.

Scarica poi un web server locale come, ad esempio, Xampp. Con queste competenze e un ambiente di sviluppo pronto all'uso sarai in grado di seguire il tutorial e costruire una chat in tempo reale con Laravel e WebSocket.

Scaricare la giusta versione di Laravel

In questo caso utilizzeremo la versione 10 di Laravel, e non la più recente, in quanto ad oggi non esiste un package WebSocket stabile per quest'ultima, in futuro aggiorneremo la guida.

Prima di procedere assicurati di avere Composer installato. Apri il tuo IDE preferito, ad esempio Visual Studio Code, e avvia il terminale integrato. Fallo puntare all'interno della folder htdocs sotto C://xampp (anche se in seguito dockerizzeremo il progetto) e digita:

composer create-project laravel/laravel:^10.0 appchat

Spostati poi nella folder del progetto con cd:

appchat

quindi prova a lanciare l'istruzione:

php artisan serve

In caso di problemi apri il file .env e modifica la parte relativa al database come di seguito:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=appchat_db
DB_USERNAME=root
DB_PASSWORD=

Dove dovrai prima crearti il database, nel nostro caso appchat_db.

Come anticipato, in seguito dockerizzeremo il progetto, quindi diciamo che al momento si tratta di una configurazione provvisoria.

Preparare i file per la dockerizzazione

La nostra intenzione è quella di utilizzare Docker per far funzionare l'intero progetto, se non sai cosa è Docker o come dockerizzare Laravel ti invito a leggere questa guida.

All'intero della root del progetto crea la folder Docker ed al suo interno il file entrypoint.sh con il seguente contenuto:

#!/bin/bash
<if [ ! -f "vendor/autoload.php" ]; then
    composer install --no-progress --no-interaction
fi
if [ ! -f ".env" ]; then
    echo "Creating env file for env $APP_ENV"
    cp .env.example .env
else
    echo "env file exists"
fi
php artisan migrate
php artisan key:generate
php artisan cache:clear
php artisan config:clear
php artisan route:clear
php artisan serve --port=$PORT --host=0.0.0.0 --env=.env>

Sempre nella root cera il file docker-compose.yaml:

version: "3.9"
<version: "3.9"
services:
  # PHP services
  php:
    build:
      context: .
      target: php
      args:
        - APP_ENV=${APP_ENV}
    environment:
      - APP_ENV=${APP_ENV}
      - CONTAINER_ROLE=app
    working_dir: /var/www/
    volumes:
      - ./:/var/www
    ports:
      - 8000:8000
    depends_on:
      - database
  # Database service
  database:
    image: mysql:latest
    ports:
      - "3306:3306"
    environment:
      - MYSQL_DATABASE=${DB_DATABASE}
      - MYSQL_PASSWORD=${DB_PASSWORD}
      - MYSQL_ROOT_PASSWORD=${DB_PASSWORD}
    volumes:
      - db-data:/var/lib/mysql
volumes:
  db-data: ~>

Infine, crea il file Dockerfile:

<FROM php:8.3 as php>
# Aggiorniamo il gestore pacchetti
<RUN apt-get update -y>
# Installiamo le dipendenze necessarie
<RUN apt-get install -y unzip libpq-dev libcurl4-gnutls-dev>
# Installiamo le estensioni PHP richieste per Laravel
<RUN docker-php-ext-install pdo pdo_mysql>
<RUN docker-php-ext-enable pdo pdo_mysql>
# Installiamo l'estensione bcmath
<RUN docker-php-ext-install bcmath>
# Installiamo e abilitiamo Xdebug per il debug delle nostre applicazioni PHP
<RUN pecl install xdebug && docker-php-ext-enable xdebug>
<WORKDIR /var/www>
<COPY . .>
<COPY --from=composer:2.7.6 /usr/bin/composer /usr/bin/composer>
<ENV PORT=8000>
<ENTRYPOINT [ "Docker/entrypoint.sh" ]>

Per far funzionare Docker devi prima scaricare ed installare Docker Desktop e quindi avviarlo.

Dockerizzare Laravel

Arresta il server di Artisan con ctrl+c ed avvia Docker Desktop. Da un terminale che punti nella root del progetto digita:

docker compose up --build -d

Attendi quindi che vengano create le immagini e che siano avviati i servizi. Verifica alla fine che non ci siano errori e che i servizi nei contenitori siano attivi:

docker compose ps

se la risposta è:

$ docker compose ps
NAME IMAGE COMMAND SERVICE CREATED STATUS PORTS
appchat-database-1 mysql:latest "docker-entrypoint.s…" database 11 seconds ago Up 8 seconds 33060/tcp, 0.0.0.0:3307->3306/tcp
appchat-php-1 appchat-php "Docker/entrypoint.sh" php 10 seconds ago Up 8 seconds 0.0.0.0:8000->8000/tcp

allora è tutto ok!

Verificare il database

Passiamo ora alla verifica del database. In questa fase si può utilizzare un client come Workbench (solo MySQL) o Dbeaver (multiclient), a te la scelta.

Apri il client e settate i parametri per la connessione, nel mio caso:

Altra cosa fondamentale: riapri il file .env e setta la configurazione relativa al database in questo modo:

DB_CONNECTION=mysql
DB_HOST=database
DB_PORT=3307
DB_DATABASE=appchat_db
DB_USERNAME=root
DB_PASSWORD=secret

Nel DB_HOST, in caso di connessione tramite Docker, è fondamentale inserire il nome del servizio del contenitore al database. Per quanto riguarda la porta ho dovuto immettere 3307 in quanto, avendo altri servizi attivi, la 3306 era occupata. Benissimo! Lanciamo un bel migrate per creare le tabelle di default:

php artisan migrate

Conclusione

In questa lezione abbiamo esplorato il processo di creazione di un'applicazione di chat in tempo reale utilizzando Laravel e WebSocket. Abbiamo iniziato impostando Laravel e configurando un ambiente di sviluppo che include PHP e Composer. Ciò per gestire le dipendenze del progetto. Abbiamo poi stabilito una connessione stabile e sicura al database, assicurando che tutte le operazioni di migrazione e gestione dei dati funzionassero senza intoppi.

Inoltre, abbiamo approfondito l'utilizzo di Docker per containerizzare il progetto Laravel. Creando file di configurazione come Dockerfile, docker-compose.yml, e entrypoint.sh, abbiamo configurato un ambiente di sviluppo coerente e replicabile. Questo approccio semplifica notevolmente la gestione delle dipendenze e delle configurazioni ambientali, permettendoci di evitare conflitti di porte e garantire che l'applicazione funzioni correttamente su qualsiasi sistema che supporta Docker.

Abbiamo anche eseguito le migrazioni del database utilizzando i comandi di Laravel, assicurandoci che tutte le tabelle necessarie fossero create e pronte per l'uso. Infine, abbiamo verificato che tutti i servizi fossero attivi e funzionanti, connettendoci al database tramite strumenti come DBeaver per garantire che i dati venissero gestiti correttamente.