NGINX - WebSocket is closed before the connection is established - using documented server config

[veigajoao]

I am having trouble deploying my app to production. Everything works fine in my development, yet once I deploy to my server, the page cannot connect to the socket and displays the following message:

"WebSocket connection to 'wss://<domain_name>/socket.io/?EIO=4&transport=websocket&sid=2Xv-b8hcnYSe6MlIAAEe' failed: WebSocket is closed before the connection is established. value @ websocket.js:138"

I was worried it might be due to TLS, so I also tested the page in http, obtaining the same error:

"WebSocket connection to 'ws://<domain_name>/socket.io/?EIO=4&transport=websocket&sid=kilk1saF4Ik0G-3TAAFh' failed: WebSocket is closed before the connection is established."

I have determined that the issue comes from nginx by exposing gunicorn to the web and checking that the site works correctly there. I ran:

gunicorn --bind 0.0.0.0:5010 --worker-class eventlet -w 3 wsgi:application

And changed the socketio address in the webpages js to include the :5010 port. This configuration worked correctly and the site could be used normally. Therefora, the error must be in the nginx proxying

I have checked discussions here and in stack overflow and tried to implement all sugestions. My server is configured using the nginx configuration recommended in the flask-socketio documentatio:

upstream socketio_nodes {
    ip_hash;

    server 127.0.0.1:5010;
}

