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.