How can I prevent my values from restarting when I receive a post request?-CodePudding

The overall goal is to have a python program that upon receiving its first post request, it will render a html template that uses JavaScript to start a stopwatch. When the python program receives its second post request, I would like to be able to grab the values of the stopwatch at that current moment in time.

I was going to use the browsers local storage but quickly realized that would not be an option considering I will be deploying to heroku. My current implementation fails because each time I return the html template(or I send a new post request), the values get reset and the post request is never sent back to my python script(127.0.0.1:5000/test).

How can I start the stopwatch upon the first post request to my python script, and then grab those values without restarting it upon the second post request to my python script?

Python program - I am including very little of this file because I do not think it is necessary. Please let me know if I should include more.

@app.route('/test', methods=['POST'])
def dashboard():
    return render_template('dashboard.html')

dashboard.html

<!DOCTYPE html>
<html>
<body>
    <div id="stopwatch-container">
        <div id="stopwatch">00:00:00</div>
    </div>
    <script>
        var stopwatch = document.getElementById("stopwatch");
        var startBtn = document.getElementById("start-btn");
        var timeoutId = null;
        var ms = 0;
        var sec = 0;
        var min = 0;
        if(ms > 0){
           postHook(sec); 
        } else {
           start(); 
        }
        
        function postHook(sec){
            object = { 
                stopwatchValues: sec 
            }
            fetch("https://127.0.0.1:5000/test", { method: 'POST',body: JSON.stringify(object) })
        }

        /* function to start stopwatch */
        function start(count) {
            timeoutId = setTimeout(function() {
                ms = parseInt(ms);
                sec = parseInt(sec);
                min = parseInt(min);
                console.log(sec)
 
                ms  ;
 
                if (ms == 100) {
                    sec = sec   1;
                    ms = 0;
                }
                if (sec == 60) {
                    min = min   1;
                    sec = 0;
                }
                if (ms < 10) {
                    ms = '0'   ms;
                }
                if (sec < 10) {
                    sec = '0'   sec;
                }
                if (min < 10) {
                    min = '0'   min;
                }
                if(count == null){
                    count = 69;
                }
                stopwatch.innerHTML = min   ':'   sec   ':'   ms   ' | '   count;
 
                // calling start() function recursivly to continue stopwatch
                start();
 
            }, 10); // setTimeout delay time 10 milliseconds
        }
    </script>
</body>
</html>

CodePudding user response：

This is actually not as complicated as you think; the implementation would go along the lines of...

Create 2 variables in your server (make sure it's declared at the top level and not inside your controller function; feel free to rename): first_post (defaulting to False) and first_post_time, which will hold a timestamp of when the server received the first request.
On a POST request, check if first_post is True. If not, set it to True and you know that it's the first post request.
(If this is the first request) on your server, generate a (current) timestamp and assign it to first_post_time, then render the template as usual.
On any subsequent POST request, take the current timestamp and subtract it from first_post_time. This is the current time displayed on the first user's stopwatch. Render a template with the value or do whatever you want with it.

Note: this implementation will have some latency on other client's devices, as the culminative HTTP requests may take a while to process. If you need as best accuracy as possible, look into realtime client-server-client or p2p solutions like websockets or WebRTC, respectively.