Laravel + Nuxt + Nginx: WebSocket is closed before the connection is established?

Question

Nginx

General scheme and project configuration files

The project consists of two parts:

• Server side - Laravel (api)
  
• Client side - NuxtJs (client)
  

For the test, a minimal project configuration was prepared.

Laravel

Web socket packages installed:

• beyondcode/laravel-websockets: https://beyondco.de/docs/laravel-websockets/gettin...
  
• pusher/pusher-php-server: https://pusher.com/tutorials/web-notifications-lar...
  

composer.json file :

...
    "require": {
        "php": "^7.3",
        "beyondcode/laravel-websockets": "^1.8",
        "fideloper/proxy": "^4.2",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "laravel/framework": "^8.0",
        "laravel/tinker": "^2.0",
        "pusher/pusher-php-server": "^4.1"
    },
    "require-dev": {
        "facade/ignition": "^2.3.6",
        "fzaninotto/faker": "^1.9.1",
        "mockery/mockery": "^1.3.1",
        "nunomaduro/collision": "^5.0",
        "phpunit/phpunit": "^9.3"
    },
...

Nuxt Web socket

packages installed:

• nuxtjs/laravel-echo: https://github.com/nuxt-community/laravel-echo
  
• pusher-js: https://github.com/pusher/pusher-js
  

package.json file :

...
  "dependencies": {
    "@nuxtjs/axios": "^5.12.2",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/laravel-echo": "^1.1.0",
    "@nuxtjs/proxy": "^2.0.1",
    "nuxt": "^2.13.0",
    "pusher-js": "^7.0.0"
  },
...

//---

All files have already been uploaded to the VPS ( Ubuntu 18.04 LTS ) and the certificate has been received ( https://certbot.eff.org/ ):



The web socket server is running permanently according to this description: https://beyondco. de/docs/laravel-websockets/basic-...

Check:

supervisorctl status



To automatically start and restart the client side, the pm2 process manager is globally installed and launched permanently : https://pm2.keymetrics.io

Check:

pm2 list



List busy ports:

netstat -ntlp | grep LISTEN



lsof -i -P -n | grep LISTEN



Current network protection status:

ufw status



//---

The response from the server side, when requesting from the client side, comes:



With web sockets, an error occurs:




Files for configuring

Laravel

web sockets File .env :

vim /var/www/api/.env

APP_NAME=Laranuxt
APP_ENV=production
APP_KEY=base64:cSTA4y9lIjmQDQ9b3+J2X+iSif8jqu6u3Oj9UNXdzIs=
APP_DEBUG=false
APP_SCHEME=https://
APP_HOST=larastart.site
APP_URL="${APP_SCHEME}larastart.site"
CLIENT_URL="${APP_SCHEME}larastart.site"
...
PUSHER_APP_ID=123
PUSHER_APP_KEY=456
PUSHER_APP_SECRET=789
PUSHER_APP_CLUSTER=test

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

websockets.php file :

vim /var/www/api/config/websockets.php

...
    'apps' => [
        [
            'id' => env('PUSHER_APP_ID'),
            'name' => env('APP_NAME'),
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'path' => env('PUSHER_APP_PATH'),
            'capacity' => null,
            'enable_client_messages' => true,
            'enable_statistics' => false,
        ],
    ],
...

broadcasting.php file :

vim /var/www/api/config/broadcasting.php

...
    'connections' => [
        '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'),
                'useTLS' => false,
                'encrypted' => false,
                'host' => env('APP_HOST'),
                'port' => 6001,
                'scheme' => 'http',
                'curl_options' => [
                        CURLOPT_SSL_VERIFYHOST => 0,
                        CURLOPT_SSL_VERIFYPEER => 0,
                ]
            ],
        ],
  ...
    ],
...

Nuxt

cd /var/www/client .env

file : vim /var/www/client/.env

SCHEME     = https://
BASE_URL   = "${SCHEME}larastart.site"
API_DOMAIN = "${SCHEME}larastart.site"
API_URL    = "${SCHEME}larastart.site/api"

