Laravel-websocket can't connect to Azure VM through apache2

I want to implement Laravel-WebSocket + pusher substitute (https://github.com/beyondcode/laravel-websockets) with Laravel-echo on an Azure VM with apache2 reverse proxy. However, no matter what I tried, they just can't connect. It's always between error 404, 502 and 500 when a client-side listener tries to connect.

This VM only allows entry through 80 and 443. Therefore, I did reverse proxy which redirects '/WebSocket' to http://127.0.0.1:6001 (where the WebSocket runs. TCP) The server is under https. I've tried to modify server .conf file to no avail. I've tried to enable/disable SSL and encrypted as well. I tried to directly access 127.0.0.1:6001 within the VM using elinks, but with http I got 'error connecting to socket' with https I got 'SSL error'. I'm fairly sure that the request at least reached the machine, as if I shut down the WebSocket server the error changes into 503 Service not available. Also, I can see apache2 error logs as requests being made. Most of the time it is 502 proxy error. (AH01102: error reading status line from remote server 127.0.0.1:6001) If I tweak SSL settings it generally changes to 404, which I take as a sign of incorrect certificate/key in this case. The firewall is open. I've tried every guide I can find. Most of them are about nginx, which I can't change to. If possible I would rather not set up another virtual host.

This is in websocket.php

....
'apps' => [
        [
            'id' => env('PUSHER_APP_ID'),
            'name' => env('APP_NAME'),
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'enable_client_messages' => false,
            'enable_statistics' => true,
        ],
    ]
....
'ssl' => [
        'local_cert' => 'my_self_signed_cert.pem',
        'local_pk' => 'my_key.pem',
        'passphrase' => null,
    ]
...

This is the pusher setting in 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' => env('PUSHER_APP_HOST'), 
                'port' => env('PUSHER_APP_PORT'),
                'scheme' => 'https',
                'encrypted' => true,
            ],
        ]
...

I tried 127.0.0.1 as the host and 6001 as the port as default, then I followed this guide: https://42coders.com/setup-beyondcode-laravel-websockets-with-laravel-forge/ and changed them to my-domain-name and 443 respectively (the websocket is still running on 6001) This is the echo definition in /resources/js/bootstrap.js (suggested by the package documentation)

import Echo from "laravel-echo";

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

window.Echo = new Echo({
    broadcaster: "pusher",
    key: "my-pusher-key",
    wsHost: window.location.hostname + '/websocket',
    wsPort:443,
    disableStats: true,
});

This is the apache2 setting:

<VirtualHost *:443>
    ServerName my_server_name
    RequestHeader unset x-forwarded-host
    ...
    SSLEngine on
    SSLCertificateFile my-self-cert
    SSLCertificateKeyFile my-key
    SSLProxyEngine on
    SSLProxyVerify none
    SSLProxyCheckPeerCN off
    SSLProxyCheckPeerName off
    SSLProxyCheckPeerExpire off
    ProxyPreserveHost On
    <Location /websocket>
        ProxyPass "http://127.0.0.1:6001" Keepalive=On
        ProxyPassReverse "http://127.0.0.1:6001"
    </Location>
    ...
    RewriteEngine on
    RewriteCond %{HTTP:UPGRADE} websocket [NC]
    RewriteCond %{HTTP:CONNECTION} Upgrade [NC]
    RewriteRule /(.*) http://127.0.0.1:6001/$1 [P,L]
    ProxyRequests Off
</VirtualHost>

Change the http to ws or wss will trigger error 'No protocol handler was valid' despite I already included the wstunnel module.

I expect the WebSocket console to immediately react as soon as the listener subscribes to the broadcast channel

via Chebli Mohamed