Different requests to same client at same time using Flask Socketio

Question

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 dely and test2 has 3 seconds delay).

app.py:

from flask import Flask, render_template
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.

score 0 · Answer 1 · answered Jan 12 '23 at 00:03

Found a solution for this problem. Thanks to Miguel Grinberg, author of flask-socketio for pointing out the exact problem [link to discussion].

The issue was with the socketio client which couldn't connect with check and check2 simultaneously. So I created two sockets and connected check to one and check2 to another one. It still didn't work because only one socket was initiated at a time.

So I used asyncio in client. Now it works like charm. Hope it will help someone.

Updated index.html is given below:

<!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)
  });

   var socket2 = io.connect('http://' + document.domain + ':' + location.port);

   socket2.on('connect' , async function()
     {
      await socket2.emit('check2' ,{data: 'User Connected'})
     });
     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>

Different requests to same client at same time using Flask Socketio

1 Answers1