Laravel web socket pusher - not working but event fired

Question

I'm trying to use laravel websocket to preform socket connection in my app.

Doing all the steps in laravel docs but still not working, no connection appearing in dashborad, only event if I fired from laravel tinker(not fire the console.log I put in listen method)

Attached the files I have for more information about the case.

Server side :

Websocket.php file

 'apps' => [
        [
            'id' => env('PUSHER_APP_ID'),
            'name' => env('APP_NAME'),
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'path' => env('PUSHER_APP_PATH'),
            'capacity' => null,
            'enable_client_messages' => false,
            'enable_statistics' => true,
        ],
    ]

Event file

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

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

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

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

//    public function broadcastAs()
//    {
//        return "customers-updated";
//    }
}

Client side with laravel echo:

Service:
    this.echo = new Echo({
      broadcaster: 'pusher',
      key: environment.pusher.key,
      cluster: environment.pusher.cluster,
      // wsPort: 6001,
      // wsHost: 'http://crm.test/api',
      // useTLS: false,
      disableStats: true
    });

Component:

   const channel = this.echoService.echo.channel('customers').listen('CustomerUpdated', (e) => {
      console.log(e);
    });

api-message     Channel: customers, Event: App\Events\CustomerUpdated   22:45:31
subscribed  555985715.292445342 Channel: private-websockets-dashboard-statistics    22:36:49
occupied        Channel: private-websockets-dashboard-statistics    22:36:49

Answer 1

I'm not sure if you solve this problem, but if you don't let me response

In Angular and Laravel you need to use laravel websockets, laravel passport (if you want), pusher and laravel echo

As you are not going to use the pusher services as all you can set a pusher_app_id and the rest of the info at the .env file as a fake information just like this

PUSHER_APP_ID=123456
PUSHER_APP_KEY=123456ASD
PUSHER_APP_SECRET=ASD123456
PUSHER_APP_CLUSTER=mt1

what you need to change is in the broadcasting.php file not your websockets file (dont forget to enable App\Providers\BroadcastServiceProvider::class in your app.php file in config)

    'connections' => [
    
            'pusher' => [
                'driver' => 'pusher',
                'key' => env('PUSHER_APP_KEY'),
                'secret' => env('PUSHER_APP_SECRET'),
                'app_id' => env('PUSHER_APP_ID'),
                'options' => [
                    'cluster' => env('PUSHER_APP_CLUSTER'),
                    'useTLS' => true,
                    'host' => '127.0.0.1', //this is your localhost
                    'port' => 6001,
                    'scheme' => 'http'
                ],
            ],
...

then in your event file is almost complete, you need to declare some variables that is goig to emit the event when this receive something in my case this event is "count"

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

    public $count; //Look that you don't have this

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($count)
    {
        
        $this->count = $count; //Look that you don't have this

    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('channel-count'); //Look that you don't have your channel as private (this isn't bad, is just in case that you want your channel as priv)
    }
}

and don't forget to declare in the channels file in routes

Broadcast::channel('channel-count', function ($count) {
    return $count;
});

then in your angular project you need to install laravel echo

you can declare some data in the environments file to reuse it

export const environment = {
  production: false,
  urlBase: `http://127.0.0.1:8000`,
  pusher_key: `123456ASD`,
  pusher_cluster: `mt1`,
  pusher_host: `127.0.0.1`
};

Once you have installed, you need to import in your component file

import Echo from 'laravel-echo';

and declare it before the construct

echo: Echo;

in the constructor you need to declare as the docs of laravel echo says

constructor(

    //some services here

  ) {

    this.echo = new Echo({

      broadcaster: 'pusher',

      key: environment.pusher_key,

      wsHost: environment.pusher_host,

      cluster: environment.pusher_cluster,

      authEndpoint: `${environment.urlBase}/api/broadcasting/auth`, //here in my case I need to prove that the user is logged to give an access to the listen of the socket

      auth: {

        headers: {

          Accept: 'application/json',

          Authorization: `Bearer ${localStorage.getItem('token')}`

        }

      },

      wsPort: 6001,

      forceTLS: false,

      disableStats: true,

      enabledTransports: ['ws']

    })

  }

then in your onInit function you declare the listen event to the socket

ngOnInit(): void {

    this.echo.private('channel-count')

      .listen('CountEvent', (resp: any) => {
        console.log(resp)

      })

  }

and that's all, hope I help you. :)