Livewire + Echo + Pusher + Laravel Events + Private Channels

Can anyone help me with this Livewire + Echo + Pusher + Laravel Events issue

channels.php

Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

Event

...
namespace App\Events\Billing;
...
class PaymentMethodAttached implements ShouldBroadcast
...


    public function broadcastAs(): string
    {
        return 'payment.method.attached';
    }

    public function broadcastOn(): array
    {
        return [
            new PrivateChannel('App.Models.User.'.$this->user->id),
        ];
    }

Livewire Component Class

...
namespace App\Livewire\Billing\ValidationCredits;
...
class CreditPackOptions extends Component
...

    public function mount(): void
    {
        $userId = auth()->id(); // Get the authenticated user's ID

        $this->listeners = [
            "echo-private:App.Models.User.{$userId},.payment.method.attached" => 'handlePaymentMethodAttached',
        ];
    }

    public function handlePaymentMethodAttached()
    {
        // Log a message for debugging purposes
        ray('PaymentMethodAttached event received.');

    }

I’m getting EventHandlerDoesNotExist

JamesMills

2 years ago

Level 6

After trying almost everything I think I have this working using

protected function getListeners(): array
    {
        $userId = auth()->id();

        return [
            "echo-private:App.Models.User.{$userId},.App\Events\Billing\PaymentMethodAttached" => '$refresh',
        ];
    }

LaryAI

2 years ago

Level 58

It seems like you're trying to listen to a private channel event in your Livewire component and handle it with a method. However, there's a syntax error in the way you're defining the listener in your Livewire component. The event name should not have a comma before it. Here's how you can fix it:

public function mount(): void
{
    $userId = auth()->id(); // Get the authenticated user's ID

    $this->listeners = [
        "echo-private:App.Models.User.{$userId},payment.method.attached" => 'handlePaymentMethodAttached',
    ];
}

Notice that I removed the comma between the channel name and the event name. It should be a period instead, as you're concatenating the channel and event names.

Additionally, make sure that you have correctly set up Laravel Echo and Pusher in your frontend. You should have something like this in your bootstrap.js or a similar file where you set up Echo:

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,
    authEndpoint: '/broadcasting/auth',
    auth: {
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        },
    },
});

Make sure that you have the PUSHER_APP_KEY and PUSHER_APP_CLUSTER set in your .env file and that you have run npm install to install the necessary packages.

Lastly, ensure that you have included the CSRF token meta tag in your main layout blade file (layouts/app.blade.php or similar):

<meta name="csrf-token" content="{{ csrf_token() }}">

This is required for the authentication of private channels.

If you've done all of this and are still receiving the EventHandlerDoesNotExist error, it could be due to a typo in the event handler method name or because the method is not properly defined in your Livewire component. Double-check that the method handlePaymentMethodAttached exists in your Livewire component and is public.

If you continue to have issues, please provide more details about the error message and where it's occurring, and I'll be happy to help further.

Please or to participate in this conversation.