Problem establishing websockets connection

Question

I have been trying to solve my problem with connecting via websocets for many hours. I have already checked a thousand different configurations, browsed various forums and nothing solved my problem, so please tell me what is wrong with my configuration.

For websockets I use pusher, echo and laravel-websocets: Backend:

 "php": "^8.1",
 "beyondcode/laravel-websockets": "^1.14",
 "predis/predis": "^2.2",
 "pusher/pusher-php-server": "^7.2"

Frontend:

 "laravel-echo": "^1.15.3",
 "pusher-js": "^4.4.0", (I used a higher version but I downgraded it following the advice in one of the threads)
 "react": "^18.2.0",

I have an application that uses the API (laravel 10) where, among other things, the websocets server is launched. I have an application in react.js that connects to API and websockets. Applications run on a VPS server with OVH - Ubuntu 23.04, where NGINX is installed and Docker containers run

In the best case scenario for an SSL connection I get this error: In the best case scenario for an SSL connection I get this error

when I use the server IP directly in the configuration (http connection), everything works as it should: when I use the server IP directly in the configuration (http connection), everything works as it should

ports on the server are unblocked: ports on the server are unblocked

Details of my environment: BACKEND 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'),
 'cluster' => env('PUSHER_APP_CLUSTER'),
 'scheme' => env('PUSHER_SCHEME', 'http'),
 'encrypted' => true,
 'useTLS' => env('PUSHER_SCHEME') === 'https',
 ],
 ],

websockets.php

 'apps' => [
 [
 'id' => env('PUSHER_APP_ID'),
 'name' => env('APP_NAME'),
 'key' => env('PUSHER_APP_KEY'),
 'secret' => env('PUSHER_APP_SECRET'),
 'host' => env('PUSHER_APP_HOST'),
 'port' => env('PUSHER_APP_PORT'),
 'capacity' => null,
 'enable_client_messages' => false,
 'enable_statistics' => false,
 'enable_logging' => true,
 ],
 ],

.env

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=XXX
PUSHER_APP_KEY=XXX
PUSHER_APP_SECRET=XXX
PUSHER_APP_CLUSTER=mt1
PUSHER_HOST=127.0.0.1
PUSHER_PORT=6001
PUSHER_SCHEME=http

NGINX config

server {
 listen 6002 ssl http2;
 listen [::]:6002 ssl http2;
 server_name ---mydomain.com---;
 server_tokens off;
 ssl_certificate /etc/letsencrypt/live/---mydomain.com---/fullchain.pem;
 ssl_certificate_key /etc/letsencrypt/live/---mydomain.com---/privkey.pem;
 ssl_protocols TLSv1.2 TLSv1.3;
 ssl_ciphers TLS13-AES-256-GCM-SHA384:TLS13-CHACHA20-POLY1305-SHA256:TLS_AES_256_GCM_SHA384:TLS-AES-256-GCM-SHA384:TLS_CHACHA20_POLY1305_SHA256:TLS-CHACHA20-POLY1305-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES256-SHA;
 ssl_prefer_server_ciphers on;
 ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
 add_header X-Frame-Options "SAMEORIGIN";
 add_header X-XSS-Protection "1; mode=block";
 add_header X-Content-Type-Options "nosniff";
 index index.html index.htm index.php;
 charset utf-8;
 location / {
 proxy_pass http://127.0.0.1:6001;
 proxy_read_timeout 60;
 proxy_connect_timeout 7d;
 proxy_redirect off;
 proxy_http_version 1.1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection 'upgrade';
 proxy_set_header Host $host;
 proxy_cache_bypass $http_upgrade;
 }
 access_log /var/log/nginx/access_ws.log;
 error_log /var/log/nginx/error_ws.log;
}
server {
 server_name ---mydomain.com---;
 listen 443 ssl;
 ssl_certificate /etc/letsencrypt/live/---mydomain.com---/fullchain.pem;
 ssl_certificate_key /etc/letsencrypt/live/---mydomain.com---/privkey.pem;
 add_header 'Content-Security-Policy' 'upgrade-insecure-requests';
 location /service/ {
 proxy_pass http://127.0.0.1:8000/;
 proxy_http_version 1.1;
 }
 location / {
 proxy_pass http://127.0.0.1:3000;
 proxy_http_version 1.1;
 }
}

docker-compose.yml

version: '3'
services:
 webservice:
 build:
 context: .
 dockerfile: webservice/Dockerfile
 ports:
 - "8000:8000"
 - "6001:6001"
 depends_on:
 - redis
 volumes:
 - ./.env:/var/www/webservice/.env
 - ./db.sqlite:/var/www/webservice/database/database.sqlite
 networks:
 - ws_network
 environment:
 - DB_CONNECTION=sqlite
 - DB_DATABASE=/var/www/webservice/database/database.sqlite
 - REDIS_HOST=redis
 - REDIS_PASSWORD=XXXX
 
 book:
 build:
 context: .
 dockerfile: book/Dockerfile
 ports:
 - "3000:3000"
 volumes:
 - ./book:/var/www/book
 networks:
 - ws_network
 depends_on:
 - webservice
 environment:
 - WDS_SOCKET_PORT=0
 
 redis:
 image: "redis:latest"
 ports:
 - "6379:6379"
 networks:
 - ws_network
 command: ["redis-server", "--requirepass", "XXXX", "--bind", "0.0.0.0"]
 volumes:
 - redis-data:/data
 
 
networks:
 ws_network:
 driver: bridge
volumes:
 redis-data:

FRONTEND: Echo in react.js

 const privateChannel = `private-channel.${userID}`;
 const echo = new Echo({
 broadcaster: 'pusher',
 key: Config.PUSHER_KEY,
 cluster: Config.PUSHER_CLUSTER,
 wsHost: Config.PUSHER_HOST,
 wsPort: Config.PUSHER_PORT,
 wssPort: Config.PUSHER_PORT,
 forceTLS: false,
 encrypted: true,
 disableStats: true,
 enabledTransports: ['ws', 'wss'],
 authEndpoint: Config.PUSHER_AUTH_ENDPOINT,
 auth: {
 headers: {
 Authorization: `Bearer ${localStorage.getItem('authToken')}`,
 },
 },
 });

config file

 PUSHER_KEY: 'XXX',
 PUSHER_CLUSTER: 'mt1',
 PUSHER_HOST: '---mydomain.com---',
 PUSHER_PORT: 6002, 
 PUSHER_PORT_SSL: 6002,
 PUSHER_FORCE_TLS: false, 
 PUSHER_AUTH_ENDPOINT: 'https://---mydomain.com---/api/broadcasting/auth', 

NGINX error.log:

2024年01月02日 14:14:33 [crit] 399390#399390: *1400 SSL_do_handshake() failed (SSL: error:0A00006C:SSL routines::bad key share) while SSL handshaking,

• I also tried a similar configuration of reverse proxy in Apache, but the effect was the same
• I added my manually signed certificate to trusted in chrome
• I've checked dozens of configuration options and I'm out of ideas

I am very kindly asking for help

• Community: Please trim your code to make it easier to find your problem. Follow these guidelines to create a minimal reproducible example.
• Michał Gajak: after many many hours I managed to configure SSL. For those who have a similar problem, I updated the code in the problem description to show what the final configuration should look like