Problem establishing websockets connection

93 views Asked by At

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

0

There are 0 answers