Kimmer
1035
8
Laravel

Echo + Pusher + Vue - listening for event does not work

Posted 7 months ago by Kimmer

I followed this tutorial to create a commenting system... https://pusher.com/tutorials/cms-laravel-vue-part-6

... and got it working nicely on a fresh Laravel install.

After transporting the code to the project I'm working on new comments doen't appear real time on the front end. They are saved to the database and send to Pusher. I can see them in Pushers Debug Console.

It seems like this code in the "Comments.vue" component is not receiving an event

Echo.private("comment").listen("CommentSent", e => {
    console.log('Event listen CommentSent');
    this.comments.push({
        user: {
            name: e.user.name
        },
        body: e.comment.body
    });
});

This is in the routes/channels.php

Broadcast::channel('comment', function ($user) {
    return auth()->check();
});

This is the app/Events/CommentSent.php

<?php

namespace App\Events;

use App\Models\Comment;
use App\Models\User;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;


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

    public $user;

    public $comment;

    public function __construct(User $user, Comment $comment)
    {
        $this->user = $user;

        $this->comment = $comment;
    }

    public function broadcastOn()
    {
        return new PrivateChannel('comment');
    }
}

In the bootstrap.js file

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,
    encrypted: true
});

Obviously I am willing top provide more code but I kept out the less relevant code (I think).

Does anyone see where I went wrong?

Thanks!

Please sign in or create an account to participate in this conversation.