server {

    listen        80;
    server_name   _;

    location / {
        include proxy_params;
        proxy_pass http://127.0.0.1:5010;
    }

    location /static {
        root /home/useradmin/web/app;
    }

    location /socket.io {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host;

      proxy_pass http://socketio_nodes/socket.io;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }

}

# Settings for a TLS enabled server.

server {
    listen       443 ssl http2 default_server;
    listen       [::]:443 ssl http2 default_server;
    server_name  _;

    ssl_certificate "/etc/nginx/ssl/name.crt";
    ssl_certificate_key "/etc/nginx/ssl/name.key";
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout  10m;
    ssl_ciphers PROFILE=SYSTEM;
    ssl_prefer_server_ciphers on;



    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    location / {
        include proxy_params;
        proxy_pass http://127.0.0.1:5010;
        proxy_ssl_certificate     "/etc/nginx/ssl/name.crt";
        proxy_ssl_certificate_key "/etc/nginx/ssl/name.key";
        proxy_ssl_session_reuse on;
    }

    location /static {
        root /home/useradmin/web/app;
    }

    location /socket.io {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host;

      proxy_pass http://socketio_nodes/socket.io;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";

      proxy_ssl_certificate     "/etc/nginx/ssl/name.crt";
      proxy_ssl_certificate_key "/etc/nginx/ssl/name.key";
      proxy_ssl_session_reuse on;
    }

} ```

Does anyone have an idea what I might be doing wrong? Have already been stuck in this issue for 3 days

[miguelgrinberg]

You say that you are using the nginx config from the Flask-SocketIO, but that is incorrect. I'm not sure what's wrong with your config, but it is certainly different than the config in my documentation. So maybe you should copy my config and start from there?

[veigajoao]

I am sorry, you are correct. I started out using your documentation params and then changed them out later in my attempts to fix the issue. This configurations and your documented configuration both yield the same result.

[veigajoao]

I just redid some testing with gunicorn and it turns out that even when connecting directly to the gunicorn server (no nginx as reverse proxy) there is some issue with flask-socketio.

When I connect straight to the gunicorn server, the "failed: WebSocket is closed before the connection is established." actually shows up a lot, like the client tries to connect to the socket a lot of times. Eventually, the connection goes through and the app works correctly for a while, until the connection drops and starts presenting the same error messages again...

I can't figure out why this would happen, do you have any idea where to look @miguelgrinberg?

Some infos about my project:

1. I am emitting from an external process, by using redis as a broker
2. I am emiting every second from a celery task in order to update simultaneous information in all clients
3. my init.py for the app:

import os

from flask import Flask, jsonify, render_template, request, redirect, url_for
from flask_babel import Babel
from flask_login import LoginManager, UserMixin, login_user, login_required, current_user, logout_user
from flask_mail import Mail
from flask_socketio import SocketIO
from flask_mongoengine import MongoEngine
from flask_wtf.csrf import CSRFProtect
from celery import Celery
import redis


from config import Config
from app.models import *
from config import *


### Flask extension objects instantiation ###
mail = Mail()
csrf = CSRFProtect()
login_manager = LoginManager()
babel = Babel()
socketio = SocketIO(engineio_logger=True, logger=True,  cors_allowed_origins="*", async_mode='eventlet')

# cors_allowed_origins=["http://localhost:8000", "https://vegaz.bet", "http://vegaz.bet"]
# socketio = SocketIO(engineio_logger=True, logger=True,  cors_allowed_origins=cors_allowed_origins, async_mode='eventlet')

### Celery instantiation ###
CONFIG_TYPE = os.getenv('CONFIG_TYPE')
config_types = {
    "config.DevelopmentConfig": DevelopmentConfig,
    "config.TestingConfig": TestingConfig,
    "config.ProductionConfig": ProductionConfig 
}
current_config = config_types.get(CONFIG_TYPE)
celery = Celery(__name__, broker=current_config.CELERY_BROKER_URL, result_backend=current_config.RESULT_BACKEND)

redis_cache = redis.Redis().from_url(os.getenv('REDIS_CACHE'))

### Application Factory ###
def create_app():

    app = Flask(__name__)

    # Configure the flask app instance
    CONFIG_TYPE = os.getenv('CONFIG_TYPE')
    app.config.from_object(CONFIG_TYPE)

    #Configure celery
    celery.conf.update(app.config)

    # Register blueprints
    register_blueprints(app)

    #setup db integration
    configure_db(app)

    # Configure logging
    configure_logging(app)

    # Register error handlers
    register_error_handlers(app)

    # Initialize flask extension objects
    initialize_extensions(app)

    #setup db for flask-login
    @login_manager.user_loader
    def load_user(user_id):
        user = User.objects(id=user_id)[0]
        return user

    #setup locale selector for flask-babel
    @babel.localeselector
    def get_locale():
        return request.accept_languages.best_match(Config.LANGUAGES)

    return app


### Helper Functions ###
def register_blueprints(app):
    from app.auth import auth_blueprint
    from app.main import main_blueprint
    from app.games import games_blueprint
    from app.admin import admin_blueprint
    from app.api import api_blueprint

    app.register_blueprint(auth_blueprint, url_prefix='/users')
    app.register_blueprint(main_blueprint)
    app.register_blueprint(games_blueprint, url_prefix='/games')
    app.register_blueprint(admin_blueprint, url_prefix='/admin')
    app.register_blueprint(api_blueprint, url_prefix='/api')

def initialize_extensions(app):
    mail.init_app(app)
    login_manager.init_app(app)
    csrf.init_app(app)
    babel.init_app(app)

    if os.environ["CONFIG_TYPE"] == "config.TestingConfig":
        #testing can't use redis as message_queue
        socketio.init_app(app)
    else:
        socketio.init_app(app, message_queue=os.getenv('CELERY_BROKER_URL'))

def register_error_handlers(app):

    # 400 - Bad Request
    @app.errorhandler(400)
    def bad_request(e):
        return render_template('400.html'), 400

    # 401 - Unauthorized
    @app.errorhandler(401)
    def bad_request(e):
        return render_template('401.html'), 401

    # 403 - Forbidden
    @app.errorhandler(403)
    def forbidden(e):
        return render_template('403.html'), 403

    # 404 - Page Not Found
    @app.errorhandler(404)
    def page_not_found(e):
        return render_template('404.html'), 404

    # 405 - Method Not Allowed
    @app.errorhandler(405)
    def method_not_allowed(e):
        return render_template('405.html'), 405

    # 500 - Internal Server Error
    @app.errorhandler(500)
    def server_error(e):
        return render_template('500.html'), 500

def configure_logging(app):
    import logging
    from flask.logging import default_handler
    from logging.handlers import RotatingFileHandler

    # Deactivate the default flask logger so that log messages don't get duplicated
    app.logger.removeHandler(default_handler)

    # Create a file handler object
    file_handler = RotatingFileHandler('flaskapp.log', maxBytes=16384, backupCount=20)

    # Set the logging level of the file handler object so that it logs INFO and up
    file_handler.setLevel(logging.INFO)

    # Create a file formatter object
    file_formatter = logging.Formatter('%(asctime)s %(levelname)s: %(message)s [in %(filename)s: %(lineno)d]')

    # Apply the file formatter object to the file handler object
    file_handler.setFormatter(file_formatter)

    # Add file handler object to the logger
    app.logger.addHandler(file_handler)

def configure_db(app):
    db = MongoEngine(app)

[miguelgrinberg]

I would suggest that you look at the documentation to learn how to use gunicorn with Flask-SocketIO (the command you show above is incorrect). If that doesn't help, look at the logs to see what is the problem. If you need more detailed logs, see the troubleshooting section of the docs to learn how to add more logging.

[RustyKZ]

I think you've already solved this problem, buddy. But perhaps this will be useful to someone else.
I had the same problem. I have the application Django/Vue - Eventlet - Gunicorn - Nginx. It turned out that there is a hint in the Python-SocketIO documentation:

Due to limitations in its load balancing algorithm, gunicorn can only be used with one worker process, so the -w option cannot be set to a value higher than 1. A single eventlet worker can handle a large number of concurrent clients, each handled by a greenlet.

After I set the number of workers to 1 the problem disappeared.