Eccoci al terzo appuntamento della rubrica “Realizzare una chat con Laravel, React e Pusher“. Riavvolgiamo il filo e immergiamoci di nuovo nello sviluppo del nostro applicativo :).
Ormai quello che manca è solo l’implementazione del Broadcasting dei messaggi e la conseguente visualizzazione a schermo.
Apportiamo prima alcune modifiche ai due metodi che gestiscono i messaggi all’interno del file HomeController.php e facciamo in modo che i messaggi restituiti contengano sempre anche le relazioni del mittente e del ricevente
public function addMessage(Request $request, User $from, User $to) {
…
$newMessage->save();
$returnMessage = Message::where(‘id’,$newMessage->id)->with([‘from’, ‘to’])->first();
return $returnMessage->toJson();
}
public function messages(Request $request, User $from, User $to) {
$messages = Message::where(…)->with([‘from’, ‘to’])->get();
return $messages->toJson();
}
Prepariamoci ora a implementare il Broadcasting. Come prima cosa avremo bisogno delle credenziali di Pusher. Possiamo creare un account gratuito, che ci permette di scambiare 250.000 messaggi al giorno, che per noi è più che sufficiente, sul sito di Pusher (https://pusher.com). Una volta creato l’account e creata una nuova app, possiamo inserire le credenziali necessarie nel file .env
PUSHER_APP_ID={app_id}
PUSHER_APP_KEY={key}
PUSHER_APP_SECRET={secret}
PUSHER_APP_CLUSTER=eu
Per poter usufruire del Broadcasting dobbiamo creare un evento di Laravel che si occupi di eseguire il broadcast. Andiamo nel terminale e digitiamo il seguente comando
php artisan make:Event MessageAdded
All’interno della cartella app troveremo ora una nuova sottocartella Events con al suo interno il file MessageAdded.php. Useremo questo evento per eseguire il Broadcasting del messaggio aggiunto. All’interno del file andiamo a implementare l’interfaccia ShouldBroadcastNow per utilizzare una coda sincrona invece di quella di default di Laravel.
Inoltre definiamo una proprietà pubblica message e la assegniamo all’interno del costruttore. Definiamo anche il canale privato sul quale andremo ad effettuare il broadcast, che, per semplicità, definiamo attraverso la stringa ‘user.’ + id del destinatario.
}
public function broadcastOn()
{
return new PrivateChannel(‘user.’ .$this->message->to_id);
}
}
Per completare la fase di invio del messaggio dobbiamo apportare un’ultima modifica all’interno del file HomeController.php. All’interno della funzione addMessage richiamiamo l’evento appena creato con la funzione helper apposita, passando come parametro una nuova istanza della classe evento, con il messaggio appena creato come parametro del costruttore prima di rimandare la risposta alla richiesta
use App\Events\MessageAdded;
…
event(new MessageAdded($returnMessage));
Ora manca la parte di ricezione dei messaggi. Per prima cosa dobbiamo dare a Laravel un modo per autenticare il canale sul quale starà in ascolto della ricezione di messaggi. Per fare questo andiamo all’interno del file routes/channels.php e aggiungiamo
Broadcast::channel(‘user.{id}’, function ($user, $id) {
return ($user->id == $id);
});
Diciamo così a Laravel che può stare in ascolto solo sul canale che appartiene all’utente attualmente autenticato se il suo id corrisponde all’id che compone il nome del canale.
Stay super tuned! Il prossimo appuntamento è quello che conclude la rubrica “Sviluppare una chat con Laravel, React e Pusher” e non devi assolutamente perderlo.
