Unexpected error "", closing connection

[ZhenruLo]

Alert the user before leaving the page when there are unsaved changes trigger the error Unexpected error "", closing connection

Hi, I am kinda new to web applications and trying to make a dropzone progress bar project that emits the progress status (post-processing of the data after upload that runs in python) after the upload finish.
I've got a progress bar that constantly receives progress status from the python side until the post-process is completed. To prevent the user from unloading the page, I have set up the onbeforeunload events when adding files to the dropzone and set it to null after everything finishes.

dz.on("addedfiles", function(files) {
            window.onbeforeunload = function(e) {
                return ("Changes that you made may not be saved.");
            };
        });

socket.on("finish_progress", function() {
        window.onbeforeunload = undefined;
    });

packages version

Werkzeug==2.2.2
python-socketio==5.7.2
Flask-SocketIO==5.3.2
Flask==2.2.2
simple-websocket==0.9.0

Issue

Everything works normally if the user doesn't interrupt the whole process by unloading the page.
However, if the user tries to reload the page (and click cancel to stay on the same page) the socket disconnect here and does not emit or receive anything from now on.

The first events emit after the initial socket connect:

dz.on("queuecomplete", function(file) {
            for (var file_index in this.files){
                var file_data = this.files[file_index];
                if (file_data) {
                    socket.emit("queue_complete", {file: file_data.name, current_list_id: $(".data_list li").length})
                    create_data_li(file_data.name);
                }
            };
        }),

socket.on("update_progress", function(message){
       _#some update progress code here_
});

If the onbeforeunload event is triggered, the socket will stop there and not be able to emit to "queue_complete" event in the backend.

It will trigger the error on HTML console:
websocket.js:87 WebSocket connection to 'wss://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket&sid=fVCn0yroxkQZ7TRyAAAA' failed: Invalid frame header

and the following is what I get from python terminal:

Server initialized for threading.
 * Serving Flask app 'init_server.init_server'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on https://127.0.0.1:5000
Press CTRL+C to quit
127.0.0.1 - - [10/Feb/2023 19:28:17] "GET /upload_file HTTP/1.1" 200 -
127.0.0.1 - - [10/Feb/2023 19:28:17] "GET /static/images/ndrlogo_white.png HTTP/1.1" 200 -
127.0.0.1 - - [10/Feb/2023 19:28:17] "GET /static/css/side_menu_style.css HTTP/1.1" 200 -
127.0.0.1 - - [10/Feb/2023 19:28:17] "GET /static/js/side_menu.js HTTP/1.1" 200 -
127.0.0.1 - - [10/Feb/2023 19:28:17] "GET /static/css/upload_file_style.css HTTP/1.1" 200 -
127.0.0.1 - - [10/Feb/2023 19:28:17] "GET /static/js/upload_file.js HTTP/1.1" 200 -
fVCn0yroxkQZ7TRyAAAA: Sending packet OPEN data {'sid': 'fVCn0yroxkQZ7TRyAAAA', 'upgrades': ['websocket'], 'pingTimeout': 20000, 'pingInterval': 25000}
127.0.0.1 - - [10/Feb/2023 19:28:17] "GET /socket.io/?EIO=4&transport=polling&t=OOx5KzX HTTP/1.1" 200 -
fVCn0yroxkQZ7TRyAAAA: Received packet MESSAGE data 0/events,
fVCn0yroxkQZ7TRyAAAA: Sending packet MESSAGE data 0/events,{"sid":"mtCeS047X4786ubHAAAB"}
127.0.0.1 - - [10/Feb/2023 19:28:17] "POST /socket.io/?EIO=4&transport=polling&t=OOx5Kzj&sid=fVCn0yroxkQZ7TRyAAAA HTTP/1.1" 200 -
127.0.0.1 - - [10/Feb/2023 19:28:17] "GET /socket.io/?EIO=4&transport=polling&t=OOx5Kzk&sid=fVCn0yroxkQZ7TRyAAAA HTTP/1.1" 200 -
fVCn0yroxkQZ7TRyAAAA: Received request to upgrade to websocket
127.0.0.1 - - [10/Feb/2023 19:28:17] "GET /socket.io/?EIO=4&transport=polling&t=OOx5Kzz&sid=fVCn0yroxkQZ7TRyAAAA HTTP/1.1" 200 -
fVCn0yroxkQZ7TRyAAAA: Upgrade to websocket successful
fVCn0yroxkQZ7TRyAAAA: Unexpected error "", closing connection
127.0.0.1 - - [10/Feb/2023 19:28:21] "GET /socket.io/?EIO=4&transport=websocket&sid=fVCn0yroxkQZ7TRyAAAA HTTP/1.1" 200 -

I've setup my socketio with everything in default
socketio = SocketIO(logger=True, engineio_logger=True)

and my socket connect setup in javascript:

var namespace = "/events"
var socket = io.connect(window.location.origin + namespace)

socket.on("connect", function() {
    socket.emit("status", {status: "Connected from upload file js"});
});

My flask init:

def create_app(config_obj):
    flask_app = Flask(__name__, template_folder=None, static_folder=None)
    flask_app.config.from_object(config_obj)
    
    socketio.init_app(flask_app)
    csrf.init_app(flask_app)
    db.init_app(flask_app)
    login_manager.init_app(flask_app)   
    with flask_app.app_context():
        db.create_all()

        register_all_blueprint(flask_app)
        register_all_error_handler(flask_app)

if __name__ == "__main__":
    context = ('./server_asset/server.crt', './server_asset/myserver.key')
    from config import Config
    app = create_app(Config)
    socketio.run(app, ssl_context=context, use_reloader=False)

Any help is appreciated.

[miguelgrinberg]

This is an issue with the Socket.IO JavaScript client library. See socketio/socket.io-client#1451.

[ZhenruLo]

It solved! Thanks