Développement Laravel : Comment implémenter la communication WebSockets à l'aide de Laravel Echo ?

Laravel est un framework PHP populaire qui possède de nombreux outils utiles et bibliothèques d'extensions qui permettent aux développeurs de créer facilement des applications Web de haute qualité. Parmi eux, Laravel Echo est un puissant outil de communication WebSockets qui peut aider les développeurs à établir une communication en temps réel dans les applications Web.

Dans cet article, nous présenterons comment utiliser Laravel Echo et établir un serveur WebSockets pour établir une communication en temps réel. Nous décrirons d'abord brièvement ce que sont WebSockets et Laravel Echo, puis nous expliquerons comment installer et configurer Laravel Echo, et enfin démontrerons comment utiliser Laravel Echo pour communiquer avec les clients JavaScript.

Que sont les WebSockets ?

WebSockets est un protocole qui permet des connexions de communication en temps réel entre les applications Web et les serveurs Web. Cette connexion peut rester ouverte longtemps et est bidirectionnelle, permettant une lecture et une écriture simultanées.

Contrairement aux requêtes HTTP, l'ouverture continue des connexions WebSockets permet au serveur de pousser les données vers le client en temps réel sans avoir besoin d'une interrogation ou d'une interrogation longue. Cela permet aux applications Web de communiquer rapidement, efficacement et en temps réel.

Qu'est-ce que Laravel Echo ?

Laravel Echo est une bibliothèque d'extensions officielle du framework Laravel, qui peut aider les développeurs à implémenter la communication WebSockets dans les applications Web. Il fournit une API simple pour s'abonner facilement aux chaînes de diffusion et transmettre des messages entre le client et le serveur à l'aide de JavaScript.

Utilisez Laravel Echo et Laravel Pusher pour configurer facilement un serveur WebSockets et utiliser les canaux de diffusion pour organiser les communications WebSockets. Côté client, nous pouvons utiliser JavaScript et Laravel Echo pour écouter les messages en temps réel afin de permettre une communication en temps réel dans les applications Web.

Installation et configuration de Laravel Echo

Avant de commencer à utiliser Laravel Echo, nous devons installer et configurer le logiciel requis : Laravel et pusher PHP SDK. Laravel Echo et pusher PHP SDK peuvent être installés via le gestionnaire de packages Composer.

Nous devons d'abord installer Laravel :

composer create-project laravel/laravel your-project-name

Ensuite, nous devons installer le SDK PHP du pusher. L'installation du SDK PHP pusher peut être effectuée en exécutant la commande suivante :

composer require pusher/pusher-php-server

Afin d'intégrer Laravel Echo et le SDK PHP pusher, nous devons ajouter le fournisseur de services et l'alias dans la configuration/l'application. php : #🎜 🎜#

// config/app.php

'providers' => [
    // ...
    LaravelBroadcastingBroadcastServiceProvider::class,
],

'aliases' => [
    // ...
    'Broadcast' => LaravelBroadcastingBroadcastFacade::class,
],

Ensuite, effectuons quelques travaux de configuration pour nous assurer que Laravel Echo et le SDK PHP pusher peuvent fonctionner correctement. Nous devons ajouter toute la configuration requise pour Laravel Echo et le SDK PHP pusher dans le fichier .env : SDK PHP pour construire le serveur WebSockets. Nous devons définir le canal de diffusion dans le fichier routes/channels.php. Le canal de diffusion détermine quels utilisateurs peuvent recevoir des messages diffusés.

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your-pusher-app-id
PUSHER_APP_KEY=your-pusher-app-key
PUSHER_APP_SECRET=your-pusher-app-secret
PUSHER_APP_CLUSTER=your-pusher-app-cluster

Dans l'exemple ci-dessus, nous avons défini un canal de diffusion nommé "chat" et lui avons passé un paramètre "roomId". Seuls les utilisateurs disposant de l'autorisation « chat.roomId » peuvent recevoir des messages de ce canal de diffusion.

Ensuite, nous devons définir l'événement diffusé et faire passer son message. Créez une nouvelle classe d'événements dans le répertoire app/Events, par exemple :

// routes/channels.php

use IlluminateSupportFacadesBroadcast;

Broadcast::channel('chat.{roomId}', function ($user, $roomId) {
    // ...
});

Cette classe d'événements contient la logique des événements de diffusion et doit implémenter l'interface ShouldBroadcast pour être diffusée.

Nous pouvons désormais instancier l'événement dans notre application puis envoyer le message de diffusion. Par exemple, ajoutez la méthode d'envoi de message suivante dans le fichier app/Http/Controllers/ChatController.php :

// app/Events/ChatMessageSent.php

<?php

namespace AppEvents;

use IlluminateBroadcastingPrivateChannel;
use IlluminateContractsBroadcastingShouldBroadcast;
use IlluminateFoundationEventsDispatchable;
use IlluminateQueueSerializesModels;

class ChatMessageSent implements ShouldBroadcast
{
    use Dispatchable, SerializesModels;

    public $message;

    public function __construct($message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return new PrivateChannel('chat.' . $this->message['room_id']);
    }
}

Veuillez noter que dans le code ci-dessus, event(new ChatMessageSent($message)) déclenche le et envoyé un événement de diffusion contenant les données du message.

Établir une communication en temps réel

Enfin, nous devons utiliser Laravel Echo dans le client JavaScript pour écouter les événements diffusés afin d'obtenir une communication WebSockets en temps réel. En JavaScript, nous pouvons utiliser deux manières d'écouter les événements diffusés :

Echo.channel(channelName).listen(eventName, callback) : Abonnez-vous aux événements diffusés et enregistrez une fonction de rappel, à exécuter lorsqu'un événement est reçu.

Echo.private(channelName).listen(eventName, callback) : Abonnez-vous aux événements de diffusion privée et enregistrez une fonction de rappel à exécuter lorsque l'événement est reçu.

• Par exemple, dans notre application de chat, nous pouvons utiliser le code suivant pour écouter les événements des nouveaux messages :

// app/Http/Controllers/ChatController.php

<?php

namespace AppHttpControllers;

use AppEventsChatMessageSent;
use IlluminateHttpRequest;

class ChatController extends Controller
{
    public function sendMessage(Request $request)
    {
        $message = [
            'user_id' => $request->user()->id,
            'room_id' => $request->get('room_id'),
            'message' => $request->get('message'),
        ];

        event(new ChatMessageSent($message));

        return response()->json(['status' => 'Message Sent!']);
    }
}

• Dans le code ci-dessus, nous utilisons Le client Laravel Echo s'abonne au canal « chat.roomId » et imprime les données de l'événement lorsque l'événement « ChatMessageSent » est reçu.

Conclusion

En utilisant Laravel Echo et le SDK PHP pusher, nous pouvons facilement configurer un serveur WebSockets et utiliser des canaux de diffusion pour implémenter la communication WebSockets. Côté client, nous pouvons utiliser JavaScript et Laravel Echo pour surveiller les messages en temps réel afin d'établir une communication en temps réel.

De plus, Laravel Echo propose de nombreux autres canaux de diffusion et événements disponibles, que nous pouvons utiliser pour créer des applications Web complexes. Si vous recherchez une solution moderne de communication en temps réel, Laravel Echo et le SDK PHP pusher sont un bon choix.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!