BROADCAST_DRIVER   = pusher
PUSHER_APP_ID      = 123
PUSHER_APP_KEY     = 456
PUSHER_APP_SECRET  = 789
PUSHER_APP_CLUSTER = test

echo.js file :

vim /var/www/client/plugins/echo.js

import Echo from 'laravel-echo';

export default (app) => {
    window.Pusher = require('pusher-js');

    window.Echo = new Echo({
        broadcaster: process.env.BROADCAST_DRIVER,
        key: process.env.PUSHER_APP_KEY,
        cluster: process.env.PUSHER_APP_CLUSTER,

        forceTLS: false,
        encrypted: false,
        wsHost: window.location.hostname,
        wsPort: 6001,
        wssPort: 6001,
        disableStats: false,
        enabledTransports: ['ws', 'wss']
    });
}

nuxt.config.js file :

vim /var/www/client/nuxt.config.js

...
  plugins: [
    { src: '~/plugins/echo.js', ssr: false }
  ],
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
    '@nuxtjs/dotenv'
  ],
  axios: {
    baseURL: process.env.API_DOMAIN,
    credentials: true
  },
  proxy: {
    "/api": {
      target: process.env.API_DOMAIN,
      pathRewrite: { "^/api" : "/" }
    }
  },
...

Nginx The configuration file for the site to work on the Nginx

web server is created and connected: vim /etc/nginx/sites-available/larastart.site

server {
        server_name     larastart.site;
        root            /var/www/api/public;

        add_header X-Frame-Options              "SAMEORIGIN";
        add_header X-XSS-Protection             "1; mode=block";
        add_header X-Content-Type-Options       "nosniff";

        # Priority file extensions
        index index.php index.html index.htm index.nginx-debian.html;

        charset utf-8;

        # Check for the existence of files matching a provided url, forward to 404 if not found
        location /api {
                try_files $uri $uri/ /index.php?$query_string;
        }

        # Serve static files directly
        location ~* ^/storage/(.*)\.(jpg|jpeg|gif|bmp|png|ico)$ {
                access_log off;
        }

        location / {
                proxy_pass                          http://127.0.0.1:3000;
                proxy_set_header Host               $host;
                proxy_set_header X-Real-IP          $remote_addr;

                proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto  $scheme;
                proxy_set_header X-VerifiedViaNginx yes;
                proxy_read_timeout                  300;
                proxy_connect_timeout               300;
        }

        location /app {
                proxy_pass                          http://127.0.0.1:6001;
                proxy_set_header Host               $host;
                proxy_set_header X-Real-IP          $remote_addr;

                proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto  $scheme;
                proxy_set_header X-VerifiedViaNginx yes;
                proxy_read_timeout                  300;
                proxy_connect_timeout               300;

                # Specific for websockets: force the use of HTTP/1.1 and set the Upgrade header
                proxy_http_version      1.1;
                proxy_set_header        Host            $host;
                proxy_set_header        Upgrade         $http_upgrade;
                proxy_set_header        Connection      'upgrade';
                proxy_cache_bypass      $http_upgrade;
        }

        error_page 404 /index.php;

        # pass PHP scripts to FastCGI server
        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;
        }

        # deny access to .htaccess files, if Apache's document root concurs with nginx's one
        location ~ /\.(?!well-known).* {
               deny all;
        }

listen 443 ssl; # managed by Certbot
  
ssl_certificate     /etc/letsencrypt/live/larastart.site/fullchain.pem;     # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/larastart.site/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 = larastart.site) {
         return 301 https://$host$request_uri;
} # managed by Certbot

listen 80;
server_name larastart.site;
return 404; # managed by Certbot
}

Answer 1

In ufw, if I don't confuse anything, only SSH and nginx connections are allowed. Port 6001 is being listened on by php so the connection is not allowed. 2 solutions:
1) Forward port 6001 through nginx ( as here )
2) Allow ufw to access php