Different requests to same client at same time using Flask Socketio #1931

athulvis · 2023-01-11T22:32:37Z

athulvis
Jan 11, 2023

I am creating an offline live dashboard for updating data from client to server using Flask. I have multiple data to update and it works well if I send them in a single request. But I have two types of requests and one updates slower than another. Is there anyway to update the different requests simultaneously in the client?

what I tried: I created another function and run the code as below. But only first value is updating and second isn't.

what I need: Both test and test2 should be updated simultaneously with its own delay (test has no delay and test2 has 3 seconds delay).

app.py:

from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app, logger=True, engineio_logger=True)

@app.route('/')
def index():
    return render_template('index.html')

@socketio.on('check')
def gen(data):
    j=0
    while True:
        socketio.emit('temp', data={'value1':j})
        j+=1
        socketio.sleep(0)

@socketio.on('check2')
def gen2(data):
    j= 10
    while True:
        socketio.emit('temp2', data={'value2':j})
        j+=1
        socketio.sleep(3)

if __name__== "__main__":
    socketio.run(app,debug=True, host='127.0.0.1', port=5000)

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>websocket</title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
     var socket = io.connect('http://' + document.domain + ':' + location.port);

   socket.on('connect' ,function()
     {
      socket.emit('check' ,{data: 'User Connected'})
     });

    socket.on('temp' ,function(msg) 
    {
        console.log(msg.value1)

        $('#test').html('<p> Value 1: ' + msg.value1 + '</p>');
     });
     socket2.on('temp2' ,function(msg) 
     {
        console.log(msg.value2)
        $('#test2').html('<p> Value 2: ' + msg.value2 + '</p>');
     });
    });

 </script>
 <p id='test'> Hello </p>
 <br/><br/>
 <p id='test2'> Hello </p>

</body>
</html>

I am relatively new to flask websockets and any kind of help is appreciated.

Answered by miguelgrinberg

Jan 11, 2023

I'm sorry, I don't understand. You are emitting temp events as fast as your server can, and you are emitting temp2 every 3 seconds. How can the updates happen at the same time when the rates are different?

This may be more a question about front end development, because I don't see how this can be solved from the Socket.IO side unless you combine your two data items into a single event.

View full answer

miguelgrinberg · 2023-01-11T22:54:28Z

miguelgrinberg
Jan 11, 2023
Maintainer

I'm sorry, I don't understand. You are emitting temp events as fast as your server can, and you are emitting temp2 every 3 seconds. How can the updates happen at the same time when the rates are different?

This may be more a question about front end development, because I don't see how this can be solved from the Socket.IO side unless you combine your two data items into a single event.

6 replies

miguelgrinberg Jan 11, 2023
Maintainer

Wouldn't you need something in the client that emits check2 for the value2 updates to start flowing?

athulvis Jan 11, 2023
Author

Thanks for noticing it. There is a possibility of having issue in client side. Let me check that one.

athulvis Jan 11, 2023
Author

@miguelgrinberg Thanks for the insight.

I tried to initiate a new socket on client side. But at a time, only one socket was initiated. So I used asyncio and now both sockets are working.

Updated index.html (removed multiple sockets after suggestion from @miguelgrinberg )

<!DOCTYPE html>
<html lang="en">
<head>
	<title> flask websocket</title>
    
</head>
<body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
     var socket = io.connect('http://' + document.domain + ':' + location.port);

   socket.on('connect' ,async function()
     {
     await socket.emit('check' ,{data: 'User Connected'})
     });

    socket.on('temp' , async function(msg) 
   {
      await $('#test').html('<p> Value 1: ' + msg.value1 + '</p>');
      console.log(msg.value1)
  });

       socket.on('temp2' ,async function(msg) 
     {
        await $('#test2').html('<p> Value 2: ' + msg.value2 + '</p>');
        console.log(msg.value2)
     });
    });

 </script>
 <br/><br/>
 <p id='test'> Hello </p>
 <br/><br/>
 <p id='test2'> Hello </p>

</body>
</html>

miguelgrinberg Jan 12, 2023
Maintainer

You can emit twice from the same socket. Don't create two connections.

athulvis Jan 12, 2023
Author

Thanks. That worked too, Updated above answer.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Different requests to same client at same time using Flask Socketio #1931

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Different requests to same client at same time using Flask Socketio #1931

athulvis Jan 11, 2023

Replies: 1 comment · 6 replies

miguelgrinberg Jan 11, 2023 Maintainer

miguelgrinberg Jan 11, 2023 Maintainer

athulvis Jan 11, 2023 Author

athulvis Jan 11, 2023 Author

miguelgrinberg Jan 12, 2023 Maintainer

athulvis Jan 12, 2023 Author

athulvis
Jan 11, 2023

Replies: 1 comment 6 replies

miguelgrinberg
Jan 11, 2023
Maintainer

miguelgrinberg Jan 11, 2023
Maintainer

athulvis Jan 11, 2023
Author

athulvis Jan 11, 2023
Author

miguelgrinberg Jan 12, 2023
Maintainer

athulvis Jan 12, 2023
Author