Realtime Events In Laravel Not Work With Pusher

@Sinnbeck I'm embarrassed to say it but I don't know the difference , and each article saying something difference and the laravel documentation is not clear this point for me even that i try it but it now working too , the difficult thing for me is how to understand all this ways , and more difficult to know why they not working , i checked the js file and the event and the pusher keys and the config even i used the broadcasting route , and finally i used echo and it's not working too , i put it inside bootstrap file and i test it in external file cause i cant link it

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

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '88e543e3fd1a8705aae2',
    cluster: 'eu',
    forceTLS: true
});

@MahmoudAdelAli yeah it's a bit tricky to get at first. Short explanation. Taylor thought the api for pusher was way too complicated. Therefor he added a layer on top called echo. So instead of writing it in pusher syntax, he made a much more simple api. So it's kinda like laravel sits on top of php (not exactly but kinda the same thing)

@Sinnbeck Thank your for this great explain , now i understand this part , but there's problem here i think after i install Echo and try to use it , in laravel documentation i should to put the following code inside bootstrap.js inside resources

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

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '88e543e3fd1a8705aae2',
    cluster: 'eu',
    forceTLS: true
});

and this code inside my view i think

   <script>

        Echo.channel(`public`)
            .listen('PublicEvent', (e) => {
                console.log(e.message);
            });

    </script>

if this right there's 2 problems , first one i don't work with vite to run it with npm or web.mix , and second one cant use Echo inside blade cause i should import it and the import should use inside module if i use another js file , am sorry for long comments , but it look like big failed for me cause i face problem like that without understand the issue

@MahmoudAdelAli you can use it directly in blade if you want. I personally use it in a js file, but in blade is fine.

For it to work in a blade file you need a few things. First bind Echo to window (you already did). This allows you to call it from anywhere. Next make sure the @vite() helper is before the script where you use it. Order matters

@Sinnbeck now i understand , i think i prefer to use it outside the blade without vite , a tried to understand the documentation correctly , and i start step by step

#channels.php


Broadcast::channel('public', function () {
    return true;
});

and PublicEvent

class PublicEvent
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public string $queue = 'default';
    public string $connection = 'pusher';
    public string $message;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(String $message)
    {
        $this->message = $message;
    }


    public function broadcastOn(): Channel
    {
        return new Channel('public');
    }
    public function broadcastAs()
    {
        return 'public.event';
    }
}

and the external js file

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

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '88e543e3fd1a8705aae2',
    cluster: 'eu',
    forceTLS: true
});
Echo.channel(`public`)
    .listen('.public.event', (e) => {
        console.log(e.message);
    });

with my controller

    public function index()
    {

        return response()
            ->view('target.index');
    }

    public function create()
    {
        PublicEvent::dispatch('test');
        return 'Done';
    }

and my broadcasting.php if it make a difference

    'default' => env('BROADCAST_DRIVER', 'pusher'),

    /*
    |--------------------------------------------------------------------------
    | Broadcast Connections
    |--------------------------------------------------------------------------
    |
    | Here you may define all of the broadcast connections that will be used
    | to broadcast events to other systems or over websockets. Samples of
    | each available type of connection are provided inside this array.
    |
    */

    'connections' => [

        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'host' => env('PUSHER_HOST') ?: 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com',
                'port' => env('PUSHER_PORT', 443),
                'scheme' => env('PUSHER_SCHEME', 'https'),
                'encrypted' => true,
                'useTLS' => true,
                'cluster' => 'eu',

            ],

i don't know if this make difference too

PUSHER_APP_ID= {I Write IT}
PUSHER_APP_KEY={I Write IT}
PUSHER_APP_SECRET={I Write IT}
PUSHER_HOST= 
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=eu

i use php serve and the queue default is empty i think the problem from my misunderstand or something

@MahmoudAdelAli start by sending an event and check the pusher website to see if you receive it

Make sure to start the queue just before sending it

php artisan queue:work 

@Sinnbeck i visit fire-event route with

  public function create()
    {
        PublicEvent::dispatch('test');
        return 'Done';
    }

in controller where am running

php artisan queue:work  
   INFO  Processing jobs from the [default] queue.  

and there's no logs

@MahmoudAdelAli can you show your broadcasting class? https://laravel.com/docs/9.x/broadcasting#defining-broadcast-events is that the PublicEvent class? I see some of a class in the first post but alot is missing?

@Sinnbeck Really thank you for your helping , but i found the problem in some tutorials they comment the broadcast in app service provider and they never add

implements ShouldBroadcast

to the class name so when i add it every thing is work and with laravel echo , but still 1 thing i tired from tried to make it works , the watch is not working cause there's updates and am searching from 9 AM GMT+2 and i found your solution for discussion had a same problem but with new update

The solution

https://laravel-mix.com/docs/5.0/installation

The Discussion

https://laracasts.com/discuss/channels/javascript/npm-run-watch-not-working-missing-script-watch

"dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"

Thank you you helped me twice , but if you can recommended a source to study this events cause i should use it when create and send email with complex tasks it 'll help me more ,

and thank you again :)

@MahmoudAdelAli happy to help. I wrote my own code some years ago so I don't quite remember. I think I mostly used the official docs and a lot of trail and error :)

@Sinnbeck Thank you for helping us all this years <3