chat con laravel e react

Sviluppare una chat con Laravel: prima parte

Con questa piccola rubrica che inauguriamo con il presente articolo ci mettiamo in condizione di Realizzare una Chat con Laravel, React e Pusher a puntate

In questa serie di articoli ci occuperemo della creazione di una chat, molto rudimentale, ma con tutti i componenti necessari per avere un punto di partenza utile e vedere in azione alcuni componenti di Laravel che semplificano lo sviluppo di applicazioni web. Durante la realizzazione del progetto affronteremo i seguenti argomenti:

-Installazione e configurazione dell’ambiente Laravel
-Configurazione dell’autenticazione utente
-Utilizzo di un tool per effettuare reverse engineering su tabelle già definite nel database
-Utilizzo dei Middleware di Laravel per filtrare i messaggi inviati
-Utilizzo di Pusher e del Broadcasting di Laravel per lo scambio dei messaggi in tempo
reale
-Utilizzo dei Mutators e Accessors di Laravel per la codifica dei messaggi e la loro
decodifica
-Utilizzo del front-end scaffolding di Laravel per React

Requisiti:

Composer
Laravel >= 5.5
NPM
Node.js
PHP >= 7.1.3
MySql >= 5.6.0

Per prima cosa generiamo un nuovo progetto Laravel, che chiameremo chat laravel new chat oppure  composer create-project –prefer-dist laravel/laravel chat

Useremo lo scaffolding per React, anche se Laravel fornisce di default quello per Vue.js. Cambiamo il preset come prima cosa per avere un’installazione iniziale pulita e corretta cd chat php artisan preset react.

Eseguiamo il package manager di Node.js, npm per installare tutti i moduli richiesti da React npm install. Per utilizzare il Broadcasting di Laravel lato client useremo Pusher e il modulo laravel- echo, installiamo quindi i due moduli utilizzando sempre il package manager di Node.js npm install –save laravel-echo pusher-js.

Compiliamo il bundle js dell’app React per averne disponibile una prima versione npm run dev. Torniamo ora all’app Laravel che abbiamo creato.

Andremo adesso ad utilizzare due componenti: il primo per la parte server di Pusher, il secondo per effettuare il reverse engineering su una tabella che avremo già creato nel nostro database.

composer require pusher/pusher-php-server "~4.0"
composer require krlove/eloquent-model-generator –dev

Passiamo ora alla configurazione del progetto. Apriamo il file config/app.php e abilitiamo la riga sottostante nell’array ‘providers’

App\Providers\BroadcastServiceProvider::class,

Apriamo il file .env, dove andremo a cambiare il nome dell’app in Chat, definiremo i parametri di connessione al database e il servizio di broadcasting che vogliamo utilizzare (Pusher).

APP_NAME=Chat

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT={PORTA}
DB_DATABASE={NOME_DB}
DB_USERNAME={USER}
DB_PASSWORD={PASS}
BROADCAST_DRIVER=pusher

Torniamo a terminale e generiamo il flusso di autenticazione fornito da Laravel.

php artisan make:auth
php artisan migrate

A questo punto il setup iniziale è completo e siamo pronti per implementare la chat.

Lanciamo il server di sviluppo php

php artisan serve

e navighiamo all’indirizzo che ci indica a terminale
Laravel development server started: <http://127.0.0.1:8000>

Possiamo già iscriverci al nostro servizio di chat, e nella prossima “puntata” inizieremo a  lavorare al modello del progetto che vedremo nel proseguimento della nostra rubrica… stay tuned!

Leave a reply