Not found error on laravel private server echo

Question

I have an issue on my laravel echo, im using pusher, this things print on my log

laravel-echo.js:2567     POST http://localhost:3000/broadcasting/auth 404 (Not Found)

this is how i use the private on frontend

 var echo_to = `chat.{{ Auth::user()->id }}`;
            console.log(echo_to);

            window.Echo.private(echo_to)
                .listen('ChatEvent', (e) => {
                    console.log(e);
                });

this is my event on sending chat

class ChatEvent implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $chat;
    public $id;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Chat $chat, int $id)
    {
        $this->chat = $chat;
        $this->id = $id;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        Log::info("Send to private: chat.{$this->id}");
        return new PrivateChannel('chat.' . $this->id);
    }
}

it has been successfully sent, because in my laravel.log it printing

[2023-09-02 18:38:45] local.INFO: Send to private: chat.2  
[2023-09-02 18:41:12] local.INFO: Send to private: chat.2  
[2023-09-02 18:44:26] local.INFO: Send to private: chat.2  
[2023-09-02 18:54:09] local.INFO: Send to private: chat.2  
[2023-09-03 06:44:21] local.INFO: Send to private: chat.2  
[2023-09-03 06:44:21] local.INFO: Send to private: chat.2  
[2023-09-03 06:44:21] local.INFO: Send to private: chat.2  
[2023-09-03 06:44:41] local.INFO: Send to private: chat.2  
[2023-09-03 07:21:50] local.INFO: Send to private: chat.2  
[2023-09-03 07:22:27] local.INFO: Send to private: chat.2  
[2023-09-03 07:22:37] local.INFO: Send to private: chat.2  
[2023-09-03 07:22:44] local.INFO: Send to private: chat.2  
[2023-09-03 07:22:45] local.INFO: Send to private: chat.2  
[2023-09-03 07:24:50] local.INFO: Send to private: chat.2  

and this is the laravel-echo.js that loading the echo

import Echo from 'laravel-echo';

window.Pusher = require("pusher-js")

console.log("ENV: " + process.env.MIX_PUSHER_APP_KEY, process.env.MIX_PUSHER_APP_CLUSTER);

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

and im also having the laravel-echo-server.json

{
    "authHost": "http://localhost",
    "authEndpoint": "/broadcasting/auth",
    "clients": [
        {
            "appId": "f22ac84fbeaf11ea",
            "key": "24ef3a97bef7f1451fc74dfe6eba46c7"
        }
    ],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "secureOptions": 67108864,
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": true,
        "allowOrigin": "http://localhost:8000",
        "allowMethods": "GET",
        "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
    }
}

and i've set my env for this

BROADCAST_DRIVER=pusher

Please let me know if you found the issue that im having...

Answer 1

I finally found the problem, i have specified the channels.php

<?php

use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Broadcast;

/*
|--------------------------------------------------------------------------
| Broadcast Channels
|--------------------------------------------------------------------------
|
| Here you may register all of the event broadcasting channels that your
| application supports. The given channel authorization callbacks are
| used to check if an authenticated user can listen to the channel.
|
*/

Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

Broadcast::channel('chat.{id}', function ($user, $id) {
    return true;
});

but in my app.php, it looks like this

//App\Providers\BroadcastServiceProvider::class,