Rue de l'info

Article

Comment mettre en place des WebSockets en temps réel avec Laravel et Vue.js : un guide étape par étape

par | 20-12-2022 | Développement informatique, Tutos

Introduction aux WebSockets avec Laravel et Vue.js

Les WebSockets sont un outil puissant pour la création d’applications en temps réel, permettant une communication bidirectionnelle entre le client et le serveur. Dans ce tutoriel, nous utiliserons le framework
Laravel et Vue.js pour créer une application de chat en temps réel.

Mise en place d’un projet Laravel

Avant de pouvoir utiliser les WebSockets, nous devons mettre en place un projet Laravel. Si vous avez déjà un projet Laravel en place, vous pouvez passer cette section. Pour créer un nouveau projet Laravel, vous
devez avoir installé composer sur votre machine. Une fois que vous avez composer, vous pouvez utiliser la commande suivante pour créer un nouveau projet Laravel :

1
2
3
 
composer create-project --prefer-dist laravel/laravel mon-projet
 

Cela créera un nouveau projet Laravel dans un répertoire appelé « mon-projet ».

Installation des WebSockets avec Laravel

Pour utiliser les WebSockets avec Laravel, nous allons utiliser le paquet Laravel WebSockets. Ce paquet facilite l’utilisation des WebSockets dans votre application Laravel. Pour installer le paquet, vous pouvez
utiliser la commande suivante :

1
2
3
 
composer require beyondcode/laravel-websockets
 

Cela installera le paquet et enregistrera les fournisseurs de service nécessaires.

Mise en place de Vue.js

Maintenant que nous avons mis en place notre projet Laravel et installé le paquet WebSockets, nous pouvons passer à la mise en place de Vue.js. Tout d’abord, nous devons installer les dépendances de Vue.js. Nous
pouvons le faire en exécutant la commande suivante :

1
2
3
 
npm install
 

Ensuite, nous devons configurer notre application Vue.js. Dans le fichier resources/js/app.js, vous pouvez ajouter le code suivant :

1
2
3
4
5
6
7
8
9
 
import Vue from 'vue';
import App from './App.vue';
 
new Vue({
  el: '#app',
  render: h => h(App)
});
 

Cela créera une nouvelle instance de Vue et la liera à l’élément #app de votre HTML.

Utilisation des WebSockets dans un composant Vue.js

Maintenant que nous avons mis en place notre projet Laravel et configuré Vue.js, nous pouvons maintenant commencer à utiliser les WebSockets dans nos composants Vue.js.

Pour utiliser les WebSockets dans un composant Vue.js, vous devez importer la bibliothèque SocketIO. Vous pouvez le faire en ajoutant la ligne suivante en haut de votre composant :

JavaScript
1
2
3
 
import io from 'socket.io-client';
 

 

Ensuite, vous devez créer une nouvelle connexion WebSocket en appelant la fonction io() et en passant l’URL de votre serveur WebSocket. Dans une application Laravel, le serveur WebSocket est généralement
à l’emplacement

JavaScript
1
2
3
 
/laravel-websockets.
 

 



JavaScript
1
2
3
 
const socket = io('/laravel-websockets');
 

Une fois que vous avez une connexion WebSocket, vous pouvez commencer à écouter les événements et envoyer des messages. Par exemple, pour écouter un événement de message, vous pouvez utiliser le code suivant 



JavaScript
1
2
3
4
 
socket.on('message', data => {
console.log(data); });
 

Pour envoyer un message, vous pouvez utiliser la méthode emit() de votre connexion WebSocket :

1
2
3
 
socket.emit('message', 'Hello World!');
 

 

Vous pouvez également utiliser les WebSockets pour déclencher des actions dans votre application Laravel.

Pour ce faire, vous devez écouter l’événement :

JavaScript
1
2
3
 
laravel-websockets:server-event
 

 

et définir une fonction de rappel qui sera exécutée lorsque l’événement est déclenché.

JavaScript
1
2
3
4
 
socket.on('laravel-websockets:server-event', data => {
console.log(data); });
 

Vous pouvez déclencher cet événement depuis votre application Laravel en utilisant la méthode broadcast() du paquet WebSockets :



JavaScript
1
2
3
4
 
WebSockets::broadcast('laravel-websockets:server-event', ['hello' =>
'world']);
 

En utilisant ces techniques, vous pouvez facilement mettre en place des WebSockets en temps réel dans votre application Laravel avec Vue.js.

Conclusion

Dans ce tutoriel, nous avons vu comment mettre en place et utiliser les WebSockets dans une application Laravel avec Vue.js. Nous avons vu comment configurer un projet Laravel et installer le paquet WebSockets, comment
configurer Vue.js et utiliser les WebSockets dans un composant Vue.js, et comment déclencher des événements de WebSockets depuis votre application Laravel. En utilisant ces techniques, vous pouvez facilement créer des
applications en temps réel avec Laravel et Vue.js. N’hésitez pas à explorer d’autres fonctionnalités et possibilités offertes par les WebSockets pour améliorer votre application.