Flask-SocketIO: Python code can send, but cannot receive. JavaScript code can receive, but cannot send

I am working on a multiplayer web game that uses Flask-SocketIO for real-time communication between the server and clients. However, I am facing an issue where the Python code can successfully send data to the clients, but it cannot receive any emissions from the JavaScript code. On the other hand, the JavaScript code can receive data from the server, but it is unable to send any emissions back.

I apologize in advance for bad code or stupid mistakes, I am new to sockets and do not fully understand them.

Here is a summary of the issue:

  • The Python code is using Flask-SocketIO and includes event handlers for the ‘player_data’ event.
  • The JavaScript code is using the SocketIO library and includes event handlers for the ‘player_data’ event.
  • The client successfully connects to the server, but when the Python code emits the ‘player_data’ event, the JavaScript code DOES receive it.
  • However, when the JavaScript code emits the ‘player_data’ event, the Python code also does not receive it.

I tried to send real time player location data back and forth from my flask server and javascript. The sockets successfully connected, the initial user data is sent to the client, then the client tries to send data back, no errors are reported, but the code on the socket.on() function in my python code does get executed.

Expected Behaviour

  • The Python code should be able to emit ‘player_data’ events that the JavaScript client can receive.
  • The JavaScript client should be able to emit ‘player_data’ events that the Python code can receive.

Actual Behaviour

  • The Python code emits ‘player_data’ events and the JavaScript client receives them.
  • The JavaScript client emits ‘player_data’ events, BUT the Python code never receives them. No visible errors.

Javascript:

var players = {};
var socket = io('/game');

socket.on('connect', () => {
    console.log('Connected to server.');
});

socket.on('player_data', function(updatedPlayers) {
    console.log("Updated players data:");
    players = updatedPlayers;
    console.log(players);
});

var player_id = generateUserId(Object.keys(players));

function send_player_data(id, x, y) {
    console.log("Sending player data: " + id + " " + x + " " + y);
    socket.emit('player_data', {
        id: id,
        x: x,
        y: y
    });
}

send_player_data(id, x, y)

Javascript Output:

8game.js:116 Sending player data: 737510 768 662
game.js:108 Updated players data:
game.js:110 {}
game.js:104 Connected to server.
171game.js:116 Sending player data: 737510 768 662

Python Code:

@app.route('/game', methods=['GET', 'POST'])
def game():
    return render_template('game.html')

socketio = SocketIO(app, max_http_buffer_size=1000000)

players = {}

@socketio.on('connect', namespace='/game')
def handle_connect():
    print('Client connected')
    emit('player_data', players)

@socketio.on('disconnect', namespace='/game')
def handle_disconnect():
    print('Client disconnected')

@socketio.on('player_data', namespace='/game')
def handle_player_data(data):
    print('Player state update:', data)
    
    player_id = data['id']
    player_x = data['x']
    player_y = data['y']
    active = True 

    players[player_id] = {"x": player_x, "y": player_y, "active": active}

    emit('player_data', players, broadcast=True)

Python Output (This is obviously fills my console with repetitions so here’s a snippet):

INFO:werkzeug:127.0.0.1 - - [10/Mar/2024 02:41:20] "POST /socket.io/?EIO=4&transport=polling&t=OucF7WY&sid=ezy6IQ_nADGehX0LAAAC HTTP/1.1" 200 -
INFO:werkzeug:127.0.0.1 - - [10/Mar/2024 02:41:20] "POST /socket.io/?EIO=4&transport=polling&t=OucF7XQ&sid=ezy6IQ_nADGehX0LAAAC HTTP/1.1" 200 -
INFO:werkzeug:127.0.0.1 - - [10/Mar/2024 02:41:20] "POST /socket.io/?EIO=4&transport=polling&t=OucF7YI&sid=ezy6IQ_nADGehX0LAAAC HTTP/1.1" 200 -
INFO:werkzeug:127.0.0.1 - - [10/Mar/2024 02:41:20] "POST /socket.io/?EIO=4&transport=polling&t=OucF7ZA&sid=ezy6IQ_nADGehX0LAAAC HTTP/1.1" 200 -
INFO:werkzeug:127.0.0.1 - - [10/Mar/2024 02:41:20] "POST /socket.io/?EIO=4&transport=polling&t=OucF7a9&sid=ezy6IQ_nADGehX0LAAAC HTTP/1.1" 200 -
INFO:werkzeug:127.0.0.1 - - [10/Mar/2024 02:41:21] "POST /socket.io/?EIO=4&transport=polling&t=OucF7bb&sid=ezy6IQ_nADGehX0LAAAC HTTP/1.1" 200 -
INFO:werkzeug:127.0.0.1 - - [10/Mar/2024 02:41:21] "POST /socket.io/?EIO=4&transport=polling&t=OucF7eW&sid=ezy6IQ_nADGehX0LAAAC HTTP/1.1" 200 -