Laravel X socket.io

Published in

Frianbiz

5 min readSep 19, 2019

Chez Frianbiz, nous développons beaucoup d’applications et APIs reposant sur le framework PHP Laravel.

Pour avoir des interfaces utilisateur plus dynamiques et récupérer des données en temps réel, nous utilisons les WebSockets et plus particulièrement la librairie socket.io.

Dans ce tutoriel en plusieurs parties, nous allons découvrir comment associer Laravel et socket.io pour créer des applications web modernes.

Pré-requis

Pour gagner du temps, nous générons également les vues d’authentification Bootstrap / Vue.js :

# a la racine du projetcomposer require laravel/ui --devphp artisan ui vue --authnpm install && npm run watch

1. Configuration Laravel

Nous allons utiliser Redis pour la diffusion de nos évènements. Nous devons donc configurer Laravel pour qu’il utilise ce driver.

Modifier le fichier .env :

BROADCAST_DRIVER=redis

Nous devons également activer le service provider dans le fichier config/app.php :

# décommenter cette ligneApp\Providers\BroadcastServiceProvider::class,

Pour finir, nous vérifions que le header de notre application contient le token CSRF indispensable au fonctionnement de Laravel Echo.

<meta name="csrf-token" content="{{ csrf_token() }}">

2. Configuration Redis

Nous avons indiqué à Laravel d’utiliser Redis pour diffuser nos évènements. Si notre Homestead (ou le serveur) ne dispose pas de l’extension PhpRedis, nous pouvons installer le package predis/predis

Attention, ce package est abandonné et sera supprimé dans une future release Laravel au profit de PhpRedis.

# a la racine du projetcomposer require predis/predis

Par défaut, Laravel est configuré dans le fichier config/database.php pour utiliser le client phpredis. Nous devons donc ajouter dans le fichier .env la variable suivante :

REDIS_CLIENT=predis

3. Configuration socket.io

Pour que nos évènements soient diffusés via un WebSocket, nous devons installer un client et un serveur socket.io.

Client : Laravel Echo

Cette librairie Javascript facilitera notre usage de socket.io en proposant des méthodes pour s’abonner et écouter nos différents canaux de diffusion.

# A la racine du projetnpm install --save laravel-echo socket.io-client

Nous pouvons ensuite initialiser socket.io et Laravel Echo dans notre fichier resources/js/bootstrap.js :

Initialisation de socket.io et Laravel Echo

Serveur : Laravel Echo Server

Ce serveur Node.js permet au client Laravel Echo de communiquer avec le serveur via socket.io.

# sur Homestead, installation globalesudo npm install -g laravel-echo-server# sur Homestead, à la racine du projetlaravel-echo-server init

Nous pouvons maintenant démarrer le serveur socket.io :

laravel-echo-server start

Horizon

La diffusion d’évènements Laravel se fait via une file d’attente ou “queued jobs” permettant à l’application de ne pas être affectée par les temps d’attente.

Pour simplifier l’installation et la configuration de cette file d’attente, nous utilisons le package officiel Horizon.

# a la racine du projetcomposer require laravel/horizonphp artisan horizon:install

Nous devons également indiquer à Laravel dans le fichier .env d’utiliser redis pour la file d’attente :

QUEUE_CONNECTION=redis

Nous pouvons ensuite démarrer Horizon :

php artisan horizon

Notre premier évènement

Après avoir configuré les différents composants nécessaire à notre application, nous pouvons créer notre premier évènement :

php artisan make:event MessagePushed

Pour pouvoir être diffusé, notre évènement doit implémenter l’interface ShouldBroadcast. La méthode broadcastOn() nous permet d’indiquer le canal de diffusion de cet évènement.

Par défaut, Laravel instancie un canal privé PrivateChannel('channel-name') que nous présenterons dans un prochain article. Pour le moment, nous utiliserons un canal de diffusion public Channel('channel-name').

Classe d’évènement standard prêt à être diffusé

Pour pouvoir déclencher notre évènement de test, nous ajoutons une route dans le fichier routes/web.php :

Côté client, nous indiquons à l’application de se connecter au canal channel-name et d’écouter notre évènement.

A la fin du fichier resources/js/app.js :

Abonnement au canal channel-name, à l’écoute de notre évènement

Si nous ouvrons maintenant l’application sur la page de login, nous pouvons voir dans le terminal de Laravel Echo Server que le client s’est connecté à notre canal :

Si nous appelons la route /broadcastdans un autre onglet, nous pouvons observer dans le terminal de Laravel Echo Server que le message est bien diffusé :

Toutefois, nous ne voyons pas d’alerte s’afficher sur l’application. En effet, lors de la diffusion d’un évènement, Laravel préfixe par défaut le nom du canal avec app_name_database_. Pour supprimer ce préfixe, nous pouvons ajouter dans le fichier .env la variable suivante :

# indiquer une variable videREDIS_PREFIX=

si nous rappelons la route /broadcast, nous pouvons voir que notre évènement est maintenant diffusé sur notre canal channel-name :

Et que notre alerte s’affiche 🎉 :

Merci d’avoir lu jusqu’ici !

Pour m’aider à comprendre et utiliser socket.io avec Laravel, outre la documentation officielle de Laravel, j’ai lu les articles suivants :

N’hésitez pas à commenter cet article si vous rencontrez des difficultés ou si vous avez des questions.

Si vous souhaitez également nous contacter pour votre projet, vous pouvez le faire ici 👈🏼