php - Laravel Echo and Socket IO transport polling 404 ERR_CONNECTION_CLOSED loop

View Original

I'm building a website, using Laravel Echo Server, Socket IO and Redis. I'm facing a problem where everything works locally but not on my VPS server.

When the user is getting on a view where Socket IO is need, it's getting a 404 loop at https://example.com:6001/socket.io/?EIO=4&transport=polling&t=O0DofMO net::ERR_CONNECTION_CLOSED

On FireFox, I can see this error, kinda more described

I don't know what its supposed to do, but I think Socket IO is trying to connect forever without manage to.

Using Laravel 6 on Apache. Here are my configurations :

The apache .conf :

<IfModule mod_ssl.c>
    <VirtualHost *:443>
            ServerName www.example.com
            ServerName example.com
            ServerAlias www.example.com
            ServerAlias example.com

            DocumentRoot /var/www/html/project/public
            <Directory /var/www/html/project/public>
                    AllowOverride All
                    Allow from All
            </Directory>

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

            SSLCertificateFile /etc/letsencrypt/live/example.com/fullchain.pem
            SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem
            Include /etc/letsencrypt/options-ssl-apache.conf
    </VirtualHost>
</IfModule>

The laravel-echo-server.json :

{
        "authHost": "https://example.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" : true,
                "allowOrigin" : "https://example.com",
                "allowMethods" : "GET, POST",
                "allowHeaders" : "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authori$
        }
}

This laravel echo server is running through supervisor with :

[program:echo-server]
directory=/var/www/html/project
command=laravel-echo-server start
autostart=true
autorestart=true
user=www-data
redirect_stderr=true
stdout_logfile=/var/www/html/project/storage/logs/echoserver.log

I first tried to know if the 6001 port was listened, seems to :

> netstat -tulnp | grep 6001
tcp6       0      0

My app.js :

{-code-5}

And the view where Socket IO client is get :

{-code-6}

When submitting an action, Laravel Echo Server is correctly broadcasting Events because I see them passing through the tail -f echoserver.log

But I never see any user beeing connected, so no one is able to receive any data front-office side.

Note that my VPS is accessible by a domain with a DNS redirection, don't know if that can be a/the problem.

If anyone has a clue, I'd glady figure out what's going on...

Answer

Solution:

Seems to be working now.

I configured laravel-echo-server.json to work on HTTPS.

This made Event Broadcasting work again, but Channel authentication wasn't working.

So I changed how Socket.IO was imported :

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js" integrity="sha512-eVL5Lb9al9FzgR63gDs1MxcDS2wFu3loYAgjIH0+Hg38tCS8Ag62dwKyH+wzDb+QauDpEZjXbMn11blw8cbTJQ==" crossorigin="anonymous"></script>

<script src="//{{ Request::getHost() }}:6001/socket.io/socket.io.js"></script>

Those changes did the trick.

Note that removing channels default prefixes helped a lot.

Source