title: Laravel broadcast events to Nuxt JS not being received
body: <p>I've got a Laravel 8.x project set up as an API with JWT auth. I'm using the <a href="https://beyondco.de/docs/laravel-websockets/getting-started/introduction" rel="nofollow noreferrer">Laravel Websockets</a> package, I've also got the <a href="https://github.com/nuxt-community/laravel-echo" rel="nofollow noreferrer">Laravel Echo package for Nuxt JS</a> installed along with Pusher JS and Socket.io</p>
  <p>I've started my web sockets server, and it's running on port <code>6001</code> on <code>127.0.0.1</code>, but when I load up my Nuxt JS front-end, I don't see any events coming through?</p>
  <p>My event is called <code>AgentStats</code>, and looks like...</p>
  <pre class="lang-php prettyprint-override"><code>&lt;?php
  
  namespace App\Events;
  
  use App\Models\ProfilerAgent;
  
  use Illuminate\Broadcasting\Channel;
  use Illuminate\Broadcasting\InteractsWithSockets;
  use Illuminate\Broadcasting\PresenceChannel;
  use Illuminate\Broadcasting\PrivateChannel;
  use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
  use Illuminate\Foundation\Events\Dispatchable;
  use Illuminate\Queue\SerializesModels;
  
  class AgentStats implements ShouldBroadcast
  {
      use Dispatchable, InteractsWithSockets, SerializesModels;
  
      /**
       * Profiler Agent Details
       *
       * @var \App\Models\ProfilerAgent
       */
      public $agent;
  
      /**
       * Create a new event instance.
       *
       * @return void
       */
      public function __construct(ProfilerAgent $agent)
      {
          $this-&gt;agent = $agent;
      }
  
      /**
       * Get the channels the event should broadcast on.
       *
       * @return \Illuminate\Broadcasting\Channel|array
       */
      public function broadcastOn()
      {
          return new PrivateChannel('agents');
      }
  }
  </code></pre>
  <p>My event is triggered via my controller which requires a user to be logged in, it's then triggered via:</p>
  <pre class="lang-php prettyprint-override"><code>// $agent is my data
  broadcast(new AgentStats($agent));
  </code></pre>
  <p>I've updated my <code>channels.php</code> file to include the new broadcast channel...</p>
  <pre class="lang-php prettyprint-override"><code>Broadcast::channel('agents', function ($agent) {
      return $agent;
  });
  </code></pre>
  <p>For my front-end, my Nuxt JS client, I'm a logged in user and am listening on my <code>agents</code> channel for my <code>AgentStats</code> event:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
  export default {
    layout: 'account',
    mounted() {
      // nothing is logged
      this.$echo.channel('agents')
        .listen('AgentStats', (e) =&gt; {
            console.log(e)
        })
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>My config is:</p>
  <pre class="lang-js prettyprint-override"><code>buildModules: [
    // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
    '@nuxtjs/tailwindcss',
    '@nuxtjs/moment',
    ['@nuxtjs/laravel-echo',{
        broadcaster: 'pusher',
        key: 'websocketkey', // this is what's in my env
        encrypted: false,
        wsHost: '127.0.0.1', // default url
        wsPort: 6001,
        disableStats: true,
        authEndpoint: '127.0.0.1/broadcasting/auth'
    }]
  ]
  </code></pre>
  <p>Really not sure what I'm missing, I've been debugging for several hours and can't understand why my Nuxt JS project fails to show any data when I submit an event.</p>