javascriptphplaravelpusherlaravel-echo

Pusher error on server : 4009 Connection not authorized within timeout


I run Laravel 9 app with :
vue 3.2.37
vite 2.9.15
pusher/pusher-php-server 7.0
laravel-echo 1.14.0

All it's work nice on localhost, but on server I have this two events in devtools->network->ws when it try to connect to the channel :
1st : {"event":"pusher:connection_established","data":"{\"socket_id\":\"137307.1921357\",\"activity_timeout\":120}"}
and the 2nd : {"event":"pusher:error","data":{"code":4009,"message":"Connection not authorized within timeout"}}

I have already enable Authorised Connections in my Pusher App settings but I don't know from where this unauthorized error come. It occured just on server side, on localhost I have a subscribed event
and there is a different between sockets shown in dev tools on localhost and on server :
localhost : two sockets are shown : ws://localhost:3000/ and wss://ws-eu.pusher.com/app/App_key?protocol=7&client=js&version=7.4.0&flash=false

but on server there is just one : wss://ws-eu.pusher.com/app/App_key?protocol=7&client=js&version=7.4.0&flash=false

bootstrap.js

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: 443, //import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: 443, //import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: true,  // (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    disableStats: true,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    enabledTransports: ['ws', 'wss'],
    //authEndpoint: "https://support.demkit.fr/broadcasting/auth",
    encrypted: true,
});

.env :

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}"

channels.php

Broadcast::channel('messages.{RoomId}', function ($user, $RoomId) {
  //if(Auth::check())
    //return ['id' => $RoomId];    
   return true; // I tried to return all time true to get authorization but it doesn't work :(
});

Solution

  • 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