Azure Web App - Opening Destination Socket Failed - Expected 101, got 400.

[ph0nebooth]

Hi community

I have an issue with a Flask app deployed to an Azure App Service. I'm using Flask as the server-side and a JS Socket.IO client on a HTML page. The purpose (in a nutshell) of the app is to broadcast a subset of data that was previously written to an SQL DB using the emit() function of Flask-SocketIO. The data is emitted in a Python list. The JS on the client-side loops through a HTML table and dynamically updates the table based on the values contained in the SocketIO emit.

All aspects of the app work fine at a local level using socketio.run(app). Only once the app is deployed to Azure do I face issues.

I'd really appreciate any input from the community on what this could be. I thought I'd try this audience first, before heading to an Azure community.

Environment:
Python 3.9
Application in 'prod' is started in Azure with: gunicorn --bind=0.0.0.0 --worker-class eventlet --workers=5 --timeout=600 app:app
eventlet==0.30.2
Flask==2.2.2
Flask-Cors==3.0.10
Flask-SocketIO==5.3.3
python-engineio==4.4.1
python-socketio==5.8.0
Public face is HTTPS, server is HTTP. Azure does some sort of reverse proxying to provide the SSL layer.

Application initalisation:
app = Flask(__name__)
CORS(app)
socketio = SocketIO(app, cors_allowed_origins="*", logger=True, engineio_logger=True, async_handlers=True)

Code that broadcasts the data to all clients:
socketio.emit('update_table', data)

Snippet of the client-side code to initiate the Socket.IO connection:
var socket = io.connect(window.location.protocol + '//' + document.domain + ':' + location.port)
socket.on('update_table', function(data)...

Azure app stream logs (including SocketIO/engineio logs)
logs.txt

The client logs:

[miguelgrinberg]

Have you read the documentation regarding deployment with Gunicorn and eventlet? Because you seem to be doing something different than the documented approach. Even after you address that, I have no knowledge of Azure so I don't know if you will be able to configure a load balancer that works with Socket.IO. The load balancing requirements are also documented, so I suggest you read the deployment section to learn about the specific complexities of deploying Socket.IO.

[ph0nebooth]

Thanks for taking the time to reply @miguelgrinberg

Are you referring to the fact I've asked Gunicorn to start with multiple workers? If so, that was a 'try everything' troubleshooting step. I probably should've highlighted that.

I'm going to try the threaded worker approach to see if that makes a difference. I don't think it's going to make a difference. I think my issue relates to how Azure proxies traffic back to it's Web App platform. For example, you can see in the log file I sent, there are references to a link local address.

[miguelgrinberg]

The logs that you included appear to be some sort of .NET client-side logs, not server logs. If you are not going to use any of the documented deployment strategies I insist that it is important that you are aware of the load balancing requirements and multi-worker requirements.

[ph0nebooth]

Well, I was certain I tried this before, but simply changing the Gunicorn startup parameters to: gunicorn --worker-class eventlet -w 1 app:app has fixed the issue. Thank you for the reminder to RTFM carefully.