I'm using laravel, websocket and laravel-echo to build simple chat app it works fine on localhost when using ws://127.0.0.1:6000 but when upload app on the host and try tor run through wss://my-domain.com
i got
WebSocket connection to 'wss://shueur-app.shueur.com/app/865dc1ca593866642712?
protocol=7&client=js&version=8.4.0-rc2&flash=false' failed:
and here is my config
.env file
PUSHER_APP_ID=1870264
PUSHER_APP_HOST="my-domain.com"
PUSHER_APP_KEY=key
PUSHER_APP_SECRET=secret
PUSHER_APP_CLUSTER=mt1
PUSHER_APP_PORT=443
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_APP_HOST}"
VITE_PUSHER_PORT="${PUSHER_APP_PORT}"
VITE_PUSHER_SCHEME="https"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT="/home/shueurco/ssl/certs/shueur_app_shueur_com_d089e_8225b_1735046002_86197ef80e37f38293f9f3f8b4b5167c.crt"
LARAVEL_WEBSOCKETS_SSL_LOCAL_PK="/home/shueurco/ssl/keys/d089e_8225b_a195c551e1e59eb253da9d44c2872131.key"
braodcast.php
'pusher' => [
'driver' => 'pusher',
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
'app_id' => env('PUSHER_APP_ID'),
'options' => [
'cluster' => env('PUSHER_APP_CLUSTER'),
'encrypted' => true,
'useTLS' => true,
'host' => env('PUSHER_APP_HOST'),
'port' => env('PUSHER_APP_PORT'),
'scheme' => 'https',
'curl_options' => [
CURLOPT_SSL_VERIFYHOST => 0,
CURLOPT_SSL_VERIFYPEER => 0
]
],
websockets.php
'dashboard' => [
'port' => env('LARAVEL_WEBSOCKETS_PORT', 443),
],
app.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,
cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER || 'mt1',
wsHost: import.meta.env.VITE_PUSHER_HOST ? 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',
enabledTransports: ['ws', 'wss'],
encrypted: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
auth: {
headers: {
'Authorization': 'Bearer ' + localStorage.getItem('token'),
}
}
});
php artisan websockets:serve