Setting up laravel-websockets on production server using nginx proxy with letsencrypt ssl

app.js

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    wsHost: window.location.host,
    wsPort: 80,
    wssPort: 443,
    disableStats: true,
    enabledTransports: ['ws', 'wss'],
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
});

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' => '127.0.0.1',
         'port' => 6001,
         'scheme' => 'http',
     ],
]

nginx.conf

map $http_upgrade $type {
  default "web";
  websocket "ws";
}

server {
    server_name your_domain;
    root /var/www/html/your_domain;

    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 / {
        try_files /nonexistent @$type;
    }

    location @web {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location @ws {
        proxy_pass             http://127.0.0.1:6001;
        proxy_set_header Host  $host;
        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;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
    location ~ /\.ht {
        deny all;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/your_domain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/your_domain/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = your_domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80;
    server_name your_domain;
    return 404; # managed by Certbot
}

supervisor-config

[program:websockets]
command=/usr/bin/php /path/to/project/root/artisan websockets:serve
numprocs=1
autostart=true
autorestart=true
user=your_user

how can edit nginx.conf

I'm just confirming that this configuration works as of today.

Thank you for the solution

I am hosting it in a SUBDOMAIN with application and socket on same port and domain.

In laravel broadcast we can use the host as 127.0.0.1. and port 6001

but when I changed it to domain name and port 443. It saying failed to connect.

I want to use the websocket for my other application also.

Please help

braodcast.php code

 'laravel-websocket-server' => [
            '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.example.com',
                 'port' => 443,
                 'scheme' => 'https',
                 'encrypted' => true,
             ],
        ],

Email: subhadipghorui105@gmail.com

@subhadipghorui i am facing the same issue, were you able to solve this?