Search code examples
javascriptpythonflaskwebsocketpython-socketio

python socket-io emit() doesn't send time until after execution

Using the python socketio package, I created a timer that starts when a client connects to my server.

Server-side code:

import socketio

sio = socketio.Server()
app = socketio.WSGIApp(sio, static_files={
    '/': './public/'
})


@sio.event
def connect(sid, environ):
    count = 10
    
    while count > 0:
        sio.emit('timer_count', count)
        sio.sleep(1)
        count -= 1

HTML code for reference (index.html):

<!doctype html>
<html>
    <head>
        <title>Timer</title>
    </head>
    <body>
        <h1>Timer Build</h1>
        <p1 id="counter"></p1>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.2/socket.io.min.js"></script>
        <script src="/index.js"></script>
    </body>
</html>

Client-side JS code (index.js):

const sio = io();

sio.on('timer_count', function(count) {
    console.log(count);
    var s = document.getElementById("counter");
    s.innerHTML = count;
});

However, the behavior I am getting is that the data isn't emitted to the client until it appears the server side code is finished executing (i.e. the whole count is printed all at once). How can I get this to behave in a true timer fashion where the console.log() function prints the data (count) every second?

Solution

  • You have added your loop in the connect event handler, which is used to accept or reject the connection. The Socket.IO connection is not going to be fully established until you return from this handler.

    Move your loop to a separate event that executes after the connect handler returns and accepts the connection.