WebSocket is closed before the connection is established. Soketi app Laravel for VPS

Question

I have a problem that lasts several days in my Laravel 10 project, I am implementing websockets using https://docs.soketi.app, on my VPS Ubunto 20.04, and in my project I have the soketi container that is running for me :

soketi:
       image: 'quay.io/soketi/soketi:latest-16-alpine'
       environment:
         SOKETI_METRICS_ENABLED: 1
       ports:
         - '6001:6001'
         - '9601:9601'
       networks:
         - network_forms
       restart: always

When accessing http://127.0.0.1:6001 and http://xx.xxx.xx.xxx:6001, both receive OK

In my .env file I have the following settings defined:

PUSHER_APP_ID=application id
PUSHER_APP_KEY=application key
PUSHER_APP_SECRET=application secret
PUSHER_HOST=localhost
PUSHER_PORT=6001
PUSHER_SCHEME=http
PUSHER_APP_CLUSTER=mt1

In the config/broadcasting.php file I have:

'pusher' => [
               'driver' => 'pusher',
               'key' => env('PUSHER_APP_KEY'),
               'secret' => env('PUSHER_APP_SECRET'),
               'app_id' => env('PUSHER_APP_ID'),
               'options' => [
                   'host' => env('PUSHER_HOST') ?: 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com',
                   'port' => env('PUSHER_PORT', 443),
                   'schema' => env('PUSHER_SCHEME', 'https'),
                   'encrypted' => true,
                   'useTLS' => env('PUSHER_SCHEME', 'https') === 'https',
               ],
               'customer_options' => [
                   // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
               ],
           ],

To finish, I have in 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,
       cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
       wsHost: 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',
       encrypted: true,
       disableStats: true,
       enabledTransports: ['ws', 'wss'],
});

WebSocket connection to 'wss://localhost:6001/app/app-key?protocol=7&client=js&version=7.6.0&flash=false' failed: WebSocket is closed before the connection is established.

ProxyPass/http://localhost:6001/
    ProxyPassReverse / http://localhost:6001/

Any idea? Thanks in advance!

Answer 1

wss is a secure connection. Try using ws for http connection, or use https with wss. The browser automatically uses wss if the site is opened via https.