WebSocket connection to 'wss://www.domain.com:6001/app/test?protocol=7&client=js&version=4.3.1&flash=false' failed

[zmoukit]

I'm getting this error only on production on localhost everything works perfect.

My configuration

- Apache2 server
- "laravel/framework": "^7.24",
- "beyondcode/laravel-websockets": "^1.13",
- "pusher/pusher-php-server": "~4.0"
- "pusher-js": "^4.3.1",

bootstrap.js

window.Echo = new Echo({
    broadcaster: "pusher",
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsHost: window.location.hostname,
    wsPort: 6001,
    wssPort: 6001,
    disableStats: true,
    //enabledTransports: ["ws", "wss"],
    forceTLS: false,
})

websockets.php

'apps' => [
        [
            'id' => env('PUSHER_APP_ID'),
            'name' => env('APP_NAME'),
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'enable_client_messages' => true,
            'enable_statistics' => false,
            'encrypted' => true,
        ],
    ],
'ssl' => [
	'local_cert' => '/home/myuser/public_html/storage/ssl/fullchain.pem', //env('LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT', null),
	'local_pk' => '/home/myuser/public_html/storage/ssl/privkey.pem', //env('LARAVEL_WEBSOCKETS_SSL_LOCAL_PK', null),
	'verify_peer' => false,
]

broadcasting.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'),
		//'useTLS' => true,
		'encrypted' => true,
		'host' => 'www.domain.com', //I tried also 127.0.0.1
		'port' => env('PUSHER_PORT'),
		//'scheme' => 'https',
		'curl_options' => [
			CURLOPT_SSL_VERIFYHOST => 0,
			CURLOPT_SSL_VERIFYPEER => 0,
		]
	],
]

/etc/supervisor/conf.d/websockets.conf

[program:websockets]
process_name=%(program_name)s
#command=sudo php artisan websockets:serve --host=127.0.0.1
command=php /home/myuser/public_html/artisan websockets:serve
#directory=/home/myuser/public_html
autostart=true
autorestart=true
user=myuser
redirect_stderr=true
stderr_logfile=/home/myuser/public_html/storage/logs/websockets/websockets.err.log
stdout_logfile=/home/myuser/public_html/storage/logs/websockets/websockets.out.log

.env

BROADCAST_DRIVER=pusher
PUSHER_APP_ID="test"
PUSHER_APP_KEY="test"
PUSHER_APP_SECRET="test"
PUSHER_HOST=domain.com
PUSHER_PORT=6001

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
MIX_PUSHER_HOST="${PUSHER_HOST}"
MIX_PUSHER_PORT="${PUSHER_PORT}"

If anyone has managed to get wss working, can you tell me where I am going wrong.

[samehdoush]

i have same issue on whm/cpanel

[modavidc]

1. In bootstrap.js,

a. Discomment enabledTransports. b. Change forceTLS to true.

2. In your SSL configuration, check permission for folders and files. The folder where SSL cert and key are need (folder = 700, files 600).

3. Try to check to another port, like 2053. In my case Cloudflare was blocking 6001.

**IMPORTANT: Check the ports are opened. **

[yovandermawan2123]

1. In bootstrap.js,

a. Discomment enabledTransports. b. Change forceTLS to true.

2. In your SSL configuration, check permission for folders and files. The folder where SSL cert and key are need (folder = 700, files 600).
3. Try to check to another port, like 2053. In my case Cloudflare was blocking 6001.

**IMPORTANT: Check the ports are opened. **

I have the same issue. im using cloudflare and i was changing the port, but its still doesnt work. do u have any advice to me? and also when im checking with my view files,it showing "Failed to connect to Pusher.". thanks and im sorry for my poor english.

[booladsudan]

First follow the documentation on how to setup SSL support in the official page of Laravel Websocket.

And then try to add/edit the following:

• Set/downgrade your pusher to 5.x: composer.lock "pusher/pusher-php-server": "^5.0",

• Comment path in 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,
        ],
    ],

• Set host name to your domain name in config/broadcasting.php

       'pusher' => [
            ...
            'options' => [
                'host' => 'your_domain.com',
                ...
            ],
        ],

• Finally in you JS where Echo is situated add the following:

window.Echo = new Echo({
    ....
    forceTLS: true,
    enabledTransports: ['ws', 'wss'],
});

And of course don't forget to setup your environmental variables. Also don't forget to clear config files php artisan optimize:clear

Let me know if this works! Thank you.

[booladsudan]

I have update this answer here. :) Answer