Implementing Real-Time Broadcasting in Laravel 11 with Pusher, Echo, and WebSockets

Real-time functionality is a core component of modern web applications, enabling instant communication and data updates, enhancing user experience and competitiveness. Laravel 11 simplifies real-time features through its powerful broadcasting system.

What is broadcasting in Laravel?

In Laravel, broadcasting transmits server-side events to client applications in real time via WebSocket connections, useful for notifications, data updates, chat, etc.

Key components

1. Pusher – a hosted service that simplifies adding real-time data and functionality to web and mobile apps via WebSockets.

2. Laravel Echo – a JavaScript library that lets developers subscribe to channels and listen for Laravel broadcast events.

3. WebSockets – a protocol that provides full-duplex communication over a single TCP connection, ideal for real‑time updates.

Setting up broadcasting in Laravel 11

Step 1: Install Laravel

composer create-project --prefer-dist laravel/laravel blog
cd blog

Step 2: Configure broadcasting

Update .env with Pusher credentials:

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

Install Pusher PHP SDK:

composer require pusher/pusher-php-server

Step 3: Install Laravel Echo and Pusher JS

npm install --save laravel-echo pusher-js

Step 4: Configure Laravel Echo

Create resources/js/bootstrap.js and add:

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
});

Ensure environment variables are defined in .env and webpack.mix.js (or vite.config.js ):

mix.js('resources/js/app.js', 'public/js').vue()
   .sass('resources/sass/app.scss', 'public/css')
   .sourceMaps()
   .version()
   .options({
       processCssUrls: false
   });

mix.browserSync('your-local-dev-url.test');
mix.webpackConfig({
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
});

Step 5: Define broadcast event

php artisan make:event NewMessage

Edit app/Events/NewMessage.php to implement ShouldBroadcast :

namespace App\\Events;

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

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

    public $message;

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

    public function broadcastOn()
    {
        return new Channel('chat');
    }
}

Step 6: Broadcast the event

use App\\Events\\NewMessage;

public function sendMessage(Request $request)
{
    $message = $request->input('message');
    event(new NewMessage($message));
    return response()->json(['status' => 'Message sent!']);
}

Step 7: Listen on the front end

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

Step 8: Run the application

npm run dev
php artisan serve

After compilation, the application can broadcast and receive real‑time messages using Laravel Echo, Pusher, and WebSockets.

Conclusion

Laravel 11’s broadcasting and real‑time event features, powered by Pusher, Laravel Echo, and WebSockets, enable developers to build interactive functionalities such as notifications and chat systems, delivering a smooth and dynamic user experience.