Laravel Echo not listening for pusher events

Question

Trying to create a kind of chat app with laravel and vuejs. Once the message is sent, I fire the event from laravel which reflects on the pusher debug console with the right event class but the listen callback from vuejs is not called at all.

created () {
        window.Echo.channel('chat')
            .listen('MessageSent', (e) => {
                console.log(e); //not getting this
                this.sentMessages.push({
                    message: e.message.message,
                    user: e.user
                });
            });

    },

Below is a screenshot of the debug console from pusher see the image here as am told I can't embed images yet

Answer 1

Try this:

created () {
        window.Echo.channel('chat')
            .listen('App\\Events\\Chats\\MessageSent', (e) => {
                console.log(e);
                this.sentMessages.push({
                    message: e.message.message,
                    user: e.user
                });
            });

    },

By default, Laravel will broadcast the event using the event's class name. However, you may customize the broadcast name by defining a broadcastAs method on the event:

public function broadcastAs()
{
    return 'server.created';
}

The above was copy pasted from Laravel Broadcast Name

My recommendation:

I have always used private channels for chat and you must too. Read here why