Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Rev

Title*

Body*

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][1]][1]


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][2]][2]

ports on the server are unblocked:
[![ports on the server are unblocked][3]][3]

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


 [1]: https://i.sstatic.net/r8JD8.png
 [2]: https://i.sstatic.net/9mWnf.png
 [3]: https://i.sstatic.net/0sjDk.png

Draft saved

Draft discarded

CollectivesTM on Stack Overflow