Possible ways to display real time sensor data on web page using python

Question

I am trying to make web application which takes temperature and (motor)RPM from sensors coming through my computer which connected serially to a mechanical machine and display it on web page.

I am using Python Flask with AJAX. What I've tried so far now is took jsonify data from back-end and displayed on html page. But I am not getting or seeing any real time data changing on web page without reloading the page. I need to reload the page every time to see data changing.

How can I and what are the possible ways to get this data displayed on web page.

This is my python script for flask app:

from flask import Flask, render_template, request, jsonify
import random
import time
import serial


app = Flask(__name__)

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


@app.route('/ret_num', methods = ['POST', 'GET'])
def ret_num():
    s = serial.Serial('COM7')
    res = s.read()
    time.sleep(1)
    return jsonify(res) 

if __name__ == '__main__':
    app.run(debug = True)

And HTML code:

<html>
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<script>
$(function(){
    $.ajax({
        url: '/ret_num',
        type: 'POST',
        success: function(response) {
            console.log(response);
            $("#num").html(response);
        },
        error: function(error) {
            console.log(error);
        }
    });
});
</script>
<h1>Output</h1>
<h1 id="num"></h1>
</body>
</head>
</html>

Akashdeep Singh · Accepted Answer · 2019-02-17 20:02:31Z

2

There are two good ways of doing this:

Polling Essentially, you'll have to call your API on a loop at a small interval, say 30 seconds. This can be achieved by using something like (code may not work as is, but the principle remains the same):

    setInterval($.ajax({
        url: '/ret_num',
        type: 'POST',
        success: function(response) {
            console.log(response);
            $("#num").html(response);
        },
        error: function(error) {
            console.log(error);
        }
    }), 30000);

Using WebSockets instead of plain AJAX calls. Read docs here.
(Bonus) You can reload your page at an interval. For example, to reload every 30 seconds:

    setInterval( location.reload(), 30000);

answered Feb 17, 2019 at 20:02

Akashdeep Singh

4085 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shriniwas Over a year ago

Wont it affect on page data?, if we are reloading page at specific time interval. I mean its feasible. Will Work. Also I tried Flask-IOsocket module but I think thats different approach for my kind of application.

Akashdeep Singh Over a year ago

I assumed that the only data on the page is the one from the sensor. Like I said, it's the last and most dirty approach. The first solution should be the right one for you. Polling.

Shriniwas Over a year ago

Okay. What I did using your first approach is I made two identical AJAX scripts and called them separately in same html page and it worked well. setInterval worked in my case though I set 1 sec of interval script and 1 sec in backend code. Please tell me if this is not dirt way to do it.

Akashdeep Singh Over a year ago

Nothing dirty about it IMO. Ajax Polling is a legitimate technique to achieve real-time-esque updates.

Collectives™ on Stack Overflow

Possible ways to display real time sensor data on web page using python

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related