[Python] SocketIO in React app does not capture emitted event

I am trying to build a Leaderboard that updates real-time based on redis stream events.

So I have this code in my frontend component that ultimately should be getting the latest updates real-time from the websocket

import io from 'socket.io-client';

const socket = io('http://localhost:5000');

let externalUpdateHandler = null;

socket.on('connect', () => {
console.log('[WS] Connected');
});

socket.on('leaderboard:update', () => {
console.log('leaderboard:update done');
if (externalUpdateHandler) externalUpdateHandler();
});

export default function Leaderboard() {
const [data, setData] = useState([]);
const [orderBy, setOrderBy] = useState('kills');
const [order, setOrder] = useState('desc');

useEffect(() => {
const fetchData = () => {
fetch('http://localhost:5000/api/leaderboard')
.then(res => res.json())
.then(setData);
};

fetchData();

externalUpdateHandler = fetchData;

return () => {
externalUpdateHandler = null;
};
}, []);


What I can't figure it out:

I have 2 ways of emitting the leaderboard:update event in the server

@app.route('/test_emit')
def test_emit():
socketio.emit('leaderboard:update')
return 'Emitted'

def emit_leaderboard_updates():
print("Emitting leaderboard:update in callback")
socketio.emit('leaderboard:update')


The first one I created as a test and it always works, so basically I call the /test-emit endpoint from my browser and the event gets sent to the Leaderboard component as expected and I can see the changes

The second one is basically coming from another .py file that basically handles the redis stream. Once an event comes to the stream, this callback is triggered. I can see the "Emitting leaderboard:update in callback" being printed, so it definitely reaches that point.

But in this case I don't see the change in the frontend, I need to refresh the page to reflect the changes.

For the life of me, I can't understand why. It's exactly the same entry point (i.e. the "emit" function) in both cases, but in the latter case it simply doesn't work

Any advice?

One more point, here is how I initiate the API server and socketio

if __name__ == '__main__':
threading.Thread(target=start_stream_consumer, args=(r, emit_leaderboard_updates), daemon=True).start()
socketio.run(app, debug=True)


Could that have an impact?

Continue reading...