I am building a socket.io app with the python implementation on the server side and the JS client.
When I test my app on my machine everything works, I can connect with multiple clients and exchange data with the server.
The app also works, when I access it from other machines in my local network, I host the app on my desktop and access it from my laptop and smartphone.
When I host the app on one of my servers (VPS at Hetzner), it does not work properly. I can still access the app and load the html/js client. The client also starts a socket.io connection with the server, I can see the connect event on the server.
But then nothing more works. I cannot emit events and I don't receive data from the server.
When I look into the network tab in my browser, I can see several GET requests (HTML, JS, CSS,...) and then periodic GET requests to <myserver>/socket.io/?EIO=4&transport=polling&t=NVPxxx.
Each of these GET requests triggers the connect event on the server, I guess that the connection never really happens completely.
My server code looks like this:
import socketio
import eventlet
import pandas as pd
sio = socketio.Server()
app = socketio.WSGIApp(sio, static_files={ # The client is served here
'/': './public/'
})
@sio.event
def connect(sid, environ):
print("Connection from: " + sid)
pushstate(sid)
<... more vent handlers etc. ...>
def run():
eventlet.wsgi.server(eventlet.listen(('localhost', 5000)), app)
if __name__ == '__main__':
run()
The server runs behind a nginx reverse proxy that handles SSL and is (to my knowledge) correctly configured to proxy websocket connections.
To make sure my proxy config is not the source of the problem, I also ran the server directly. Even without the reverse proxy I have the same problems.
The client looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>MyApp</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid">
More HTML here
</div>
<script src="https://cdn.socket.io/3.1.1/socket.io.min.js" integrity="sha384-gDaozqUvc4HTgo8iZjwth73C6dDDeOJsAgpxBcMpZYztUfjHXpzrpdrHRdVp8ySO" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="index.js"></script> <!-- Here is the interesting part-->
</body>
</html>
And the JS part in index.js:
const sio = io() // Socket.IO conenction
sio.on('update', (data) => {
console.log(data)
update_Data(data) // do all Data updates
});
// example onClick there are more in the actual Code
$("#delete").click(function () {
sio.emit('remove', {name: $("input#Name").val()}, (result) => {
if (!result){
alert("Could not delete!");
}
});
});Edit ---
Here are the logs from the server.
I connected a single client, while running the server without reverse proxy.
When a client connects, the server sends them an update event. In this test the Server had no data yet, so the data in update is empty.
Server initialized for eventlet.
(6129) wsgi starting up on http://0.0.0.0:80
(6129) accepted ('77.21.X.X', 2540)
3c59561367e34bbcbd09361879428671: Sending packet OPEN data {'sid': '3c59561367e34bbcbd09361879428671', 'upgrades': ['websocket'], 'pingTimeout': 60000, 'pingInterval': 25000}
emitting event "update" to 3c59561367e34bbcbd09361879428671 [/]
3c59561367e34bbcbd09361879428671: Sending packet MESSAGE data 2["update",[]]
3c59561367e34bbcbd09361879428671: Sending packet MESSAGE data 0
77.21.X.X - - [26/Feb/2021 16:00:05] "GET /socket.io/?EIO=4&transport=polling&t=NVV4Op5 HTTP/1.1" 200 390 0.004566
f4934759613140be898f2d999767c728: Sending packet OPEN data {'sid': 'f4934759613140be898f2d999767c728', 'upgrades': ['websocket'], 'pingTimeout': 60000, 'pingInterval': 25000}
emitting event "update" to f4934759613140be898f2d999767c728 [/]
f4934759613140be898f2d999767c728: Sending packet MESSAGE data 2["update",[]]
f4934759613140be898f2d999767c728: Sending packet MESSAGE data 0
77.21.X.X - - [26/Feb/2021 16:00:10] "GET /socket.io/?EIO=4&transport=polling&t=NVV4Q2F HTTP/1.1" 200 390 0.005562
34343bbd72e24136a71f94b276e659ad: Sending packet OPEN data {'sid': '34343bbd72e24136a71f94b276e659ad', 'upgrades': ['websocket'], 'pingTimeout': 60000, 'pingInterval': 25000}
emitting event "update" to 34343bbd72e24136a71f94b276e659ad [/]
34343bbd72e24136a71f94b276e659ad: Sending packet MESSAGE data 2["update",[]]
34343bbd72e24136a71f94b276e659ad: Sending packet MESSAGE data 0
77.21.X.X - - [26/Feb/2021 16:00:15] "GET /socket.io/?EIO=4&transport=polling&t=NVV4RGt HTTP/1.1" 200 390 0.005401
^Cwsgi exiting
(6129) wsgi exited, is_accepting=True
The client does not seem to produce any debug output on the console, even with localStorage.debug = '*'; and the debug enabled socket.io client.
Here is a screenshot of the network tab in chrome.
The logs were taken after each other, hence the IDs do not match.
