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 pusher.com 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_ID = 19253
PUSHER_APP_KEY = be8f6739cc441
PUSHER_APP_SECRET = 21820d2423443b
PUSHER_APP_CLUSTER = eu

5. Change your  BROADCAST_DRIVER settings inside the .env file 
BROADCAST_DRIVER = pusher

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
useIlluminate\Queue\SerializesModels;
useIlluminate\Foundation\Events\Dispatchable;
useIlluminate\Broadcasting\InteractsWithSockets;
useIlluminate\Contracts\Broadcasting\ShouldBroadcast;

classMyEventimplementsShouldBroadcast
{
useDispatchable, InteractsWithSockets, SerializesModels;

public $message;

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

publicfunctionbroadcastOn()
{
return ['my-channel'];
}

publicfunctionbroadcastAs()
{
return'my-event';
}
}

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

event(MyEvent('data-to-send'))

Then in our client side we can listen to this event we just fired

window.Echo.channel(`my-event`).listen("MyEvent", (data) => {
    console.log(data)
});

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