• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Prüfen ob Seite aktiv genutzt wird

Elma

New member
Hi.

Gibt es eine gute Möglichkeit, mit JS zu prüfen, ob die Seite im Browser auch aktiv genutzt wird oder ob der User es nur so "Mitlaufen" hat.
Wenn der User eh nicht "Hinschaut" braucht man ja auch nicht so oft updaten.

Mir schwebt vor, Mouse Over, onblur und onfocus Events dazu einzubauen + auszuwerten.
Oder habt ihr ne bessere Idee?

LG
 
Ganz sicher kann man sich nie sein. Ich würde Tastenanschläge, Scrollrad, Mausklicks links und Mausbewegungen auf der Seite über 100 Pixel prüfen, und wenn x davon in y Zeit vorkamen, sagen, dass der Nutzer aktiv ist.
Nur um Aktualisierungszeit zu sparen lohnt sich das aber nicht, wenn das Aktualisierungsscript nicht Daten von einem Server abruft, der nur ein begrenztes Datenvolumen hat.
 
So könnte man testen, ob der Tab im Browser angezeigt wird:
Code:
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
</head>
<body>
<div id="messages"></div>
<script type="text/javascript">
(function(){
	var output = document.getElementById("messages");
	function tick(){
		window.requestAnimationFrame(tick);
		var now = Date.now();
		if (now - tick.last > 1000){
			var div = document.createElement("div");
			div.textContent = (new Date()) + ": not called for " + (now - tick.last) + " ms";
			output.appendChild(div);
		}
		tick.last = now;
	}
	tick.last = Date.now();
	tick();
}());
</script>
</body>
</html>
 
Danke für das Beispiel, funktioniert schon recht gut.
Eine Möglichkeit, abzufragen ob der Browser als solches im Hintergrund/minimiert ist gibt es aber nicht?

Grüße
 
Der Code feuert auch, wenn der Browser minimiert war. "Hintergrund" ist schwer zu definieren und deswegen auch nicht so leicht zu detektieren.
 
Unter Hintergrund verstehe ich z.B. folgendes Szenatio: Browser ist offen und Seite wird angezeigt, wird aber vollständig von einer anderen Software überdeckt und ist auch nicht das aktive Fenster.
 
Mich wundert, dass der obere Ansatz da dann auch nicht hilft... eigentlich muss dann ja nichts gerendert werden.
 
Der Code reagiert nur, wenn der Tab gewechselt oder der Browser komplett minimiert ist.
Ein Fokusverlust wird nicht erkannt. Ich versuche heute abend aber mal, noch was mit onblur, onmouseover etc in kombination einzubauen.
 
Moin.

So, ich hab nun mal eine Lösung ausgearbeitet, um festzustellen, ob ein User die Seite aktiv nutzt oder er nur "herum-Idelt".

Sobald der User das Tab wechselt oder den Browser minimiert, wird dies erkannt.
Aber auch wenn der Browser und die Seite offen bleiben, der User aber in ein anders Programm wechselt, wird das erkannt.
In beiden Fällen werden entsprechende Timeouts gesetzt
Das passiert absichtlich mit Timeout und nicht sofort beim Abfeuern der Events, damit kurze Fenster/ oder Tabwechsel später keine andauernden Statusänderungen hervor rufen.

Sollte der User den Browser mitlaufen haben, aber anderen Tätigkeiten nachgehen, wie z.B. Fernsehen o.ä wird das über einen etwas längeren Timeout auch behandelt.

Ziel des Ganzen ist, später in der Chat-Anwendung den User als Verfügbar oder als "Beschäftigt" zu kennzeichnen.

Hier mal das Script:

Code:
//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 ();
}


})();

Falls Ihr Anregungen und Verbesserungshinweise habt, nur her damit, es würde mich freuen.
 
Zurück
Oben