Laravel and React JS Pusher Websocket Connection and Installation steps

Pusher is the very best option when it comes working with websockets on laravel. In this short tutorial let's see how to connect your laravel application with pusher and emit events successfully.

1. Create a Laravel application

I assume before you continue that you already know how to create a laravel application - This tutorial is only texted on Laravel 8 and might not propoerly work on other versions of laravel

2. Install Pusher

Once you have your laravel web application created, let's proceed to install pusher. Puhser is a realtime tool used to create complex but easy we applications like chat apps and more. To add pusher to your applications these are the simple steps

3. Pusher Channels

    We are using pusher channels which helps us to integrate pusher in our laravel application, we can use composer to install that

 composer require pusher/pusher-php-server

4. Visit and create a channel

     copy your PUSHER_APP_ID, PUSHER_APP_KEY, PUSHER_APP_SECRET and add them respectively to you .env file in the root folder of your laravel application

     Here is a quick Example

PUSHER_APP_KEY = be8f6739cc441
PUSHER_APP_SECRET = 21820d2423443b

5. Change your  BROADCAST_DRIVER settings inside the .env file 

6. Open config/app.php and uncomment  App\Providers\BroadcastServiceProvider::class at the down section of the codes
Inside config/broadcasting.php change the default BROADCAST_DRIVER  from "null" to "pusher"

Right now we're done with the common steps needed for pusher installation. The next thing is to make sure we have pusher installed in our react client application. To do that make sure you have this two dependency installed in your react application

"laravel-echo": "^1.11.3",
"pusher-js": "^7.0.3"

7. In resources\js\bootstrap.js uncomment this sections of codes

 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

Let's generate a simple laravel pusher event. To do that we have to run a simple command php artisan make:event EventName
php artisan make:event MyEvent
Check inside app\Events

useDispatchable, InteractsWithSockets, SerializesModels;

public $message;

public function__construct($message)
$this->message = $message;

return ['my-channel'];


The event above implements the ShouldBroadCast which tells laravel to fire the event off once we need that. to fire an event to our client side(react js) we simply call the laravel event function on the Event we just created


Then in our client side we can listen to this event we just fired`my-event`).listen("MyEvent", (data) => {

Right now our client side should be able to listen to events fired with the my-event