Flask-socketio: Error during WebSocket handshake: Unexpected response code: 400

[nayebare]

Help needed.
This is my error in Chrome:
Error during WebSocket handshake: Unexpected response code: 400
And in Firefox :
The connection to ws://127.0.0.1:5000/socket.io/?EIO=3&transport=websocket was interrupted while the page was loading.

This is my nginx server:

server {
location / {
proxy_pass http://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@@}
location /static/ {
autoindex on;
root /home/nayebare/Desktop/inconnectpoint/flaskapp/clientsfrontend/build
}
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:5000/socket.io;
}
}

Here is my flask app:
from flask import Flask

pip2 install flask-mysqldb version being used

from flask_mysqldb import MySQL
from flask_cors import CORS
from flask_socketio import SocketIO, emit, join_room
import logging
from producer import *

app = Flask(__name__, static_folder='../clientsfrontend/build/static')

handling gunicorn and flask logs

gunicorn_error_logger = logging.getLogger('gunicorn.error')
app.logger.handlers.extend(gunicorn_error_logger.handlers)
app.logger.setLevel(logging.DEBUG)
file_handler = logging.FileHandler('errorlog.txt')
app.logger.addHandler(file_handler)
app.logger.debug('this will show in the log')

app.config.from_pyfile('config.py')
mysql = MySQL(app)
socketio = SocketIO(app)
CORS(app, resources={r"/": {"origins": ""}})

from views import *

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

@socketio.on('stream_data', namespace='/socketio.io')
def test_message(message):
emit('stream_data', {'data': message['data']}, broadcast=True)

run main flask application

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

And here how i am running the app using uwsgi:
uwsgi --http :5000 --gevent 1000 --socket --master --wsgi-file app.py --callable app
And this the output:
[pid: 14500|app: 0|req: 1/1] 127.0.0.1 () {46 vars in 831 bytes} [Fri Mar 20 15:53:18 2020] GET /socket.io/?EIO=3&transport=websocket => generated 11 bytes in 1 msecs (HTTP/1.1 400) 1 headers in 54 bytes (3 switches on core 999)

When running the app using nginx+gunicorn using this command
gunicorn app:app --worker-class eventlet -w 1 --bind 0.0.0.0:5000 --log-file logs/gunicorn.log --log-level DEBUG --reload
-There is no communication from the client

Here is the client code: I am using react for front end
import io from 'socket.io-client'
const socket = io('http://127.0.0.1:5000',{'transports': ['websocket']})

Here is my pip list
certifi 2019.11.28
chardet 3.0.4
click 7.1.1
dnspython 1.16.0
eventlet 0.25.1
Flask 1.1.1
Flask-Cors 3.0.8
Flask-JWT 0.3.2
Flask-MySQLdb 0.2.0
Flask-SocketIO 4.2.1
gevent 1.4.0
greenlet 0.4.15
gunicorn 20.0.4
idna 2.9
itsdangerous 1.1.0
Jinja2 2.11.1
kafka-python 2.0.1
MarkupSafe 1.1.1
monotonic 1.5
mysqlclient 1.4.6
pip 20.0.2
pkg-resources 0.0.0
PyJWT 1.4.2
python-engineio 3.12.1
python-socketio 4.4.0
requests 2.23.0
setuptools 46.0.0
six 1.14.0
urllib3 1.25.8
uWSGI 2.0.18
Werkzeug 1.0.0
wheel 0.34.2

Any help is appreciated i can not seem to solve this.

[miguelgrinberg]

Could you be having CORS problems? If you need CORS for your Flask routes, you also need it for Socket.IO. Try this:

socketio = SocketIO(app, cors_allowed_origins=['origin1', 'origin2', ...])

[nayebare]

Thanks Miguel your work has been incredibly helpful, exactly that was the issue. However the remaining question is what is the role of nginx in all this? For the app runs as expected even when nginx is off. And what are the best practices for production?
Thanks

[miguelgrinberg]

nginx is a proxy server. It can do a few things such as load balancing and serving static files.

[sunliwei1981]

I've just run into this issue and solved it, im my case the problem is the socket.io needs gevent-websocket to support {'transports': ['websocket']}, or else it can only transports polling.