Python Forum
Flask.socketio and client side html tables / JS - Printable Version

+- Python Forum (https://python-forum.io)
+-- Forum: Python Coding (https://python-forum.io/forum-7.html)
+--- Forum: Networking (https://python-forum.io/forum-12.html)
+--- Thread: Flask.socketio and client side html tables / JS (/thread-10671.html)

Flask.socketio and client side html tables / JS - georgelza - May-31-2018

Hi all

I have a very server side long polling application atm that I'm trying to modify to be more client/server using flask_socketio with client side JS.

The application displays data in html tables. and then refresh every 10-15 seconds.

The server side I have enough knowledge how to get working...

Any chance someone have a example of using socketio pushing a JSON payload or even basic Python dictionary object and then displaying it using JS on the client / in a table layout... JS is skill level 0 at the moment for me still.

G

RE: Flask.socketio and client side html tables / JS - georgelza - Jun-05-2018

Please guys, some help

Below is some of my python code and associated Javascript in html

battling to print tot_cnt, cnt and the data array to a html table.

# app.py
# Background process to update the Delivery data

def background_thread_eft_del():

    while True:
        socketio.sleep(10)
        timeC = time.strftime('%Y/%m/%d %H:%M:%S')

        # Dummy data, to be replaced by Oracle_CX DB queries
        delivery        = {'cnt': 2, 'tot_cnt': 40, 'ds': [['row1',4,9], ['row2',6,2], ['row3',20,98], ['row4',4,9], ['row5',6,0]] }

        delivery_json   = json.dumps(delivery)

        socketio.emit('eft_delivery_update', {'timeC': timeC, 'delivery': delivery_json, 'debug_level': debug_level}, namespace='/eft')


#and the JS code and associated html 
#dashboard.html

[html]
 // Lets update the Delivery table
                socket.on('eft_delivery_update', function(msg) {

                    var timeC               = msg.timeC
                    var debug_level         = msg.debug_level

                    var delivery            = msg.delivery
                    var delivery_cnt        = msg.delivery.cnt
                    var delivery_tot_cnt    = msg.delivery.tot_cnt

                    if (debug_level > 0) {
                        console.log(delivery)
                    }

                    $('#timeC').text( timeC );

                    $('#delivery_cnt').text( delivery_cnt );
                    $('#delivery_tot_cnt').text( delivery_tot_cnt );

                    $('#delivery').append('<tr><td>' + $('<div/>').text( delivery ).html() );

                });

        <table id="EFT_Verticals">
            <th><h2>Delivery: <span id="del_cnt"></span>/<span id="del_tot_cnt"></span></h2></th>
            <th><h2>Load: <span id="load_cnt"></span>/<span id="load_tot_cnt"></span></h2></th>
            <th><h2>Validate: <span id="validate_cnt"></span>/<span id="validate_tot_cnt"></span></h2></th>
            <th><h2>Rec Completed: <span id="rec_compl_tot_cnt"></span></h2></th>
            <tr>
                <td valign="top">
                    <table border="1" id="delivery">
                    </table>
                </td>
                <td valign="top">
[/html]
G