Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

lucasantonio's avatar

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,
        },
    },
0 likes
0 replies

Please or to participate in this conversation.