Browser can not connect with Flask-socketio server

[dikshitkumarmodi]

I host a flask app in Ubuntu 18.04 LTS with Nginx and Gunicorn. I use Flask-SocketIO==5.0.1 for backend and <script src="https://cdn.socket.io/3.1.3/socket.io.min.js"></script> for front end. here is my server configuration:

server {
    server_name toollaza.com;

    location /static {
        alias /home/ubuntu/toollaza/video5/static;
    }

    location / {
        proxy_pass http://localhost:8000;
        include /etc/nginx/proxy_params;
        proxy_redirect off;
    }

    location /socket.io {
        include proxy_params;
        proxy_http_version 1.1;
        proxy_buffering off;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass http://localhost:8000/socket.io;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/toollaza.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/toollaza.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}
server {
    if ($host = toollaza.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80;
    server_name toollaza.com;
    return 404; # managed by Certbot


}

But the problem is browser can not connect with the server via socket. Here are some errors that I found in the browser console:

Failed to load resource: the server responded with a status of 400 (BAD REQUEST)
WebSocket connection to '<URL>' failed: WebSocket is closed before the connection is established.
22WebSocket connection to '<URL>' failed: WebSocket is closed before the connection is established.
WebSocket connection to 'wss://toollaza.com/socket.io/?EIO=4&transport=websocket&sid=hqBln0W4o4QOXAtMAAAB' failed: WebSocket is closed before the connection is established.
GET https://toollaza.com/socket.io/?EIO=4&transport=polling&t=NjISAoG&sid=jDAmKGDdhq6xxiSYAAAC 400 (BAD REQUEST)
polling-xhr.js:206 POST https://toollaza.com/socket.io/?EIO=4&transport=polling&t=NjISDgF&sid=Qlz9s9KQZ9QTUMDUAAAB 400 (BAD REQUEST)

Where is the problem?

Thank you

[darrachequesne]

Hi. The nginx configuration looks good to me, the server seems reachable:

$ curl -v "https://toollaza.com/socket.io/?EIO=4&transport=polling"
0{"sid":"k71dNEwVFk2TMgpmAABV","upgrades":["websocket"],"pingTimeout":20000,"pingInterval":25000}

The client and server versions seem compatible too: https://flask-socketio.readthedocs.io/en/latest/intro.html#version-compatibility

Maybe a CORS issue?

[dikshitkumarmodi]

I don't think there is any cross-issue. It is working on localhost. So what could wrong with the live server?

[darrachequesne]

When visiting https://toollaza.com/, the WebSocket connection seems OK:

Did you do something?

[dikshitkumarmodi]

I am getting this error in ifileshifts.com too. Both are my projects and the errors are the same. I attached the screenshot. It is working on a local system, so I thought it could be anything with Nginx, gunicorn or something related to the server

I have also tried ping_timeout: socketio = SocketIO(app, ping_timeout=5)

but nothing worked