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

Laravel est un framework PHP populaire, hautement évolutif et efficace. Il fournit de nombreux outils et bibliothèques puissants qui permettent aux développeurs de créer rapidement des applications Web de haute qualité. Parmi eux, Laravel Echo et Pusher sont deux outils très importants grâce auxquels la communication WebSockets peut être facilement implémentée. Cet article détaillera comment utiliser ces deux outils dans les applications Laravel.

1. Que sont les WebSockets ?

WebSockets est un protocole de communication bidirectionnelle, qui permet d'obtenir une transmission de données en temps réel plus élevée et plus rapide. Par rapport aux requêtes HTTP traditionnelles, les WebSockets peuvent maintenir l'état de la connexion et transférer des données entre le client et le serveur même en l'absence de requête ou de réponse. Les WebSockets peuvent offrir une meilleure expérience utilisateur et des performances d'application plus élevées, et peuvent être utilisés dans une variété de scénarios d'application en temps réel, tels que les applications de chat, les jeux, etc.

2. Introduction à Laravel Echo et Pusher

Laravel Echo est un framework de diffusion d'événements qui fournit une API simple et cohérente pour vous permettre de connecter des canaux de communication en temps réel côté client. Echo s'appuie sur Pusher et Redis peut être utilisé comme alternative lorsque Pusher n'est pas disponible. Pusher est un service WebSockets en temps réel qui vous aide à ajouter facilement des fonctionnalités en temps réel à votre application. Pusher est une solution hébergée qui vous permet de décharger toutes les tâches de gestion WebSockets vers un service tiers pour de meilleures performances. de la demande.

3. Configurer Laravel Echo et Pusher

Dans le projet Laravel, vous devez d'abord installer Echo et Pusher. Vous pouvez utiliser la commande composer pour installer :

composer require pusher/pusher-php-server pusher/pusher-http-laravel beyondcode/laravel-websockets
npm install --save laravel-echo pusher-js

Une fois l'installation terminée, vous devez configurer les informations relatives à Pusher. dans le fichier .env :

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

Puis dans le fichier config/broadcasting.php, configurez Broadcaster en tant que pusher :

'default' => env('BROADCAST_DRIVER', 'pusher'),

'connections' => [
    '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,
        ],
    ],
],

4. Utilisez les Laravel WebSockets de Pusher pour exécuter le serveur websocket

Pusher dispose d'une bibliothèque open source Laravel WebSockets qui permet vous pouvez exécuter WebSockets sur vos propres serveurs, réduisant ainsi les coûts et augmentant les performances et la flexibilité. Les opérations spécifiques sont les suivantes:

1. InStall les tables de base de données et les données requises pour exécuter Laravel Websockets

   php artisan websocket:install

2. fill la configuration requise pour Laravel Websockets

   php artisan websocket:publish

3. Create un écouteur (dans EventServiceProvider)

protected $listen = [
    'AppEventsExampleEvent' => [
        'AppListenersExampleListener',
    ],
];

Traitement de l'événement

<?php

namespace AppEvents;

use IlluminateBroadcastingInteractsWithSockets;
use IlluminateFoundationEventsDispatchable;
use IlluminateQueueSerializesModels;

class ExampleEvent
{
 use Dispatchable, InteractsWithSockets, SerializesModels;

 public $data;

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

 public function broadcastOn()
 {
     return ['test_channel'];
 }

 public function broadcastAs()
 {
     return 'example-event';
 }
}

L'événement peut ensuite être poussé à l'aide du code ci-dessous :

5. use AppEventsExampleEvent;
   use IlluminateSupportFacadesEvent;
   
   Event::dispatch(new ExampleEvent(‘Example payload’, ‘Another example payload’));

Comment utiliser Laravel Echo et Pusher sur le front-end

Utiliser Laravel Echo et Pusher sur le front-end est très simple, voici un exemple basique :

import Echo from 'laravel-echo'
import Pusher from 'pusher-js'

let pusher = new Pusher(process.env.MIX_PUSHER_APP_KEY, {
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true,
})
let echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true,
    auth: {
        headers: {
            ‘Authorization’: ‘Bearer {access_token}’,
        },
    },
})

Grâce à la méthode ci-dessus, nous pouvons utiliser Laravel Echo et Pusher pour implémenter la communication WebSockets dans les applications Laravel.

Résumé

🎜Laravel Echo et Pusher fournissent une solution WebSockets très pratique et rapide, nous permettant de créer rapidement des applications Web hautes performances en temps réel. Cet article explique comment configurer Laravel Echo et Pusher et utiliser les Laravel WebSockets de Pusher pour créer un serveur WebSockets localement. En même temps, Laravel Echo et Pusher sont utilisés sur le front-end pour se connecter au serveur WebSockets afin d'établir une communication en temps réel. capacités. 🎜

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!