How to connect websockets via socket.io from React to Laravel using laravel-echo-server? – Apache

I’m currently having a problem getting websockets set up with socket.io from React to Laravel using laravel-echo-server. Everything appears to be working except 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 logs, this is the error:

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.

But whenever I go to https://api.mysite.com/socket.io I’m getting this:

{
  "code": 0,
  "message": "Transport unknown"
}

Here’s how I have my sites-available set up (000-default-le-ssl.conf):

<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>

And my non ssl file (000-default.conf):

<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>

Here’s my laravel-echo-server set up:

{
    "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": ""
    }
}

And whenever I run laravel-echo-server start and create some events, it appears that they are logging properly:

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: AppEventsLeagueChatCreated
Channel: chat.9255
Event: AppEventsLeagueChatCreated
Channel: chat.9255
Event: AppEventsLeagueChatCreated

And the final thing is how I have echo set up on the React side:

import Echo from "laravel-echo/dist/echo";
import socketio from "socket.io-client";

const echo = new Echo({
    host: "https://api.mysite.com/socket.io",
    broadcaster: "socket.io",
    client: socketio,
    encrypted: false,
    transports: ["websocket"],
});

export default echo;

And this is how I’m calling it:

echo.channel("chat." + leagueId).listen("LeagueChatCreated", (ev) => {
   console.log("new request");
});

I’m not seeing an error in the console for the React side, I believe the issue is that Internal error that I’m getting. Is there something more that I need to add to my sites-available to get this working?