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