Laravel Echo + Pusherjs, callback function not working?

Question

In my Laravel 10 Breeze app I'm setting up a private Pusher connection. I am using logtoconsole to debug the connection, and any request I put in works, and I can send and receive data. However, when it comes to processing the data inside a callback function, it's no use. What am I doing wrong?

To further explain, using pusher.logToConsole works. However putting any kind of code like, console.log, alert, setting state, etc. Does not work.

The channel is correct as changing it won't do much. My guess is there is something wrong with the event, as changing it to SomeRandomName doesn't yield an error nor different results.

Pusher.logToConsole = true;
window.Echo.private('admin_users').listen('DeliveryListUpdated', (e) => {
        console.log(1111)
        console.log(e)
    });

One of the logs does seem to be a error that could be a cause:
["No callbacks on private-admin_users for pusher:subscription_succeeded"]
I don't know why I am getting this.

This is my event class:

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

    public $message;

    /**
     * Create a new event instance.
     */
    public function __construct(
        $message
        //public User $user
    )
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array|Channel|Channel[]
     */
    public function broadcastOn()
    {
        return new PrivateChannel('admin_users');
    }
}

This is my bootstrap.js:

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
    // wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    // wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    // wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: true,
    // forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    // enabledTransports: ['ws', 'wss'],
});

.. and this is where i send a request (in my Laravel controller):

    public function activateWeek($id, Request $request) {
        $week = Week::find($id);
        $week->active = true;
        $week->save();

        broadcast(new DeliveryListUpdate(
            ['event_type' => 'remove_user',
                'user_id' => $request->user_id,
            ]))->toOthers();
    }

I tried listeners and event service providers, but I'm not sure if it's the solution for my problem. Did not seem to work for me anyhow.

Thanks in advance!

Answer 1

Add the broadcastAs() method inside your event:

public function broadcastAs()
{
    return 'message';
}

And when listening to your event on the broadcast, put a dot (.) in before of it:

window.Echo.private('admin_users').listen('.message', (e) => {
    console.log(1111)
    console.log(e)
});

It helped me fix a similar problem I was having.