Laravel Reverb and Nuxt 3

I'm trying to get this rolling and it's not working.

To my surprise, apparently, the issue is with the Laravel application (a 10 upgraded to 11).

I watched https://laracasts.com/series/lukes-larabits/episodes/17 and it looks pretty straightforward.

This is the echo client setup as a nuxt plugin

import axios from 'axios';
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';


export default defineNuxtPlugin(() => {

  console.log('loading echo.client.js');
  window.axios = axios;
  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


  window.Pusher = Pusher;
  
  const ws =new Echo({
    broadcaster: 'reverb',
    key: 'uqoroomcqjq8siyejiye',
    wsHost: 'localhost',
    wsPort: 8080,
    wssPort: 443,
    forceTLS: false,
    enabledTransports: ['ws', 'wss'],
  });

  window.Echo = ws;

  return {
    provide: {
      ws
    }
  }
});

This is how I'm susbscribing to a Echo channel

const channel = `App.Models.User.${auth.user.id}`;
const ws = useNuxtApp().$ws;

onMounted(async ()  => {

  await ws.private(channel)
    .listen('tea.updated', (e) => {
      console.log('tea.updated', e);
    });

  console.log('WS::channel() : ',channel);
  console.log('WS::socketId() : ',ws.socketId());
});

onUnmounted(() => {
  ws.leave(channel);
  console.log('WS::leave() : ',channel);
});

This is what I get on the browser console

So far so good. I even see the ping from the client once I start the reverb server

 Message Received ......................................................... 431194327.620463464

   1▕ {
   2▕     "event": "pusher:ping",
   3▕     "data": []
   4▕ }

  Message Handled ......................................................... 431194327.620463464

My custom event:

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

    public function __construct(public Tea $tea, protected User $user)
    {
    }

    public function broadcastAs(): string
    {
        ray(__METHOD__ . ':' . __LINE__ . ': TeaEvent::broadcastAs')->green();
        return 'tea.updated';
    }

    public function broadcastOn(): array
    {
        $channel = "App.Models.User.{$this->user->id}";
        ray(__METHOD__ . ':' . __LINE__ . ': TeaEvent::broadcastOn : ' . $channel)->green();

        return [
            new PrivateChannel($channel),
        ];
    }
}

routes/channels.php

// ray(__FILE__.':'.__LINE__.': channels.php')->green();

Broadcast::channel('App.Models.User.{id}', function ($user, $id) {

    ray(__METHOD__.':'.__LINE__.': $user->id = '.$user->id)->green();

    return $user->id === $id;
});

I commented the first ray() call because the channels.php seems to run every 3 or 4 seconds and my Ray client was being spammed....

Finally, a small artisan command to test this out:

Artisan::command('broadcast-test', function () {

    $tea = \App\Models\Tea::inRandomOrder()->first();
    $user = \App\Models\User::find('01hwz799tf6pb866efgs76v2fm');

    \App\Events\TeaEvent::dispatch($tea, $user);
});

I have BROADCAST_CONNECTION=reverb in the .env file.

Both config/broadcasting.php and config/reverb.php are the same as the ones in the larabit's repo from Luke

I start up the queue, I run that command and nothing happens on the nuxt client. Not an error, warning or anything

I see the tick on the queue console, on the Ray app, I see both ray() calls to broadcastAs() and broadcastOn() methods, so that's working.

I don't know what is going on.

The one ray() call that does not show up is the one inside the callback of the route/channels.php. That callback is never executed. I don't know when it should be called but I think at least once it should be.

I'm tailing laravel.log and also nothing there.

In any case, I'm out of ideas.