Laravel 5.8 + Pusher + Laravel Echo, private channel

Create live notification on a private channel for users using Laravel 5.8, Echo and Pusher.

Me and my team we used Pusher on Laravel 5.8 for a project. We get through it using documentation and tutorials but we found out that there is a lack of information. So I’ am writing this post from our experience and I hope it will work for everyone without much pain. Enjoy the tutorial :D

First thing first you gotta subscribe to Pusher, and you will end up here.

Setting up the environment

We are going to change the .env file.

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=***Your app id****
PUSHER_APP_KEY=******Your app key*****
PUSHER_APP_SECRET=***** Your secret******

Then the file Config/broadcasting.php

'default' => env('BROADCAST_DRIVER', 'pusher'),
.........
.........
.........
'pusher' => [
      'driver' => 'pusher',
      'key' => env('PUSHER_APP_KEY'),
      'secret' => env('PUSHER_APP_SECRET'),
      'app_id' => env('PUSHER_APP_ID'),
      'options' => [
               'cluster' => 'ap4',
               'useTLS' => true
       ],
],

You will need to change the default and the options

Next, you will need to download Npm you will find it online and we are going to get all the Pusher and Laravel Echo files that we need.

First: Pusher

composer require pusher/pusher-php-server "~4.0"

Second: Laravel Echo

npm install laravel-echo

from node_modules/laravel-echo/dist I moved two files in public echo.iife.js and echo.js. The two files will be called in the view later on.

Then in config/app.php, you gotta uncomment this

App\Providers\BroadcastServiceProvider::class,

Creating an Event.

I think everyone who is reading this is enough expert to run a migration and creating is the auth. In the first project where we used Pusher the Model we were using was called ‘Pool’.

If you want to create an event you need to run this command, i called my event EndPool

$php artisan make:event EndPool

Inside app\events you will find the new event and you will need to change your code with this.

<?php
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use App\Pool;
class EndPool implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $pool;
    public function __construct(Pool $pool)
    {
          $this->pool = $pool;
     }

    public function broadcastOn()
    {
          return new PrivateChannel('pool.'.$this->pool->id);
    }
}

In construct, I am passing all the data coming from a certain pool,

In the BroadcastOn we are actually creating the private channel name, so if we are passing $pool->id = 10, the actual name of the channel would be pool.10 .

Setting up the broadcast channel. In routes/channels.php we are going to create this:

Broadcast::channel('pool.{poolId}', function ($user, $poolId) {
    $pool = Pool::find($poolId);
    return $user->id == $pool->user_id;
});

This must return True or False. If it returns false the user cannot be subscribed on the private channel. If return false the user will be subscribed to the channel. In this way, you can setup witch user is going to the private channel.

Setting up the user Subscription and Listening

<script src="https://js.pusher.com/5.0/pusher.min.js"></script>
<script src="{{ asset('js/echo.iife.js') }}"></script>
<script src="{{ asset('js/echo.js') }}"></script>
<script>
Pusher.logToConsole = true;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '***Your Key *****',
    cluster: 'ap4',
    forceTLS: true
});
</script>

It is important to add the two echo files otherwise is not going to work.

<script>
Echo.private('pool.{{$pool->id}}')
.listen('EndPool', (e) => {
     alert(e.pool);
});
</script>

Simple as that. It is important that you are going to pass the id you want the users to be subscribed, then the route of the channel will choose who subscribe and who will not be subscribed.

Trigger an Event

event(new EndPool($brodcast_pool));

You can trigger an event using the following code in your controller, you will need to pass an instance of the Pool.

Final result

If everything is working you can log into the Pusher’s debug console and you will receive a notification when the users are subscribed

Here is the API message that the event has triggered

Here is our view where we actually used a modal, and a link to get in the right page.

Conclusion

First of all guys sorry for my English, I am Italian native so sorry for any writing mistake or if something does not make sense. I try to keep everything as short as possible so I think all of you knows how to create a Model, Migration, and Auth.
After understanding all the process is gonna take 10 minutes to create a private channel where you can broadcast your events.