10 months ago

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

Posted 10 months ago by Kimmer

I followed this tutorial to create a commenting system...

... 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');
        user: {
        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


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?


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