laravel websocket won't connect on production

I created a laravel website on my localhost with the Beyondcode websockets. Everything worked fine untill I tried to upload my website to a live server. I have been searching the internet for solutions but couldn't find anything that works for me. The problem is that when the websocket tries to connect, it returns nothing. I think it has something to do with my NGINX config.

On my localhost the websocket works fine connecting over ws://127.0.0.1/... but on production neither ws:// nor wss:// works.

I got supervisor running the command php artisan websockets:serve on a subdomain. It just doesn't connect.

My code:
config/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'),
        'host' => 'socket.website.com',
        'port' => "",
        'scheme' => 'https',
        'curl_options' => [
            CURLOPT_SSL_VERIFYHOST => 0,
            CURLOPT_SSL_VERIFYPEER => 0,
        ]
    ],
],

recources/js/bootstrap.js

broadcaster: 'pusher',
key: 'key12',
wsHost: 'socket.website.com',
wssHost: 'socket.website.com',
wsPort: "",
wssPort:"",
forceTLS: true,
disableStats: true,
forceTLS: true,
enabledTransports: ['ws', 'wss']

vHost Conf

    server {
  listen        80;
  server_name   socket.website.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;
  }
}

docRoot                   $VH_ROOT
vhDomain                  $VH_NAME
vhAliases                 www.$VH_NAME
adminEmails               [email protected]
enableGzip                1
enableIpGeo               1

errorlog $VH_ROOT/logs/$VH_NAME.error_log {
  useServer               0
  logLevel                ERROR
  rollingSize             10M
}

accesslog $VH_ROOT/logs/$VH_NAME.access_log {
  useServer               0
  logFormat               "%h %l %u %t "%r" %>s %b "%{Referer}i" "%{User-Agent}i""
  logHeaders              5
  rollingSize             10M
  keepDays                10
  compressArchive         1
}

scripthandler  {
  add                     lsapi:socke9530 php
}

phpIniOverride  {

}

rewrite  {
  enable                  1
  autoLoadHtaccess        1
}

vhssl  {
  keyFile                 /etc/letsencrypt/live/socket.website.com/privkey.pem
  certFile                /etc/letsencrypt/live/socket.website.com/fullchain.pem
  certChain               1
  sslProtocol             24
  ciphers                 EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH:ECDHE-RSA-AES128-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA128:DHE-RSA-AES128-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES128-GCM-SHA128:ECDHE-RSA-AES128-SHA384:ECDHE-RSA-AES128-SHA128:ECDHE-RSA-AES128-SHA:ECDHE-RSA-AES128-SHA:DHE-RSA-AES128-SHA128:DHE-RSA-AES128-SHA128:DHE-RSA-AES128-SHA:DHE-RSA-AES128-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA384:AES128-GCM-SHA128:AES128-SHA128:AES128-SHA128:AES128-SHA:AES128-SHA:DES-CBC3-SHA:HIGH:!aNULL:!eNULL:!EXPORT:!DES:!MD5:!PSK:!RC4
  enableECDHE             1
  renegProtection         1
  sslSessionCache         1
  enableSpdy              15
  enableStapling           1
  ocspRespMaxAge           86400
}

I don't know what I am doing wrong. Can anyone please help me out?

Solution

Laravel websocket in production via `subdomain` with `nginx`

Step 1.

create websocket conf file to run in background code will be like
in /etc/supervisor/conf.d (Debian/Ubuntu) or /etc/supervisord.d (Red Hat/CentOS) create a file websockets.conf
then put this code

[program:websockets]
command=/usr/bin/php <laravel-path>/artisan websockets:serve
numprocs=1
autostart=true
autorestart=true
user=<username>

then run supervisorctl update and supervisorctl start websockets

In the step your laravel websocket will start in backgroud at port 6001

Step 2.

create a subdomain like socket.example.com
now connect to this domain to port 6001 via nginx code of nginx config is below

server {
  listen        80;
  server_name   socket.example.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;
  }
}

In this setup your subdomain is ready to accept websocket request but without ssl

Step 3.

install certbot to get free ssl for this domain
once install certbot just run sudo certbot then you will prompt to select a domain to get ssl

In this step your geting ssl for you subdomain now you are ready to accept wss connection on this port

Step 4.

as your wss is ready on your subdomain wss://socket.exmaple.com you need to change some config in your laravel-echo(client) and laravel-websocket(server)
in bootstrap.js

wsHost: <subdomainname>,
wssHost: <subdomainname>,
wsPort: "",
wssPort:"",
forceTLS: true,

in config/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'),
        'host' => <subdomain>,// replace this with your subdomain 
        'port' => "",
        'scheme' => 'https',
        'curl_options' => [
            CURLOPT_SSL_VERIFYHOST => 0,
            CURLOPT_SSL_VERIFYPEER => 0,
        ]
    ],
],

In this setup we are connection websocket to subdomain and here port is empty because, subdomain is proxy of port 6001

You can verify your wss is working in https://www.websocket.org/echo.html in here just copy <subdomain>/app/broadcasting?protocol=7&client=js&version=7.0.3&flash=false

ref links

https://beyondco.de/docs/laravel-websockets/basic-usage/starting https://beyondco.de/docs/laravel-websockets/basic-usage/ssl#usage-with-a-reverse-proxy-like-nginx