Pusher error on server : 4009 Connection not authorized within timeout-CodePudding

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 :(
});

CodePudding user response：

The error is occuring because your client is not subscribing to a private or presence channel within the timeout. When authorized connections are enabled then any connection that does not subscribe to such a channel will be terminated. https://pusher.com/docs/channels/using_channels/authorized-connections/

Either turn off this setting or subscribe to a private/presence channel to resolve.

CodePudding user response：

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