I have a requirement where a user presses a start timer button and it begins keeping track of time. As the user moves through the website, I want the time to continue tracking, until they press the stop button.
Obviously, this cannot be achieved through client-side javascript alone, since for each page refresh time will be lost. One solution I thought was to use faye/websockets to just push the time to the browser, but for every second that lapses, that will push data to client - a strain on the server.
The only solution I can come up with is keep track of the time in javascript and then capture the page unload event send, ajax request to server with the amount of time, and let the server continue incrementing time until the next page is fully loaded. This means it will not be using push technology, just regular ajax. Is this the optimal option here or is there a better solution?
What about the case where the user kills the browser? You won't be able to capture the unload event in this case.
If you want a client side solution, try putting the start time in the localStorage where this will persist across page loads. Then when the user hits stop, you can make an ajax call to the server with the elapsed time.
I assume you need to display a timer to the user, which updates every second.
I have built a web application like that. It was a single-page application (AngularJS), so the user could navigate from 'page' to 'page' without a complete web page being loaded and the timer kept running. Would that be an option in your case?
Otherwise, you could put the start time in a cookie and every second display the difference between the current time and the start time.
A few other options, which are less preferred:
Run the web site in an iframe and keep the timer outside the iframe.
Let the timer run on the server and make a small AJAX request to the server every second (yes, I know...).
Hybrid: Let the timer run on the server and on the client and synchronize the client with the server on every page load.
Options 2 and 3 require a stateful server (with all its drawbacks).
Related
Let's say I have a button and onclick it changes components state to timer, so its state goes from 5 to 4,3,2,1 every second but if page is refreshed the value is lost since it is not stored anywhere and is rendering on client side.
How can I make this function value not to be lost when page is refreshed and be broadcasted to all users.
I do not want to use database since this function will be used a lot and would slow the db connection network also there might be a delay on database and timer would not update and server respond in time.
Any other method?
You need a server. You might not need a database, but if you're trying to share a global state, it needs to be stored somewhere that is not just a webpage. I'd suggest websockets. Every user could connect to your server, and when any of them hits the button, they'll all be informed, you can then kick off the timer in each browser, or send out second events from the websocket.
Let's say the timer is the same for all users. Really all you need to be storing server-side is a value for time zero. If you don't need to persist that value over server restarts (which needs a database), it could simply be a value in memory on the server. All the client needs then is to download this timer end value, and it can show the ticking client side by using a timeout.
I believe I can use utilize the following functions to create delayed JavaScript alerts:
setTimeout(), clearTimeout(), setInterval() and clearInterval()
But how can I use them accross postbacks. For example:
A user has a list of reminders stored in the database. When user logs into site I can access those reminders and call something like:
setTimeout(function() { alert("Reminder 1"); }, 10000);
Depending on when the reminder due date/time is.
However as the user switches pages before the alert notification happens I believe the setTimeout call won't persist.
Is the only way to get this to work to look up the users reminders on every single postback and do a setTimeout on every page or in some sort of master page?
This is not really the way to do this. If your trying to build some sort of notification system then ideally it should be driven server side.
In a normal multi-page site every time you render a page the server would check for notifications and then in your template render an alert or some UI feature that tells the user they have notifications.
That set-up won't be active, IE if a new notification is posted on the server the client page won't know about it. Unless you use a notification message api for example pubnub.
Something like pubnub would let you send the message to your page, and in your JS code get a callback, so you can render it in your dom.
Since you have a multi-page app you would need to fetch / request for the notifications on every page render. Running a timeout to trigger for an ahead of time moment is not an ideal solution.
Another way to do it is to poll your server from your js code say every 5 mins and ask for notifications.
That has a price tag on all those repeated calls to your server. The best bet is to use something like pubnub but that comes at an extra laden of code server side to make it work.
My web app is handling large data-sets that have to be returned to the user. So to speed up this process, when the data is new, the first user to access the data, triggers a caching script.
So the next user to access the data, will have the data be returned to the user in a 1/10th of the time.
The issue is, the first user has to wait 30 odd seconds to generate the data, which during that time, the script runs and starts the caching process, the issue is, the browsers checks back keeping the connection alive by triggering a GET request again.
Which triggers another cache event due to the fact the first one hasn't completed so the timestamp isnt there to say there is a cached version, so I can get multiple caching happening at the same time, due to the fact the first one hasn't finished.
Is there a way to keep the connection open and not timeout, or not allow the browser to trigger multiple GET requests when one connection is taking a bit longer to respond?
Assuming I have users on a page of my site.
I update this page on my server but users will not notice the difference until reloading the page.
How can a JavaScript function detect the difference and start reloading the page ?
A solution could be using a timer which reloads the page every second but this causes a lot of traffic?
The function you are asking is to have a server which can push information to the browser like Comet.
Else, you can also create an Ajax request which will test the current version of the page displayed in the browser and verify if it wasn't updated on the server side.
Once it detect that the server have a new version of the page, your script can tell it to the user (it is bad practice to reload without the user consent).
To avoid excessive call to the server, you should ensure that your Ajax request is only launch periodically (2 min ? 5 min ? More ?), and that no other request are currently running.
We do an online survey so we want to calculate the time spent. using javascript and php we have discovered the time spent is not 100% accurate.
The original script is sending server requests every 5 seconds and updates the time in the database.
I made a research and discovered setTimeOut and setInterval are not accurate at all. So what's the best way to do that?
I replaced the Ping function with another one that calculates the difference between previous packet timestamp and now(); however it's not accurate at all.
Please advice if there are any other solutions to the problem described.
Why don't you listen 'onunload' event of the document and send a single message in order to know when a user is leaving your page. Consider this; When a user starts filling your server you send a message and when he/she leaves your page, you send another one and measure the time between these messages in order to sum up the total time
I imagine most implementations of setTimeout and setInterval are set to wait at least the amount of time you specify. If you want accurate readings of how long the browser is open, use javascript's date functions to calculate it on the client side, then send to the server.
If you want to send requests to the server every 5 seconds, you can send the current time (using new Date().getTime()) in the request that is sent from client to server.
Save the time the 1st request was sent in the database. This is the time the user started the survey.
When each subsequent packet arrives, subtract the time the 1st request was send to get the total time the user has spent on the survey so far. When the user clicks the button to finish the the survey you could send a final request indicating the survey is complete.
You may also want to send requests on document blur and focus events. These events track when the user leaves and comes back to your page without closing the page down.