Laravel echo can't listen channel when deploying app on server

I have a laravel 9 App and vueJs 3. I use laravel pusher to send messages on real time and listen to channels in front-end with laravel echo like this :

Echo.private(`messages.${this.room.id}`).listen(".new-message", (e) => {
        console.log("done")
        this.chats.push({
          message: e.message.message,
          image_path : e.message.image_path,
          from_id: e.from.id,
          to_id: e.to.id,
          from: e.from,
        })

the configuration in bootstrap file:

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    enabledTransports: ['ws', 'wss'],
});

.env file :

BROADCAST_DRIVER=pusher    
PUSHER_APP_ID=1******
PUSHER_APP_KEY=6******
PUSHER_APP_SECRET=8*********
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=eu

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

all works fine at localhost and messages was recieving at real time, but when I deploy the app on server , it's not working , I can't listen to the channel. I don't know if I must append another configuration

Any suggestions ?
thank's

Slution

I resolved this issue by adding customize the authorization endpoint check Customizing The Authorization Endpoint docs from laravel

web.php :

Route::post('/pusher/user-auth', [PusherController::class, 'pusherAuth']);

PusherController :

/**
 * Authenticates logged-in user in the Pusher JS app
 * For private channels
 */
public function pusherAuth(Request $request)
{

    $user = auth()->user();
    $socket_id = $request['socket_id'];
    $channel_name =$request['channel_name'];
    $key = config('broadcasting.connections.pusher.key'); 
    $secret = config('broadcasting.connections.pusher.secret'); 
    $app_id = config('broadcasting.connections.pusher.app_id'); 
    if ($user) {
 
        $pusher = new Pusher($key, $secret, $app_id);
        $auth = $pusher->socketAuth($channel_name, $socket_id);
        return response($auth, 200);

    } else {
        header('', true, 403);
        echo "Forbidden";
        return;
    }
}

and the bootstrap file :

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: 443, //import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: 443, //import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS:  (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    disableStats: true,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    enabledTransports: ['ws', 'wss'],
    authEndpoint: "/pusher/user-auth", // this is the new endpoint for auth
    encrypted: true,
});

and finaly don't froget to change the BROADCAST_DRIVER in .env file to pusher not log