//Script zur Feststellung der User-Aktivität
"use strict";
//Script kapseln, damit der globale Namespace nicht verschmutzt wird
(function A () {
//variablen deklarieren
var now = Date.now();
var lastActivity=now;
//Tickrate 100 ms
//Es muss ein Mittelweg zwischen Aktualisierungsrate und Last gefunden werden.
var timerInterval=100;
//Timeouts festlegen (in Millisekunden)
// zum Testen relativ kurze Zeite, später deutlich länger
var idleTimeoutVisible=5000;
var idleTimeoutBlur=2000;
var idleTimeoutHidden=1000;
var idleTimeout=idleTimeoutVisible;
var pageVisible=true;
var pageFocus=true;
var userActive;
tick(); // Den ersten Tick abfeuern damit der Userstatus sofort kommt.
// SetInterval als Taktgeber für das Programm
var timerId=setInterval(tick,timerInterval);
//Eventhandler für Focus, Blur und Visibilitychange
window.addEventListener("focus", function()
{
pageFocus=true;
lastActivity=now;
idleTimeout=idleTimeoutVisible;
console.log("Focus, Timeout set to: "+idleTimeout);
});
window.addEventListener("blur", function()
{
pageFocus=false;
lastActivity=now;
if (pageVisible===false) idleTimeout=idleTimeoutHidden;
else idleTimeout=idleTimeoutBlur;
console.log("Blur, Timeout set to: "+idleTimeout);
});
window.addEventListener("visibilitychange",function()
{
if (document.hidden) {
pageVisible=false;
idleTimeout=idleTimeoutHidden;
console.log("Hidden, Timeout set to: "+idleTimeout);
}
else {
pageVisible=true;
idleTimeout=idleTimeoutVisible;
console.log("Visible, Timeout set to: "+idleTimeout);
}
lastActivity=now;
});
//Eventhandler registrieren um Aktivität im Fenster festzustellen
//Evtl müssen noch weitere eingebaut werden.
window.addEventListener("mousedown", function()
{
lastActivity=now;
});
window.addEventListener("keydown", function()
{
lastActivity=now;
});
window.addEventListener("keydown", function()
{
lastActivity=now;
});
//Diverse Eventhandler für einzelne Elemente wie z.B. die spätere Messagebox, Eingabefeld, Statusbar usw.
//Hier nur beispielhaft eine Reaktion auf einen Klick auf die Messagebox.
var elem = document.getElementById('msg');
elem.addEventListener("mousedown", function()
{
console.log("Nachrchtenbereich angeklickt");
});
//Prüft, ob der User aktiv oder inaktiv ist.
function checkIdle ()
{
var laststate=userActive;
if (now-lastActivity>idleTimeout)
{
userActive=false;
}
else
{
userActive=true;
}
//Nur ausgeben, wenn sich etwas geändert hat
if (laststate!=userActive)
{
console.log("userActive changed to: "+userActive);
if (userActive==true) document.getElementById('info').innerHTML="User ist gerade aktiv";
else document.getElementById('info').innerHTML="User ist gerade Inaktiv";
}
}
// Die Funktion "Tick" ist der Taktgeber des späteren Programms
// Hier können diverse Funktionen eingebaut werden, die regelmäßig ausgeführt werden sollen.
// Beispielsweise regelmäßige XHR Requests, DIV Aktualisierungen usw.
function tick ()
{
now=Date.now();
checkIdle ();
}
})();