Listen callback is not working in Pusher API Laravel 5.4

Question

Problem

I can confirm that Pusher API is receiving the message. I saw in Debug console of Pusher website. But listen callback is not working at all.

I am following this tutorial to implement Pusher in Laravel 5.4

Below were the step by step things done.

1. composer require pusher/pusher-php-server
2. npm install --save laravel-echo pusher-js
3. instantiated the Echo instance in your resources/assets/js/bootstrap.js
4. Initialized the pusher key in env and in bootstrap.js file.

Finally, I wrote below code in blade.

<script>
    window.Echo.channel('SendMessageChannel.1')
        .listen('App.Events.SendMessageEvent', (e) => {
            console.log(e);
        });
</script>

Controller Code

broadcast(new SendMessageEvent("Hi"))->toOthers();

Event Code

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

    public $Message;

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

    public function broadcastOn()
    {
        return new PrivateChannel('SendMessageChannel.2');
    }

}

Am I missing anything?

Answer 1

1. You have to listen to: SendMessageEvent without the namespace.
2. when you listen to a private channel, you need to to listen to private-SendmessageChannel or you use Echo.private('SendmessageChannel')

Because we fixxed the issue via teamspeak at some parts it's difficult to explain it in this answer in full detail.

One problem was also that the event was fired before the client started to listen to it. The best way is to debug with the pusher console and to fire custom events.

Answer 2

I have been using Laravel 5.4 events quite efficiently since 6 months with a project. I had same trouble when I was doing initial setup. Let me guide you with whatever I have done to get it working.

I can see you have controller to initiate an Event, SendMessageEvent to send message content to pusherjs. You need to check following stuff to get it going.

Check 1:

But you have not mentioned if you have an Eventhandler defined. Event handler works as a bridge between the SendMessageEvent and its actual broadcaster. So define an Eventhandler create one folders like app / Handlers / Events /. (here Handlers and Events are folders. where Events is inside Handlers)

create one file inside this Events folder with a name e.g.

HandleMyMessage.php And put this code in it:

<?php
namespace App\Handlers\Events;
use App\Events\SendMessageEvent;    // This should be your event class..
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Contracts\Queue\ShouldQueue;

class HandleMyMessage{
   protected $name;

   public function __construct() {
      //
   }
   public function handle(Message $event) {
        // No need to write anything here
   }
}

Check 2: There should be one provider at app / Providers / EventServiceProvider.php location, and put following code in EventServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\Facades\Event;
use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;

class EventServiceProvider extends ServiceProvider
{
    /**
     * The event listener mappings for the application.
     *
     * @var array
     */
    protected $listen = [
        'App\Events\SendMessageEvent' => [
            'App\Handlers\Events\EventServiceProvider',
        ],
    ];

    /**
     * Register any events for your application.
     *
     * @return void
     */
    public function boot()
    {
        parent::boot();
    }
}

Check 3: And you should change syntax of sending event message in your controller like this:

$broadcast_data['first_name'] = 'John';
$broadcast_data['last_name'] = 'Doe';
$return_socket['data'] = $broadcast_data;

Event::fire(new Message($return_socket));       //  Sending message to pusherjs via Laravel Event.

More on this, you also need Redis installed on your system and run it.

Hope this helps. If you need more information for any of above, just comment. I am posting a reference link for the same.

Happy coding!!! :-)

Answer 3

I got it working. Below is the correct code. I hope this will be useful to others for sending real time messaging.

Js Work

<script>
    window.Echo.channel('private-SendMessageChannel.{!! \Auth::user()->UserID !!}')
        .listen('SendMessageEvent', (e) => {
            console.log(e);
        });
</script>

Controller Code

broadcast(new SendMessageEvent("Hi", 1))->toOthers();
//Here 1 is recepient ID

Event Code

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

    public $Message;
    private $UserID;

    public function __construct($message, $RecepientID)
    {
        $this->Message = $message;
        $this->UserID = $RecepientID;
    }

    public function broadcastOn()
    {
        return new PrivateChannel('SendMessageChannel.' . $UserID);
    }

}

Answer 4

In my case, I had used:

    public function broadcastAs()
    {
        return 'message';
    }

If you've set the broadcast name, you must use that name in the listener differently.

For those who have done the same mistake as I did:

If you customize the broadcast name using the broadcastAs method, you should make sure to register your listener with a leading . character. This will instruct Echo to not prepend the application's namespace to the event:

https://laravel.com/docs/9.x/broadcasting#broadcast-name