How to set up websockets for Laravel on an Ubuntu Apache server

I’m trying to set up websockets on Laravel running on Ubuntu Apache2 server with Laravel Echo Server. Right now, it appears that everything is working properly, but whenever I navigate to https://api.mysite.com/socket.io/?EIO=4&transport=websocket I’m getting an Internal Server Error and whenever I check the error log I’m getting this: [Fri Dec 24 21:36:52.883549 2021] [proxy:warn] [pid 622621] [client 99.10.81.95:63149] AH01144: No protocol handler was valid for the URL /socket.io/ (scheme ‘ws’). If you are using a DSO version of mod_proxy, make sure the proxy submodules are included in the configuration using LoadModule.

Is there still something that I need to add to my vhosts?

Here’s my laravel-echo-server.json file:

{
	"authHost": "api.mysite.com",
	"authEndpoint": "/broadcasting/auth",
	"clients": [],
	"database": "redis",
	"databaseConfig": {
		"redis": {},
		"sqlite": {
			"databasePath": "/database/laravel-echo-server.sqlite"
		}
	},
	"devMode": true,
	"host": null,
	"port": "6001",
	"protocol": "http",
	"socketio": {},
	"secureOptions": 67108864,
	"sslCertPath": "",
	"sslKeyPath": "",
	"sslCertChainPath": "",
	"sslPassphrase": "",
	"subscribers": {
		"http": true,
		"redis": true
	},
	"apiOriginAllow": {
		"allowCors": false,
		"allowOrigin": "",
		"allowMethods": "",
		"allowHeaders": ""
	}
}

Here’s what I’m getting back whenever I run my laravel-echo-server:

L A R A V E L  E C H O  S E R V E R

version 1.6.2

⚠ Starting server in DEV mode...

✔  Running at localhost on port 6001
✔  Channels are ready.
✔  Listening for http events...
✔  Listening for redis events...

Server ready!

Channel: chat.9255
Event: App\Events\LeagueChatCreated
Channel: chat.9255
Event: App\Events\LeagueChatCreated
Channel: chat.9255
Event: App\Events\LeagueChatCreated

So obviously the events are being logged.

Here’s my 000-default.conf file in sites-available:

<VirtualHost *:80>
        ServerName api.mysite.com
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html/public

        <Directory /var/www/html/public/>
            Options Indexes FollowSymLinks MultiViews
            AllowOverride All
            Order allow,deny
            allow from all
        </Directory>

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        <IfModule mod_dir.c>
            DirectoryIndex index.php index.pl index.cgi index.html index.xhtml index.htm
        </IfModule>
RewriteEngine on
RewriteCond %{SERVER_NAME} =api.mysite.com
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

And here’s my 000-default-le-ssl.conf file in sites-available:

<IfModule mod_ssl.c>
<VirtualHost *:443 *:6001>
        ServerName api.mysite.com
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html/public

        <Directory /var/www/html/public/>
            Options Indexes FollowSymLinks MultiViews
            AllowOverride All
            Order allow,deny
            allow from all
        </Directory>

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        <IfModule mod_dir.c>
            DirectoryIndex index.php index.pl index.cgi index.html index.xhtml index.htm
        </IfModule>

SSLCertificateFile /etc/letsencrypt/live/api.mysite.com/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/api.mysite.com/privkey.pem
Include /etc/letsencrypt/options-ssl-apache.conf

RewriteEngine On
RewriteCond %{REQUEST_URI}  ^/socket.io            [NC]
RewriteCond %{QUERY_STRING} transport=websocket    [NC]
RewriteRule /(.*)           ws://127.0.0.1:6001/$1 [P,L]

ProxyRequests off
ProxyPreserveHost On
SSLProxyEngine on

<Proxy *>
    Require all granted
</Proxy>

ProxyPass        /socket.io http://127.0.0.1:6001/socket.io/
ProxyPassReverse /socket.io http://127.0.0.1:6001/socket.io/
</VirtualHost>
</IfModule>