To successfully implement event broadcasting in Laravel, you must first configure the broadcast driver and install the necessary dependencies. 1. Set BROADCAST_DRIVER=redis in the .env file, and install laravel-echo and pusher-js; 2. Configure the Pusher connection information in config/broadcasting.php, and fill in PUSHER_APP_ID, KEY, SECRET and CLUSTER in the .env; 3. Introduce Laravel Echo on the front end, and pass in MIX_PUSHER_APP_KEY and MIX_PUSHER_APP_CLUSTER environment variables during initialization; 4. Create an event class that implements the ShouldBroadcast interface, define broadcastOn return channel (Channel or PrivateChannel), and you can choose to customize broadcastAs event name; 5. Use Echo.channel('chat') or Echo.private('chat') to listen to events on the front end to ensure that the event name is consistent with the broadcastAs definition; 6. Trigger events through event() or dispatch() in the controller or route; If you use a private channel, you also need to define authorization logic in routes/channels.php to ensure that the user can access it after authentication, and finally run php artisan serve and npm run dev to start the service and compile resources, and the entire process can realize real-time communication function.

Broadcasting events in Laravel using Laravel Echo is a great way to add real-time functionality to your app. Here's a clear, step-by-step guide to get it working properly.

? 1. Set up broadcasting and Laravel Echo

First, make sure broadcasting is enabled in Laravel.

Enable Broadcasting in .env

 BROADCAST_DRIVER=redis

Install required packages

You'll need Pusher (or use Redis Socket.io for self-hosted):

 npm install --save laravel-echo pusher-js

If you're using Pusher , this is the easiest option for beginners.

? 2. Configure broadcasting (Pusher example)

Update config/broadcasting.php

Make sure your Pusher settings are correct:

 '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'),
            'host' => env('PUSHER_HOST') ?: 'api-'.env('PUSHER_APP_CLUSTER').'.pusher.com',
            'port' => env('PUSHER_PORT', 443),
            'scheme' => env('PUSHER_SCHEME', 'https'),
            'encrypted' => true,
            'useTLS' => true,
        ],
    ],
],

Add to .env

 PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_app_key
PUSHER_APP_SECRET=your_secret
PUSHER_APP_CLUSTER=mt1

? 3. Set up Laravel Echo in your frontend

In your main JavaScript file (eg, resources/js/bootstrap.js or app.js ):

 import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

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

Make sure to expose the Pusher key to the frontend by running:

 php artisan vendor:publish --tag=laravel-mix

And ensure .env variables are prefixed with MIX_ to be available in JS:

 MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

? 4. Create a broadcastable event

Generate an event:

 php artisan make:event NewMessagePosted

Edit the event class:

 <?php

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 NewMessagePosted implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

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

    public function broadcastOn()
    {
        return new Channel(&#39;chat&#39;); // or PrivateChannel for private
    }

    public function broadcastAs()
    {
        return &#39;message.sent&#39;; // optional: custom event name
    }
}

Tip: Use PrivateChannel('chat') if you want authentication.

? 5. Listen for the event with Laravel Echo

In your frontend JS (eg, a Vue component or plain script):

 Echo.channel('chat')
    .listen('message.sent', (e) => {
        console.log(e.message);
    });

If you used broadcastAs() , don't include the event namespace (eg, App\\Events\\ ). Just use the name you defined.

? 6. Dispatch the event from Laravel

In a controller or route:

 use App\Events\NewMessagePosted;

// ...

event(new NewMessagePosted('Hello everyone!'));

Or:

 NewMessagePosted::dispatch('Hello world');

? Optional: Authenticate private channels

If using PrivateChannel , you need to set up auth.

Create a route for authorization:

 // routes/channels.php
Broadcast::channel('chat', function ($user) {
    return $user ? true : false; // return user data or true to authorize
});

Then in JS:

 Echo.private('chat')
    .listen('message.sent', (e) => {
        console.log(e.message);
    });

Laravel will automatically make a POST request to /broadcasting/auth to verify access.

?? Run the development server

Make sure the Laravel development server is running:

 php artisan serve

And run Vite or Mix to compile assets:

 npm run dev

Also, if using Pusher, you can use their debug console to see events in real time.

Summary

To broadcast events with Laravel Echo:

• ? Enable broadcasting (Pusher or Redis)
• ? Install and configure Laravel Echo Pusher JS
• ? Create an event that implements ShouldBroadcast
• ? Use Echo.channel() or Echo.private() to listen
• ? Dispatch the event in Laravel

It's not complex once the config is right — but small mistakes in keys, channels, or event naming can break it silently.

Basically, get the key/cluster right, expose them via MIX_ , and make sure your event actually broadcasts. Test with the Pusher dashboard if needed.

The above is the detailed content of How to broadcast events with Laravel Echo?. For more information, please follow other related articles on the PHP Chinese website!