Flask-socketio: Using nginx reverse-proxy Js Client connects with Flask socketio but doesn't receive any messages

[denisb411]

For some reason my Angular client connects with the backend server (apparently successfully) but it doens't receive any message. Neither direct messages nor broadcasted.

This problem was introduced after using Nginx configured as reverse-proxy for the backend. I followed the latest official documentation of flask socketio module but still didn't found any clue of what's going on.

On the client I connect and prepare to receive messages with:

const API = "http://146.250.180.213/api/"
::
socket: io;
::
    this.socket = io(API);
    ::
    this.socket.on('connect', function() {
                console.log('Conection with server estblished - socketio');
            });
    ::
    this.socket.on('update_monitor', (data: any) => {
        console.log('Broadcasted message received! Data:', data);
    });

On Flask I start the server and define endpoints with:

app = Flask(__name__)
socketio = SocketIO(app)

if __name__ == '__main__':
    socketio.run(app, port=5000, debug=True)

@app.route('/test_endpoint', methods=['GET'])
def test_endpoint():
    socketio.emit('update_monitor', {"mrtp": app.config['MOST_RECENT_TIMESTAMP_PROCESSED'], 'updated_elements': ['ESICAS23C_ESICAS23']})
    return jsonify({'message': 'ok'}), 200

@socketio.on('connect')
def connect():
    print('Client connected')

@socketio.on('disconnect')
def disconnect():
    print('Client disconnected')

I use the 'test_endpoint' to test the socketio mechanism by requesting it with Postman.

On Nginx, I followed the configuration provided by the socketio documentation:

server {
    listen 0.0.0.0:80;

    root   /usr/share/nginx/html;
    index  index.html index.htm;
    include /etc/nginx/mime.types;

    location / {
        try_files $uri /index.html;
    }

    location /socket.io {
        # include proxy_params; dont know what this stands for
        proxy_http_version 1.1;
        proxy_buffering off;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass http://127.0.0.1:5000/socket.io;
    }

    location /grafana/ {
            proxy_pass http://localhost:3000/;
            proxy_hide_header X-Frame-Options;
    }

    location /api {
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_hide_header X-Frame-Options;
            proxy_connect_timeout       9999;
            proxy_send_timeout          9999;
            proxy_read_timeout          9999;
            send_timeout                9999;
            rewrite  ^/api/(.*)  /$1 break;
            proxy_pass http://localhost:5000;
    }
}

And I start the server with gunicorn (eventlet):
gunicorn manage:app --worker-class eventlet -w 1 --bind 0.0.0.0:5000 --reload

Both on client and backend I see that they connects, but client never receives any message.

Already checked nginx (docker logs) logs output and nothing abnormal happens. There isn't any error message, anywhere. Any clue of what's happening? Suggestions?

[miguelgrinberg]

You are using a /api/ namespace in the connection URL. Is that intentional? I don't see any reference to this namespace in your server handlers. The Socket.IO connection URL is not interpreted as a normal URL, the path in the URL is a namespace. My guess is that this is what's causing the problem.

[denisb411]

@miguelgrinberg This makes sense and I think I already tried it.

Now just changed const API to 'http://146.250.180.213/socket.io/' but the same problem still occurs.

Grateful for your fast answer.

[miguelgrinberg]

The connection URL should be http://146.250.180.213.

[denisb411]

Oh, thanks a lot, that solved. Still don't know why the connection message was reaching the server "successfully"