I have a web server that generates questions for students of a particular subject. The web server needs to keep track of how much time each student has spent on a particular set of questions.
The web pages have a "Finished" button, which, when pressed, causes statistics to be sent to server.
However, I also want the web browser to send statistics if the student navigates away from the page or closes the browser window without pressing "Finished".
For this purpose, I have planned to have "onunload" or "onbeforeunload" send an Ajax request to the server with the relevant information. But apparently different browsers do not fully support these events, and also there are restrictions on what can be done in the event handlers. And, of course, I don't want the browse to freeze if the communication with the server fails.
So, I need some advice on the best way to do this.
If I wanted to be sure to handle all the "special events" I would send tick 'requests' from the webpage to the server. Granularity depends on the tracking requirements, the load, and whether it is an intranet or internet application; can be some seconds or even a minute. So you are tracking the time spent on the page even if the browser/os/network crashes.
The best way to implement is, is to use period updates. This will pretty much guarantee you have some relevant data when the user disconnects in any way.
An implementation is pretty trivial, all tough you might have to refactor some of your logic to send out period updates instead of everything at once.
function sendStatistics()
{
// ajax and what not
}
setInterval(function(){
sendStatistics();
}, 1000);
An other way to make it work is to make your ajax call in beforeunload and make it synchronous. This will freeze the browser for duration of the call, and will also only work when navigating away or closing the browser, i don't recommend this.
Related
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 have a situation where a user will be going through a series of form pages that will take them to a point where there will be a prolonged wait. The wait could be as long as 5 minutes. Once the waiting is over I want to move the user to the next page.
I'm wondering what the best way to listen for the signal from the app that it's time to move on. I considering using a WebSocket, but it seems like overkill for this. I considered opening an Ajax call using keep alive in the header response. I also considering using Ajax to poll every so often.
I'd love advice on what the cleanest approach is.
First off, you should not have that prolonged wait. Background this process on the server. Make the user do something else while that process happens. You can have them navigate away, tell them something's processing, we'll get back to you.
While you do that, each page in your site will have a listener that awaits a signal from the server. WebSockets, as you said is overkill. You can use Server-Sent Events instead. It's a "one-way socket" from server to browser.
Note that it isn't supported in IE (I wouldn't wonder) but there are polyfills.
I have also heard friends use Firebase for this as well.
I would like to save the position of HTML5 video's currentTime to the database when user leaves a web page. It seems like window.onbeforeunload is not a reliable way to do it (not to mention it gives an undesirable popup window!). Is there a better way to do this?
I can't think of anything other than saving the position to the server periodically. But that seems wasteful resource/bandwidth wise. Netflix seems to do a good job at remembering your last viewed position. How would they be able to achieve that reliably? Low-level server-side C/C++ code maybe?
There are various ways to save such things:
Locally (for the same domain)
beforeunload
This gives you the possibility to cancel the unload event if you desire. However, the popup is optional.
unload
This event can't be cancelled but you still have full access to all nodes and JavaScript variables. So you can do final cleanup/save then if canceling is not wanted. You can use whichever saving method you like, e.g. document.cookie or window.localStorage.
window.onunload = function () {
window.localstorage[myVideo.currentTime] = document.getElementById("myVid").currentTime;
}
If you can handle the fact that you can only process cookies and localStorage when the user comes back to your site. I think this approach would be perfect. You simply save the current time and on the users next visit you'll get the updated information.
On the Backend
If you really need to save that information to your backend you can try some other things.
DB polling
Depending on you accuracy needs you could send an ajax request every 10 - 20 seconds to update the playback time. If you just include the video id and current time, the request is so small it shouldn't have an effect on performance. However keep in mind that if you have lots of domain cookies it might increase the size of requests tremendously and your 500 byte payload might come with a 5kB header.
Is there any way to detect when a user leaves a page, no matter if it's by closing the browser, entering a new URL in the address bar, clicking on a link that redirects to other domain, etc. ?
The main purpose of this would be to perform some activities such as:
sync with the server some data that resides in the client side
clear server session
I was trying with the window's unload and beforeunload events, and reading other questions like:
Best way to detect when a user leaves a web page?
//
Is there any way to know that user leaving a page with asp.net? but I didn't find the answer I would expect.
Here is a simplified js snippet to understand what I was trying:
window.onunload = function(){
if (theConditionThatINeed){
doThings();
SyncWithServerAndAbandonSession(url, localObjects);
}
else {
doNothing();
}
}
I don't want to display any kind of confirmation before the user leaves, so I think that the onbeforeunload won't help me here.
Supposing that the answer is "there is no way to do such thing", what would be the recommended practice to accomplish the synchronization and session clearing that I want?
The primary browser that I support is IE >= 7
As you already read, it is not reliably possible to detect whether the user leaves your page.
Generally it is not good practice to store any unsynced state on the client side. Browsers are easily closed or crashed.
You can send yourself ajax keepalive messages via javascript, in case the user does anything on your page. Again, very unreliable, wasteful and hacky.
Auto-Sync after a short timeout.
Take a look at RESTful web applications. The concept is interesting, and, very superficially spoken, discourages keeping state information on the server. You can apply this to the client as well.
This usually results in keeping state information in the URL. The URL tells the server anything it needs to know to service the request, it should not need a memory (the session) of any previous activity.
I try to only keep the user identification info in the session. I would get rid of this too, but some tools and libs need the user in the session.
I have an ExtJS grid on a web page and I'd like to save some of its state information back to the server when the users leaves the page.
Can I do this with an Ajax request onUnload?
If not, what's a better solution?
You can use an Ajax request, but be sure to make it a synchronous request rather than an asychronous one. Alternatively, simply save state whenever the user makes a change, this also protects the data if the user's browser crashes.
There's an answer above that says to use a synchronous ajax call, and that is the best case scenario. The problem is that unload doesn't work everywhere. If you look here you'll find some tricks to help you get unload events in safari... You could also use Google Gears to save content user side for situations where the user will be coming back, but the only fully safe way to keep that information is to continuously send it as long as the user is on the page or making changes.
You could also set a cookie using javascript on unload. I think the advantage ajax has over cookies is that you have the data available to you for reporting and the user (if logged in) can utilise the data across different machines.
The disadvantage of using ajax is that it might slow down the actual closing of the browser window, which could be annoying if the server is slow to respond.
It depends on how the user leaves the page.
If there is a 'logoff' button in your GUI, you can trigger an ajax request when the user clicks on this button.
Otherwise I do not think it is a good idea to make a request in the onUnload. As said earlier you would have to make a synchronous request...
An alternative to the cookie solution would be an hidden text field. This is a technique usually used by tools such as RSH that deal with history issues that come with ajax.