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>
This is actually not as complicated as you think; the implementation would go along the lines of...
first_post (defaulting to False) and first_post_time, which will hold a timestamp of when the server received the first request.first_post is True. If not, set it to True and you know that it's the first post request.first_post_time, then render the template as usual.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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments