Cannot upgrade the client connection to websocket

[heflinstephenraj]

Describe the bug
I am building a chat app.

To Reproduce
requirements.txt
cffi==1.14.6
Click==7.0
colorama==0.4.4
Flask==1.0.2
Flask-Login==0.4.1
Flask-SocketIO==3.3.2
Flask-SQLAlchemy==2.5.1
Flask-WTF==0.14.2
gevent==21.1.2
gevent-websocket==0.10.1
greenlet==1.1.0
gunicorn==20.1.0
itsdangerous==1.1.0
Flask-Cors==3.0.10
Jinja2==2.11.3
MarkupSafe==1.1.1
requests==2.25.1
passlib==1.7.1
psycopg2==2.9.1
pycparser==2.20
python-engineio==3.5.1
python-socketio==3.1.2
six==1.12.0
SQLAlchemy==1.4.20
Werkzeug==0.14.1
WTForms==2.2.1
zope.event==4.5.0
zope.interface==5.4.0

Flask App
@socketio.on('incoming-msg')
def on_message(data):
"""Broadcast messages"""
print("INCOMMING MESSAGE >> ",data)
msg = data["msg"]
username = data["username"]
room = data["room"]
# Set timestamp
time = datetime.datetime.now().strftime("%I:%M %p %d %B, %Y")
send({"username": username, "msg": msg, "time_stamp": time}, room=room

@socketio.on('join')
def on_join(data):
"""User joins a room"""
print("JOIN REQUEST >> ",data)
username = data["username"]
room = data["room"]
join_room(room)
# Broadcast that new user has joined
send({"msg": username.title() + " has joined the" + f" chat."}, room=room)

@socketio.on('leave')
def on_leave(data):
"""User leaves a room"""
print(f"LEVE REQUEST >>> {data}")
username = data['username']
room = data['room']
send({"msg": username.title() + f" has left the chat."}, room=room)
leave_room(room)

Client side socketio

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>

SocketIO logs
867b6d49dc864a98a7e241c94d7f65fc: Sending packet OPEN data {'sid': '867b6d49dc864a98a7e241c94d7f65fc', 'upgrades': ['websocket'], 'pingTimeout': 60000, 'pingInterval': 25000}
867b6d49dc864a98a7e241c94d7f65fc: Sending packet MESSAGE data 0
867b6d49dc864a98a7e241c94d7f65fc: Received packet MESSAGE data 2["join",{"username":"Stephen Support Team","room":"ticket_115"}]
received event "join" from 867b6d49dc864a98a7e241c94d7f65fc [/]
JOIN REQUEST >> {'username': 'Stephen Support Team', 'room': 'ticket_115'}
867b6d49dc864a98a7e241c94d7f65fc is entering room ticket_115 [/]
emitting event "message" to ticket_115 [/]
b90d15a8eb80464e9cd04ef6735734e4: Sending packet MESSAGE data 2["message",{"msg":"Stephen Support Team has joined the chat."}]
867b6d49dc864a98a7e241c94d7f65fc: Sending packet MESSAGE data 2["message",{"msg":"Stephen Support Team has joined the chat."}]
1017772bbc464e30a849fbbdbda53d80: Received packet PING data None
1017772bbc464e30a849fbbdbda53d80: Sending packet PONG data None
68837e4407ff4db8a93509e30691ddfb: Client is gone, closing socket

Browser console logs
websocket.js:112 WebSocket connection to 'wss://......{chat domain}.../socket.io/?EIO=3&transport=websocket&sid=867b6d49dc864a98a7e241c94d7f65fc' failed:

How to solve this?
Thanks in advance

[miguelgrinberg]

Please don't write issues unless you know exactly what the issue is. The discussion board is the right place to troubleshoot.

Have you read the documentation? In particular the section about Socket.IO client and server compatiblity? Are you using compatible versions?

[heflinstephenraj]

Thank you for your support.

[heflinstephenraj]

@miguelgrinberg
I am using this command to run the server
gunicorn -k geventwebsocket.gunicorn.workers.GeventWebSocketWorker -w 1 app:app --bind :5008

Once server is started, I got these on logs
[2021-08-10 15:20:19 +0300] [20127] [INFO] Starting gunicorn 20.1.0
[2021-08-10 15:20:19 +0300] [20127] [INFO] Listening at: http://0.0.0.0:5008 (20127)
[2021-08-10 15:20:19 +0300] [20127] [INFO] Using worker: geventwebsocket.gunicorn.workers.GeventWebSocketWorker
[2021-08-10 15:20:19 +0300] [20132] [INFO] Booting worker with pid: 20132
Server initialized for gevent.

On my flask, I am using this snippet to run the flask server
socketio.run(app,host='0.0.0.0', port=5008)

But Actually, the website runs on https://chat.domain.com/chat?id=116 (some domain name with HTTPS)
Could you please help me?

[miguelgrinberg]

I'm sorry, but I don't understand. In any case, Gunicorn runs a web server, and so does socketio.run(). You have to pick one of them, you can't run both.

[heflinstephenraj]

@miguelgrinberg Thank you.

The problem is "I assigned my flask app to a domain name. When I open the website using the domain name, I am not able to establish the socket connection. But It works fine when I open the same website using server IP."

On the browser console, It shows
websocket.js:88 WebSocket connection to 'wss://chat.domain.com/socket.io/?EIO=4&transport=websocket&sid=2EuWSnX3RAAh6qLWAAAE' failed: Error during WebSocket handshake: Unexpected response code: 200

[miguelgrinberg]

Are you using nginx or other reverse proxy? That needs to be configured to handle WebSocket upgrades. See the documentation for an nginx example. Also, for this type of problem the server logs are going to be much more useful than the client logs.