Laravel echo

@Sinnbeck Yes pusher is getting events. But when i use dev tools and select WS like you said, it doesn't show anything.

@Phl21 Sounds like you arent connecting to pusher for some reason. Remember to refresh to reconnect.

If it is still empty, can you check that the echo code is actually loaded on the page? Add a console log before it or similar.

@Sinnbeck TI check with console log and the echo code is not loaded on the page

@Phl21 Thats the problem then. To help you further we need to see some more of your code.

@Sinnbeck how can i send you the code? It's not possible to send pictures

@Phl21 Post it here. Here is guide https://help.github.com/articles/creating-and-highlighting-code-blocks/

@Sinnbeck Here is the code for the echo (in app.js)

Echo.channel('donnee')
.listen('.donnee-message', (event) => {
   
    console.log(event)
})

here is the code for the event

<?php

namespace App\Events;

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 SendData implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    
    /**
     * Create a new event instance.
     *
     * @return void
     */

    public $donnee;

    public function __construct($donnee)
    {
        $this->donnee = $donnee;
    }

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

    public function broadcastAs()
    {
        return 'donnee-message';
    }
}

@Phl21 Lets only focus on javascript as that is what isnt working. Arent you importing the bootstrap file in the app.js ? https://github.com/laravel/laravel/blob/9.x/resources/js/app.js

The bootstrap file has the set up for Echo https://github.com/laravel/laravel/blob/9.x/resources/js/bootstrap.js#L26

Uncomment it to enable it in your own file

@Sinnbeck yes i import the boostrap file in app.js

@Phl21 Good

import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

Echo.channel('donnee')
.listen('.donnee-message', (event) => {
   
    console.log(event)
})

Boostrap file

window._ = require('lodash');

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
   broadcaster: 'pusher',
   key: process.env.MIX_PUSHER_APP_KEY,
  cluster: process.env.MIX_PUSHER_APP_CLUSTER,
  forceTLS: true,
  encrypted: true

 });

@Phl21 That looks correct. And are you importing it in your page? Either with @mix() or @vite() ?

And did you delete that console.log() besides Echo I suggested you added?

console.log('echo is loaded', Echo)
Echo.channel('donnee')
.listen('.donnee-message', (event) => {
   
    console.log(event)
})

@Sinnbeck i import the app.js file

@Phl21 How? If you add my debugging console.log() does that show up?

@Sinnbeck yes i delete the console.log().

@Sinnbeck i try with the code you send but nothing.

<script src="{{asset('js/app.js')}}></script>

@Phl21 That does not look correct. What are you using to compile your javascript? Mix or vite?

If you are in doubt, show your package.json file :)

@Sinnbeck i think it's mix

{
    "private": true,
    "scripts": {
        "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"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.2",
        "axios": "^0.21",
        "laravel-mix": "^6.0.49",
        "lodash": "^4.17.19",
        "postcss": "^8.4.6",
        "tailwindcss": "^3.1.0"
    },
    "dependencies": {
        "cross-env": "^7.0.3",
        "express": "^4.18.1",
        "laravel-echo": "^1.14.0",
        "mysql-events": "^0.0.1",
        "pusher-js": "^7.4.0"
    }
}

@Phl21 Indeed :) The code should be (you were also missing a closing ")

<script src="{{ mix('/js/app.js') }}"></script>

https://laravel.com/docs/8.x/mix#versioning-and-cache-busting Its a good idea to turn on cache busting (even in development). Otherwise your browser might not load any changes from your js/css files :) Try fixing that and run npm run dev

@Sinnbeck yes. Know i'm getting your console.log() message in the dev tool

OMG It's now good. Thank you.

@Phl21 Awesome :) Please mark a best answer to set the thread as solved then

@Sinnbeck i mark it already.

@Phl21 great :)