using Laravel-websockets in two websites on deployment on the same server

Question

i'm using https://beyondco.de/docs/laravel-websockets/getting-started/introduction laravel-websockets i deployed one project with it before on my ubuntun 20.04 VPS, i'm also using letsencrypt to add ssl to the websites on my VPS and it was working greate and i was using supervisor to run php artisan WebSocket:serve on port 443 now i want to deploy a new project that uses laravel-websockets too i'm trying to change the port but with no luck the following is my configuration for the old project project-management.dicema.com and the new project meeting-reservation.dicema.com

The old Working Project :

.env config :

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=DiceProjectManagementID
PUSHER_APP_KEY=DiceProjectManagementKey
PUSHER_APP_SECRET=DiceProjectManagementSecret
PUSHER_HOST=project-management.dicema.com
PUSHER_PORT=8443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1
LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT=/etc/letsencrypt/live/project-management.dicema.com/fullchain.pem
LARAVEL_WEBSOCKETS_SSL_LOCAL_PK=/etc/letsencrypt/live/project-management.dicema.com/privkey.pem
 

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Broadcasting.php pusher config:

'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'host' => env('PUSHER_HOST', 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com') ?: 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com',
                'port' => env('PUSHER_PORT', 8443),
//                'scheme' => env('PUSHER_SCHEME', 'https'),
                'scheme' => 'https',
                'encrypted' => true,
        'useTLS' => true,
            ],
       'curl_options'=>[
        CURLOPT_SSL_VERIFYHOST =>0,
        CURLOPT_SSL_VERIFYPEER =>0
        ],
            'client_options' => [
                // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
            ],
        ],

bootstrap.js :

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;
//
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    // wsHost: '127.0.0.1' ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsHost: 'project-management.dicema.com',
    wsPort: 8443,
    wssPort: 8443,
    // forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    forceTLS: true,
    enabledTransports: ['ws', 'wss'],
    activityTimeout: 10,
});

letsencrypt le-ssl file on apache2 :

<IfModule mod_ssl.c>
<VirtualHost *:443>

    ServerAdmin [email protected]
    ServerName project-management.dicema.com
    ServerAlias project-management.dicema.com
    DocumentRoot /var/www/html/Project_Management/public

    <Directory /var/www/html/Project_Management/public>
       Options +FollowSymlinks
       AllowOverride All
       Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/ProjectManagement.log
    CustomLog ${APACHE_LOG_DIR}/ProjectManagement_custom.log combined

RewriteEngine on
                ProxyPass "/app/" "ws://127.0.0.1:8443/app"
                ProxyPass "/apps/" "wss://127.0.0.1:8443/apps"
SSLCertificateFile /etc/letsencrypt/live/project-management.dicema.com/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/project-management.dicema.com/privkey.pem
Include /etc/letsencrypt/options-ssl-apache.conf
</VirtualHost>
</IfModule>

supervisor conf file to run php artisan websocket:serve:

[program:websockets]
command=sudo /usr/bin/php /var/www/html/Project_Management/artisan websockets:serve --port=8443
numprocs=1
autostart=true
autorestart=true
user=root
stdout_logfile=/var/www/html/meeting-reservation/web-socket.log

now i'm trying to deploy the new Project meeting

i changed all the port numbers in the previous settings to 8444, except in letsencrypt .config files but when i start debugging in /laravel-websockets it consoles a message WebSocket connection to 'wss://.....' failed: WebSocket is closed before the connection is established

when i try to stop the websocket serve on the old project and set the new project port numbers to 8443 like the old one it works but i need to have both project working on websockets any ideas how to get this done ?