How to Connect Websocket using SSL ( laravel)



Step 1. Nginx Configuration for Socket Server.


server {



  server_name   socket.your_server.com;



  location / {

    proxy_pass             http://127.0.0.1:6001;

    proxy_read_timeout     60;

    proxy_connect_timeout  60;

    proxy_redirect         off;



    # Allow the use of websockets

    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;

  }




}


Step 2. Nginx Configuration for Web server


server {

    server_name  www.your_server.com ;

    root       /var/www/your_server/file/path;

    index index.html index.php ;

    error_page 404 /index.php;



    location / {

       try_files $uri $uri/ /index.php?$query_string;

        location ~ \.php$ {

            include snippets/fastcgi-php.conf;

            fastcgi_pass unix:/run/php/php7.4-fpm.sock;

        }

    }



    location ~ /\.ht {

      deny all;

    }




}

Step 3. Run Certbot for SSL


 - Full Documentation Here https://certbot.eff.org/


Step 4. Update Front-End code normally (bootstrap.js)


import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({

    broadcaster: 'pusher',

    key: 'websocketkey',

    wsHost: 'socket.your_server.com',

    wsPort: 80,

    wssPort: 443,

    disableStats: true,

    encrypted: true

});


Step 5. Configuration in config/Broadcast.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'),

                'host' => 'socket.your_server.co',

                'port' => 443,

                'scheme' => 'https',

                'curl_options' => [

                    CURLOPT_SSL_VERIFYHOST => 0,

                    CURLOPT_SSL_VERIFYPEER => 0,

                ]

            ],

   ],
For Full Documentation https://docs.beyondco.de/laravel-websockets/