Table des matières

1. Introduction
2. Présentation du concept de Broadcasting
3. Installation côté client
4. Installation côté serveur
5. Manipulation des événements de diffusion
6. Conclusion

1. Introduction

Le broadcasting dans Laravel permet de diffuser des événements en temps réel entre votre serveur et vos clients via des technologies comme WebSockets ou Pusher. Ce tutoriel vous guidera à travers la mise en place et l'utilisation du broadcasting dans une application Laravel.

Mindmap avec Mermaid.js

2. Présentation du concept de Broadcasting

Le broadcasting permet de transmettre des messages en temps réel entre votre serveur et vos clients. Cela est particulièrement utile pour des fonctionnalités comme les notifications en temps réel, les mises à jour de chat, les mises à jour de statut, etc.

Mindmap des concepts avec Mermaid.js

Graphique des concepts avec Mermaid.js

3. Installation côté client

Pour utiliser le broadcasting côté client, vous aurez besoin de bibliothèques JavaScript comme Pusher JS ou Socket.IO.

Installation de Pusher JS

1. Installez Pusher JS via npm ou yarn :

   npm install pusher-js
   

   ou

   yarn add pusher-js
   

2. Importez Pusher JS dans votre fichier JavaScript principal (par exemple, resources/js/app.js) :

   import Pusher from 'pusher-js';
   
   window.Pusher = Pusher;
   

3. Configurez Pusher avec vos clés d'API :

   const pusher = new Pusher('your-pusher-key', {
       cluster: 'your-cluster',
       forceTLS: true
   });
   
   const channel = pusher.subscribe('my-channel');
   channel.bind('my-event', function(data) {
       console.log('Received:', data);
   });
   

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class StatusUpdated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $status;

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

    public function broadcastOn()
    {
        return new Channel('status-channel');
    }
}

namespace App\Http\Controllers;

use App\Events\StatusUpdated;

class StatusController extends Controller
{
    public function update($status)
    {
        event(new StatusUpdated($status));
        return response()->json(['message' => 'Status updated']);
    }
}

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

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});

window.Echo.channel('status-channel')
    .listen('StatusUpdated', (e) => {
        console.log('Status updated:', e.status);
    });