Jul 7, 2023
0
Level 2
Websocket with vitejs dev environment
I'm trying to use Laravel websocket with vitejs but I can't.
by the looks of it, vitejs takes over the ws protocol and only lets me connect via WSS and it doesn't connect, it keeps giving an unstabilized connection error.
Is there any way I can make Websocket run with Vitejs?
I'm out of answers and I can't find it anywhere!
Below are files:
.env:`
PUSHER_APP_KEY=WqBgZpZYJwTrQ47cGzxZg2ce
PUSHER_APP_SECRET=HPuQf6tcMPnUfaDXWqgXtyCg
PUSHER_HOST=blog-curso.test
PUSHER_PORT=6001
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1
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}"
config/broadcasting.php:
'pusher' => [
'driver' => 'pusher',
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
'app_id' => env('PUSHER_APP_ID'),
'options' => [
'host' => env('PUSHER_HOST'),
'port' => env('PUSHER_PORT', 443),
'scheme' => env('PUSHER_SCHEME', 'https'),
'encrypted' => true,
],
'client_options' => [
// Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
],
],
config/websockets.php:
'apps' => [
[
'id' => env('PUSHER_APP_ID'),
'name' => env('APP_NAME'),
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
// 'path' => env('PUSHER_APP_PATH'),
// 'capacity' => null,
'enable_client_messages' => false,
'enable_statistics' => true,
],
],
bootstrap.js:
window.Echo = new Echo({
broadcaster: 'pusher',
key: import.meta.env.VITE_PUSHER_APP_KEY,
wsHost: import.meta.env.VITE_PUSHER_HOST,
wssHost: import.meta.env.VITE_PUSHER_HOST,
wsPort: 6001,
wssPort: 6001,
cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
forceLTS: true,
encrypted: true,
enabledTransports: ['ws', 'wss'],
});
vite.config.js:
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
server: {
host: 'blog-curso.test',
port: 5173,
hmr: {
host: 'blog-curso.test',
port: 6001,
},
},
Please or to participate in this conversation.