I'm working on a small project, that combines Java(servlets) with some web elements. I've got a Java back-end that deals with registration and login. When the user has logged in, he/she arrives at the dashboard where a timer awaits them.
The timer should be set at 25 minutes and when the user presses 'start', it should start counting down to zero. When zero has been reached, I want the timer to save the timestamps (begin/end) to MySQL and automatically start a 5 minute timer.
I've been looking on Google for quite some time. jQuery seems the easiest option, but I'm genuinely struggling getting this started.
Is there anyone who could help me?
Perhaps guide me on the right path or (if you have time) have a little coding session?
On waiting page use Javascript:
var timeleft = 1500; // seconds left
var timer = setInterval(function () {
timeleft--;
// optional: update HTML element here
if (timeleft == 0) { saveTimestamp(); clearInterval(timer); }
}, 1000); // run every second
Then make saveTimestamp function either redirect browser to another page or make ajax call to sync with server.
On server, make a check if user reached this point after less than 25 minutes, and if he didn't (no cheating), perform standard writing to SQL (I can't help you much with server-side, as I've never worked with Java servlets).
Related
I have an auction site in MERN stack with socket.io and i seem to have this unsolvable problem which i think is related to browsers and basic JS
Flow:
whenever a product is added by admin, socket broadcasts it with all
of details (including time )to all clients.
the clients can bid on them and stuff.
if a user refreshes the screen , it requests the socket for latest
product time and starts countdown from that time.
Everything is fine except some times react-countdown is lagging 0.5 second to 1 second behind whenever page is refreshed (please note that problem does not occur when opening same auction on new tab)
Note: i have also tried self made Countdown timer using setInterval but the problem does not go away
I am seeking assistance with this problem and am willing to compensate someone for their time and efforts to work with me directly to resolve it. Any help would be greatly appreciated.
Using setInterval and setTimeout means you are at the mercy of the browser. Browsers will often slow down the execution of these if some other process is happening and return to it once that's done, or if you switch away to another tab, they will purposefully reduce the tick rate. The level of accuracy you require is not easily achieved.
Firstly, I would suggest that getting the time it ends, then finding the difference between then and now, and counting down from this value with 1s increments will aggravate this problem. If each "tick" is off by even a small amount, this will accumulate into a larger error. This is probably what the library is doing by default. It may have also been what you were doing when you made your own timer, but I'd need to see it to confirm.
Instead, you need to store the time it ends passed from the socket (or keep it in scope like below) and on each "tick", work out the difference between then and now, every single time.
You could do this by using react-countdown in controlled mode and doing this logic in the parent.
I've made up a function here which would be the thing that receives the time from the socket -- or it's called from it. Its pseudo-code.
const timer = useRef(null)
const [timeLeft, setTimeLeft] = useState(null) // In seconds
const handleSocketReceived = (({endTime}) => {
timer.current = setInterval(() => {
const newTimeLeft = endTime - Date.now() // Pseudo code, depends on what end time is, but basically, work out the diff
setTimeLeft(newTimeLeft)
}, 100) // Smaller period means more regular correction
}, [])
// ...
useEffect(() => {
return () => clearInterval(timer.current)
}, [])
// ...
<Countdown date={timeLeft} controlled={true} />
My ionic app has a timer(a simple setInterval that ticks every second) which works perfectly fine when the app is in the foreground. However when the app goes to the background and comes back to the foreground after 10 minutes, the time displayed in the app is wrong (the time is much less that it should be). I have tried adding the timer into a directive and also using the native DOM manipulation api(document.getElementById, etc) methods, but they both didn't work. I think the ionic framework is doing something to the view and bindings when the app goes to the background. Has anyone experience such a issue and if so how did you guys manage to fix it?
After hours of searching for an answer, I finally came up with my own hack. I hope this solution might help others who come across a similar issue.
When the app goes to the background, at some random time, the timer stops ticking and goes to sleep till the app is brought back the foreground.
When the app comes up to the foreground, the timer starts ticking again from the point where it went to sleep.
Solution/Hack:
Record the timestamp in a separate variable(in seconds) and have it updated in each interval of the timer.
var timeStamp = Math.floor(Date.now() / 1000);
Check each interval of the timer if the difference between your previous interval's timeStamp and the latest(new) timeStamp is greater than one second. If the condition is met, add the difference between those two timestamps to your ticking time.
How it works:
App in Foreground
Just Before timer start ticking
- Time stamp recorded (Assume 1 second)
Timers start ticking
- check condition
if(currentTimeStamp - previousTimeStamp > 1)
{
Add the the above difference to the time
}
Before the interval ends, update the TimeStamp variable with the currentTimeStamp.
In the first interval, the currentTimeStamp should be either 1 second or 2 second depending on weather you are offloading the timer into a setTimeout.
Thus the difference will definitely be 0 or 1. Since the condition doesn't match we update the timestamp with 1 or 2 seconds and move on to the next interval.
As long as the timer doesn't go to sleep our condition will fail.
App in Background
Strangely after 10 minutes, the timer goes to sleep(our timer is literally losing track of time from now because the next interval is not firing).
App return from Background to foreground
The timer starts ticking from where it stopped(i.e. the next interval). Now the difference in our condition should be more than one second and thus adding that difference(basically the lost time) to our current ticking time.
Code:
var transactionTime = 0; //Initial time of timer
var timeStamp = Math.floor(Date.now() / 1000);
var deltaDelay = 1;
setInterval(function () {
if (transactionTime != 0 && (Math.floor(Date.now() / 1000) - timeStamp) > deltaDelay) {
transactionTime += (Math.floor(Date.now() / 1000) - timeStamp);
}
timeStamp = Math.floor(Date.now() / 1000);
//Update your element with the new time.
window.document.getElementById("transaction_timer").innerHTML = util.formatIntoHHMMSS(transactionTime++);
}, 1000);
Note: This solution work standalone(vanilla Js with native DOM api) and also works great in angular directives.
You can increase the deltaTime of the above code to 2 to be a little more accurate if by any chance your single thread is busy somewhere else with some other task.
P.s I'm actually running the ionic app inside my own instance of a webview and not cordova so I can't use any fancy cordova plugin.
Ionic/Cordova apps goes to sleep when in background mode. But you could look at this: https://github.com/katzer/cordova-plugin-background-mode
Here is a little bit updated code from the
original answer
var interval = null;
var timerSecondsTotal = 0;
function runTimer() {
var prevTickTimestamp = Date.now()
interval = setInterval(() => {
var currentTickTimestamp = Date.now()
var delta = currentTickTimestamp - prevTickTimestamp
timerSecondsTotal += Math.round(delta / 1000)
prevTickTimestamp = currentTickTimestamp
}, 1000)
}
I have used a few of the jquery keepalive session plugins with out problem.
I have been asked for something a bit different.
We have some forms (built before I started here) that are fairly large and users work in them for a while. The page is never refreshed, so they click save and the session is expired and redirect to the login page.
I suggested one of these plugin, that just prompt the user a few minutes before the session expires which would make an ajax call to keep the session alive.
However, they said, will what if they dont see the prompt and miss it all together and logs them out.
They would like me to check
Has the user had any interaction with the page in the last 5 minutes.
If Yes=Ajax call to keep alive the session, and reset timer.
if No, continue to wait until we get within 2 minutes of session time out and prompt user.
They are trying to avoid the prompt.
Is there anyway with JS/Jquery to know if the page has had any client side interaction?
Rather than using a timer to check if they've had any interaction in the last 5 minutes, couldn't you just send your keepalive any time the form has changed? It would eliminate a need for a timer loop and a small payload ajax call just to keep the session alive shouldn't hurt performance at all.
If you still want to keep the timer loop, I would still recommend using the change event on your form elements. Changing the form implies they're interacting with it, and I think that satisfies their requirement.
Edit: Update to use timer
var idle = true;
function finalIdleCheck(prompt){
if(idle){
if(prompt){
alert("last warning!");
}
//Tighten the idle check time loop; may even want to go < 30s
setTimeout(finalIdleCheck, 30*1000);
} else {
//Ajax stuff to keep session alive
idle = true; //Reset idle flag
}
}
function checkIdle(){
if(idle){
//Warn them
alert("You've been idle");
setTimeout(function(){
finalIdleCheck(true);
}, 60*2*1000);
} else {
//Ajax stuff to keep session alive
idle = true; //Reset idle flag
}
}
$(document).ready(function(){
$("form input").on("change", function(){
idle = false;
}
setTimeout(idleCheck, 60*5*1000);
}
In a modern web browser, suppose I do a setTimeout for 10 minutes (at 12:00), and 5 minutes later put the computer to sleep, what should happen when the system wakes up again? What happens if it wakes up before the 10 minutes are up (at 12:09) or much later (at 16:00)?
The reason I'm asking is because I'd like to have a new authentication token requested every 10 minutes, and I'm not sure if the browser will do the right thing and immediately request a new token if it wakes up after a long time.
Clarifications: I don't wan't to use cookies - I'm trying to build a web service here; and yes, the server will reject old and invalid tokens.
As far as I've tested, it just stops and resumes after the computer wakes up. When the computer awakes the setInterval/setTimeout is unaware that any time passed.
I don't think you should rely on the accuracy of setTimeout/Interval for time critical stuff. For google chrome I discovered recently that any timeout/interval (that is shorter than 1s) will be slowed down to once a second if the tab where it's activated looses focus.
Apart from that the accuracy of timeouts/intervals is dependent on other functions running etc. In short: it's not very accurate.
So using interval and timeouts, checking the time against a starttime within the function started by it would give you better accuracy. Now if you start at 12:00, the computer goes to sleep and wakes up at 16:13 or so, checking 16:13 against 12:00 you are certain you have to renew the token. An example of using time comparison can be found here
Compare current datetime against datetime when the page was loaded, like so:
//Force refresh after x minutes.
var initialTime = new Date();
var checkSessionTimeout = function () {
var minutes = Math.abs((initialTime - new Date()) / 1000 / 60);
if (minutes > 20) {
setInterval(function () { location.href = 'Audit.aspx' }, 5000)
}
};
setInterval(checkSessionTimeout, 1000);
Here is my code :
<!doctype html>
<html>
<body>
<input type="button" name="clickMe" id="colourButton" value="Start Timer" onclick="setTimeout('alert(\'Surprise!\')', 120000)"/>
</body>
<script>
</script>
</html>
I have taken three scenarios that might answer the question.
Scenario 1: At 00 Seconds click on 'Start Timer' button . At 25 seconds computer falls asleep.
At 1min 40 seconds wake up computer.
At 2mins Alert is displayed.
Scenario 2 : At 00 Seconds click on 'Start Timer' button . At 26 seconds computer falls asleep.
At 3 mins, I wakeup the computer. The Alert is displayed.
Scenario 3 : This one is truly astounding.
<input type="button" name="clickMe" id="colourButton" value="Start Timer" onclick="setTimeout('alert(\'Surprise!\')', 600000)"/>
At 00 Seconds I click on 'Start Timer' button.
At around 1min 30 seconds the computer is on hibernate mode (my pc takes a minute to initiate hibernate)
At 8 mins I turn the laptop on.
At 10 mins exactly, the alert pops up.
PS: This is my first ever comment on Stack Exchange. I prefer to execute code and view results rather than infer from theory.
The behavior is based on both the browser and the operating system. The OS handle sleep and individual apps often don't account for it.
What will most likely happen is that the OS will come back up with the same time remaining on the timer as when it was shut down. The other possibility is that it won't fire at all.
If it is really a concern, you will probably want to be better safe than sorry and store a time stamp of when the token was initialized and use setInterval to check it periodically (say twice a minute).
However, security should not be just a client side thing. Make sure that your server throws an error if an old / invalid token is used and that the Ajax behaves appropriately in response.
[edit]
I agree with the other post that it might fire immediately on the next tick. Resig's blog post is very good.
Behaviour of JavaScript timers (setTimeout) in several scenarios.
When the thread is free and the timeout fires: The timer is fired immediately after the timeout. It might have certain imprecision of about 0-5 ms (typical scenario).
When the thread is super busy (huge loop) long enough to pass the timer timeout: The timer will be executed immediately after the thread is freed.
When there is an alert: Same behaviour as 2.
When the thread is paused because our laptop went to sleep: I have seen several things. But most common is total inaccuracy and ignore of the time spent during sleeping.
Since timers in JavaScript are based on CPU ticks, and the CPU is sleeping, then the timer is completely paused and resumed as 'since nothing would have happen'.
Based on Ben's answer, I created the following util. You can tweak the sampling duration, however I use it just like this for token refreshing:
const absoluteSetInterval = (handler, timeout) => {
let baseTime = Date.now();
const callHandler = () => {
if (Date.now() - baseTime > timeout) {
baseTime = Date.now();
handler();
}
};
return window.setInterval(callHandler, 1000);
};
const absoluteClearInterval = (handle) => window.clearInterval(handle);
In John Resig's blog the timers are said to be using "wall clock". I believe that the events will fire immediately after the machine is resumed because setTimeout() doesn't guarantee an execution is a specific point in time but as soon as possible after the specified interval. However, I haven't checked it myself.
I'm developing an web application using asp.net mvc, and i need to do a stopwatch (chronometer) (with 30 seconds preprogrammed to start in a certain moment) on client-side using the time of the server, by the way, the client's clock can't be as the server's clock. So, i'm using Jquery to call the server by JSon and get the time, but it's very stress because each one second I call the server to get time, something like this:
$(function() {
GetTimeByServer();
});
function GetTimeByServer() {
$.getJSon('/Home/Time', null, function(result) {
if (result.SecondsPending < 30) {
// call another function to start an chronometer
} else {
window.SetTimeout(GetTimeByServer, 1000); //call again each 1 second!
}
});
}
It works fine, but when I have more than 3 or 4 call like this, the browser slowly but works! I'd like to know, how improve more performace in client side, or if is there any way to do this... is there any way to client listen the server like a "socket" to know if the chronometer should start...
PS: Sorry for my english!
thanks
Cheers
Felipe,
On page load get the server time and also the Client Side time. and use the two in reference to determine what the server time is on the server side without using AJAX call every time. Sorry for the excess of suedo code but it shouldnt be too hard.
var ServerTimeReference;
var ClientTimeReference;
function InitializeTime()
$.getJSon('/Home/Time', null, function (result) {
ServerTimeReference = result.ServerTime; //convert to js time
ClientTimeReference = new Date();
});
function GetServerTime() {
var TimeDifference = //get the difference between server and Client time
var CurrentClientDateTime = new Date();
var CurrentServerTime = // using timedifference and CurrentClientDateTime calculate ServerTime
return CurrentServerTime;
}
I would do all of the time checking on the client side. You are already using jQuery, just use a timer plugin. I've had good success with this one.
If you really want to use it like this, you basically got this options:
Use AJAX polling (COMET)
Use HTML5 WebSockets
I don't fully understand why you just send a value to the client and not just a "GO" string if the client should start doing anything.
Either way, you don't have to poll that every second (I mean come on, if your local PC's clock is THAT wrong would be a bad sign). So it should be enough to 'syncronize' every 10 seconds for instance (which also is pretty fast).
So my basic strategy would be, call a backend function which tells my client, how much time is left to go and setup a setTimeout on that value.