Laravel broadcast events to Nuxt JS not being received

Question

I've got a Laravel 8.x project set up as an API with JWT auth. I'm using the Laravel Websockets package, I've also got the Laravel Echo package for Nuxt JS installed along with Pusher JS and Socket.io

I've started my web sockets server, and it's running on port 6001 on 127.0.0.1 , but when I load up my Nuxt JS front-end, I don't see any events coming through?

My event is called AgentStats , and looks like...

<?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->agent = $agent;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('agents');
    }
}

My event is triggered via my controller which requires a user to be logged in, it's then triggered via:

// $agent is my data
broadcast(new AgentStats($agent));

I've updated my channels.php file to include the new broadcast channel...

Broadcast::channel('agents', function ($agent) {
    return $agent;
});

For my front-end, my Nuxt JS client, I'm a logged in user and am listening on my agents channel for my AgentStats event:

<script>
export default {
  layout: 'account',
  mounted() {
    // nothing is logged
    this.$echo.channel('agents')
      .listen('AgentStats', (e) => {
          console.log(e)
      })
  }
}
</script>

My config is:

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'
  }]
]

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.

Answer 1

In your AgentStats Event file use

    public function broadcastOn(){
        return new Channel('agents');
    }

instead of

    public function broadcastOn()
    {
        return new PrivateChannel('agents');
    }

Answer 2

use ShouldBroadcastNow instead of ShouldBroadcast

before

use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class AgentStats implements ShouldBroadcast{...}

after

use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;

class AgentStats implements ShouldBroadcastNow{...}

here is a full example with websockets in SSR Nuxtjs with Laravel https://github.com/DengSihan/bootstrap