I’m entering my second day of web development, so be gentle!
I’m trying to code a little web app which allows a user to visit a site and click/tap the screen to direct a dot on another screen. To do this I’ve set up a Django server to handle the data, I’m using Javascript to get the click/tap position, send that via POST data to the server, then draw it using Processing.js (my boss is big on Processing, and this is really a test for interactivity with Processing on a big screen via cellphones, etc).
I’m not a web developer so even this simple task has been quite the challenge. I was feeling quite comfortable up until this point. When a user loads the interaction web page, they are assigned an arbitrary user id for the app which lets them control their specific dot. I want that dot to be deleted when the user leaves the page. I plan on implementing a backup timeout later, but I’d like to have the instant delete first for the best experience, closest to expectations. (Our end goal I think is to have a nice big screen running a simple game, where people can walk by, use the QR code on the screen to launch the interaction site, and join the game. When they get bored they just close the site and that deletes them from the game screen, simple).
In my interaction page I have this code (apologies for poor variable names):
<body onload="load()" onbeforeunload="unload()">
<canvas id="canv" width="1000" height="1000"/>
<script type="text/jscript">
var userid;
function load() {
userid = Math.floor(Math.random()*1000) //this will of course be changed
var canv = document.getElementById('canv');
canv.addEventListener('click', onCanvasClick);
//$(window).unload(unload());
}
function onCanvasClick(event) {
var cx, cy;
var canvv = document.getElementById('canv');
canoffset = $(canvv).offset();
cx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - Math.floor(canoffset.left);
cy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor(canoffset.top) + 1;
cx = (((cx - 500) / 500) * 3);
cy = (((cy - 500) / 500) * 3);
var data = {
x: cx,
y: cy,
id : userid,
deleteMe : 0
};
$.post("", data);
}
function unload() {
//send remove code for this user
var data = {
x: 0,
y: 0,
id: userid,
deleteMe : 1
};
$.post("", data);
//alert("test");
}
</script>
This POST data is supposed to be sent to the Django server. The POST sent from the onCanvasClick function is successfully received, and I see the dots moving according to plan. However, the POST sent from the unload() function is not received, no matter if I use the beforeunload or unload event (or, as you can see commented out, the JQuery unload). However, the commented-out alert still fires.
What am I missing here? Is there a tried-and-true way to tell the server that a user has left the page?
There is no 100% dependable way to tell when someone has left your page. The best you can do is use some AJAX polling and assume that the user has left once the polling stops or perhaps use web sockets (not universally available) to keep a connection open.
For example – I’m browsing your site with my tablet, and I lose my Internet connection.
beforeunloadwill not help you in that situation.