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

Question

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>
Changing the http to ws or wss will trigger the error 'No protocol handler was valid', despite the fact that I already included the wstunnel module.
I expect the WebSocket console to immediately react as soon as the listener subscribes to the broadcast channel.

Answer 1

OK, this issue has finally been resolved! The way to do it is to set up a separate server (https) as a dedicated WebSocket server. Please follow this guide:
https://42coders.com/setup-beyondcode-laravel-websockets-with-laravel-forge/
It looks like the setting has to be on https or the WebSocket server can't receive a response from the backend. Also, I encountered a strange problem where Pusher.php in vendor/pusher/pusher-php-server misses about 400 lines of code, several other files are also missing despite it has the same version of this package (~3.0) as my local implementation. If you get call to undefined method when the WebSocket server receives broadcast event, this is likely the reason. If you can't connect to the websocket on Chrome, but you can on firefox, you need to disable verify-peers, please check the section on Laravel Velvet in the Laravel-Websockets document for more details (even if you don't use Laravel Velvet)