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.
Related
I was wondering what the best way of implementing a timer in the frontend would be.
The idea is to notify the user after 13 minutes of inactivity (= not made a request to the backend) that he will be logged out in 2 minutes.
My first attempt was to just use a Timer which is executed every second (I am doing this with Flutter web but it shouldn't make a difference) and counts down from 15 minutes.
Then we tested this internally and noticed that the Browser somehow stops JavaScript execution if the user switches to a different tab for a long time or if the computer goes into stand by such that the timer stops.
We already have a session timeout after 15 minutes from the backend, this is just to make the user experience better.
How would this be correctly implemented?
For short, I think it's impossible for only using frontend
As you examine, the javascript code will be stop whenever switching tab or close tab, computer stands by. So that it will not be good to use a timeout or something like that.
I used an idea before but not implemented it yet because I switched to simpler idea with sessionStorage. But you could see and somehow success with it: when last request is made, created a cookie with expire time is 13 minutes. If next request is made, clear old cookie and add a new cookie with 13 minutes too. If the request will not made during 13 minutes, when cookie expire, fire a event to annouce to user. To listening cookie change, I think there are a lot solutions out there. But for me, this idea is not so good so I forgot it.
If you can use a nodejs backend, you could try to use Server Send Event - SSE. This will create one-way sending data. Therefore you can stream a chunk of data. And the frontend will listen that streaming and decide whether to annouce to user.
I want to make a custom tracking system for web events. I have looked into multiple per-excsiting systems, but I want something terribly simple - yet very accurate.
I want to be able to track the following:
Page view even
Time on that page
or:
Video started playing event
Time of video watched
My first initial thought was to do a simple javascript reporting back to the server, but what happens if the user closes the window? How do I know they stopped viewing? And how can I get accurate measurements down to 1/10th of a second? So I thought of a websocket solution, as it know when a user has discounted. I ended up with Socket.io, but I want to make sure there is no better or smarter way to achieve this?
How would you approach his challenge? What is the smartest way to engineer this?
A Websocket connection which reports back to the server frequently was my first thought as well, but if you send 10 messages every second, even that might be too much for a websocket, especially when connectivity isn't top-notch.
Since the server doesn't require the information absolutely immediately, consider batching requests instead - save/update the information into Local Storage every 0.1 seconds, but don't send it to the server then - instead, every 30 or 60 seconds, or on pageload, take the current data in Local Storage and send it to the server, and clear Local Storage so that the next request a minute from now doesn't send duplicate data.
I need to develop a countdown, which synchronizes with the time on the server.
The job is pretty easy, I have a Form divided in 3 steps, the first step need to be filled and posted in 2 minutes, the last step in two hours.
I have to show the user the countdown but I also need to do this job on the server because we can't rely on the user's local time, we need to secure this countdown with the server time to prevent user's tricks. (we are on iis with asp.net webforms)
I also can't use a database to store time's information, I need to do this with session/cache variables (PM Orders)
any suggestions?
You can send your server time to client and get a difference in client time and server time and save this time difference, and also save the starting time stamp of timer.
You can verify this timer accuracy latter by hitting the server for server time and calculate new difference between client and server time, if it find any discrepancy, correct the timer.
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).
We've built a chat web-app, user get data from APIs first time and then send data back to server with those APIs, and we're using websocket to handle new data (new messages and other stuff).
Today one of our users told us that wrong number of messages showed up in the list of new messages, after hours of investigation I've noticed that user has wrong system time (about 3 minutes difference from our server time).
In our app, we check if user opened that conversation and then send current time back to server (from javascript new Date()).
I don't want to user lose any new message, even when they marked that conversation as read and during marking process new message arrived, if I set time from server they will lose that new message, if I use browser time that's not matching exact to our server.
I really don't know handling this case is important or not, and other apps handling this case or not, and if handling this how?
Every bit of help is really appreciated
Edit
I don't want to send user check-time on every request, for this reason our app sends server checked time 10 seconds after user interacted with app (marked that as read).
Send message with something like Last-Event-ID generated from server.
and decide which message you should send. not just user time.