Construire une Real-Time application de chat avec Laravel WebSocket

Une real-time application de chat est un excellent exemple de comment WebSocket peut révolutionner real-time la communication interactive sur le web. Dans cet article, nous allons parcourir la création d'une application de chat simple à l'aide Laravel et à l'intégration WebSocket de laravel-websockets package pour offrir des expériences de communication réactives et interactives aux utilisateurs.

Objectifs de la candidature

Nous allons créer une real-time application de chat avec les fonctionnalités suivantes :

Envoyer et recevoir des messages instantanément : les utilisateurs peuvent envoyer et recevoir des messages instantanément sans avoir à actualiser la page.

Liste d'utilisateurs en ligne: L'application affichera une liste d'utilisateurs en ligne et leur statut de chat.

Envoyer des images et des fichiers : les utilisateurs peuvent partager des images et des fichiers dans le chat.

Premiers pas avec l'installation et la configuration

Pour commencer, nous devons installer le laravel-websockets package et le configurer pour l'intégrer WebSocket à Laravel. Suivez ces étapes:

Installez le laravel-websockets package: Commencez par installer le package en utilisant Composer.

composer require pusher/pusher-php-server

Publier le fichier de configuration: Après l'installation, publiez le fichier de configuration pour personnaliser les paramètres.

 

php artisan vendor:publish --tag=websockets-config

Exécuter migration: créez les tables de base de données nécessaires pour WebSocket.

php artisan migrate

Démarrer WebSocket le serveur : lancer le WebSocket serveur pour gérer real-time les connexions

php artisan websockets:serve

Construire l'interface utilisateur

Nous allons créer une interface utilisateur simple utilisant HTML, CSS et JavaScript pour afficher la liste des messages, la zone de saisie et la liste des utilisateurs en ligne.

<!-- resources/views/chat.blade.php -->  
  
<div id="app">  
    <div class="chat-container">  
        <div class="chat-box">  
            <div class="chat-messages">  
                <div class="message" v-for="message in messages":key="message.id">  
                    {{ message.user }}: {{ message.content }}  
                </div>  
            </div>  
            <div class="input-box">  
                <input v-model="newMessage" @keydown.enter="sendMessage" placeholder="Enter your message...">  
            </div>  
        </div>  
    </div>  
</div>  

Intégrer WebSocket et Broadcasting

Nous allons utiliser Laravel Broadcasting pour intégrer WebSocket l'application.

Installer Pusher: installez le pusher/pusher-php-server package à utiliser Pusher comme Broadcasting pilote.

composer require pusher/pusher-php-server

Configurer Broadcasting: Dans le config/broadcasting.php fichier, configurez le pilote et fournissez vos Pusher informations d'identification.

'pusher' => [  
    'driver' => 'pusher',  
    'key' => env('PUSHER_APP_KEY'),  
    'secret' => env('PUSHER_APP_SECRET'),  
    'app_id' => env('PUSHER_APP_ID'),  
    'options' => [  
        'cluster' => env('PUSHER_APP_CLUSTER'),  
        'encrypted' => true,  
    ],  
],  

Créer un événement et diffuser: créez un événement ChatMessageSent et diffusez-le lorsqu'un utilisateur envoie un message.

// app/Events/ChatMessageSent.php  
  
public function broadcastOn()  
{  
    return new Channel('chat');  
}  

Script JavaScript : utilisez JavaScript pour écouter les événements du serveur et mettre à jour l'interface utilisateur.

// resources/js/app.js  
  
require('./bootstrap');  
  
import Vue from 'vue';  
import Chat from './components/Chat.vue';  
  
const app = new Vue({  
    el: '#app',  
    components: {  
        Chat  
    }  
});  

Conclusion

En suivant ce didacticiel, vous avez créé avec succès une real-time application de chat utilisant WebSocket dans Laravel. Les utilisateurs peuvent envoyer et recevoir des messages instantanément, et vous avez vu comment WebSocket offre une expérience de communication réactive et interactive.