[Résolu] Détecter l'inactivité d'un utilisateur - Javascript par orka - page 1

Bonjour à toi ami zéro

Le principe de ce script est un peu original dans la mesure où tu n'attends pas un événement qui est par définition actif mais une inactivité qui se traduit par l'absence d'événements.

Comme tu dois déjà le savoir, détecter un évément est chose aisée grâce à javascript alors qu'en détecter l'absence demande un petit plus d'astuce. Le principe serait de tester à des intervalles de temps réguliers si un événement ne s'est pas déclenché depuis un certain temps. Pour cela, un peu de préparation peut-être nécessaire, histoire d'avoir les idées claires.

Que veut-on ? Dans un premier temps, détecter une inactivité, et, dans un second, savoir depuis quand elle dure. Comme tu l'as bien précisé, on peut considérer que si le visiteur n'utilise ni son clavier, ni sa souris, c'est qu'il est inactif

(sinon je demande à voir).

Détecter l'inactivité

Un peu de réflexion

Pour atteindre notre premier but, il faut créer une fonction qui teste toutes les x secondes si la souris a bougé ou si une touche du clavier a été pressée. Pour ce faire, les événements javascript vont nous être indispensables :

- pour détecter les mouvements de la souris, on utilise onmousemove
- pour détecter l'activité du clavier, on utilise onkeydown (ou onkeypress)
- pour lancer une fonction toutes les x secondes, on utilise la fonction setTimeout()

Mais mais... o_O

On ne peut pas utiliser ces événements dans la fonction que l'on va créer !

Effectivement, la fonction n'est lancée que de temps en temps et il faut savoir si une activité quelconque a été détectée entre les deux derniers appels de fonctions. Pour cela, il suffit donc d'enregistrer toute activité dans une variable que la fonction testera une fois appellée.

Supposons que l'on crée une variable booléenne (qui prend pour valeur true ou false) avec pour nom activite_detectee. Par défaut, la variable a pour valeur false (pas d'activite détectée) car le but étant de détecter une activité il faut prendre pour hypothése de départ que le visiteur est inactif.

Ainsi, dès qu'un événement est détecté on change la valeur de activite_detectee pour true.
Le but de notre fonction sera donc de tester la valeur de cette variable.

C'est bien beau tout ça, mais dans ce scénario, dès qu'une activité est détectée, la variable prend la valeur true sans discontinuer... :colere2:

Pas possible de détecter une activité une seconde fois alors !

Justement, notre fonction va faire en sorte de repartir de zéro : soit aucune activité n'a été détectée et alors on attend encore, rien ne change, soit une activité a été détectée et alors on annule tout et on recommence, ce qui revient à donner pour valeur false à activite_detectee.

Mise en application

Le principe a été mis en place, nous pouvons nous lancer dans l'écriture du script capable de distinguer activité et inactivité chez un visiteur.

Il est une bonne habitude à prendre lorsque l'on utilise un script javascript assez conséquent dans ses sites web, c'est de séparer javascript et html. Dans cet exemple, je vais donc créer un fichier activite.js à part que j'incluerais dans la page html.

Par où commencer ? Quand on a une certaine expérience en ce qui concerne la programmation, il est possible de commencer indifférement par la détection des événements ou par la construction de la fonction, cependant, par souci de logique, je préfére démarrer par la détection des événements sans lesquels la fonction n'aurait aucun sens : c'est un peu comme travailler sur du vide.

Mais au fait, on les pose où les événements javascript ? o_O

On cherche à détecter toute activité quelle que soit sa "position" sur la page. Le plus logique reste donc de détecter ses événements au niveau du body. On a donc le document suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Activité et inactivité d'un visiteur</title>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="activite.js"></script>
</head>
<body onkeydown="activite_detectee = true;" onmousemove="activite_detectee = true;">
<h3>Bonjour et bienvenue, cher visiteur !</h3>
<p>Nous testons actuellement, et tout le long de votre présence sur cette page, votre activité et inactivité. Merci d'avoir bien accepté de participer à l'expérience.
Orka et son équipe.</p>
</body>
</html>

Dans cette page, les seuls éléments importants sont les balises <script></script> et la balise <body>.
En effet, les balises <script></script> permettent d'inclure le code javascript dans la page et la balise <body> permet de détecter les événements révélateurs d'une activité chez le visiteur, ce sont donc les seules choses qui font tourner le script et donc, qui nous intéressent.

On voit bien que lorsqu'une touche est appuyée ou que la souris bouge, la variable activite_detectee prend pour valeur true, comme prévu.

Il s'agit maintenant de créer le fichier activite.js qui déclarera et initialisera (à false) la variable activite_detectee et créera la fameuse fonction dont on ne cesse de parler depuis tout à l'heure et qui portera le nom de testerActivite. Voici :

// On déclare et initialise la variable
var activite_detectee = false;
var intervalle = 100;
// On crée la fonction qui teste toutes les x secondes l'activité du visiteur via activite_detectee
function testerActivite() {
// On teste la variable activite_detectee
// Si une activité a été détectée [On réinitialise activite_detectee]
if(activite_detectee)
activite_detectee = false;
// Si aucune activité n'a été détectée [rien pour le moment]
else {}
}

Le code est simple, il est commenté et j'en ai déjà expliqué le principe plus haut, donc je ne m'attarderais pas dessus, en revanche, on peut remarquer que dans ce script, la fonction n'est appellée à aucun moment. Il va donc falloir lui apporter quelques modifications.

Par ailleurs, une variable inconnue s'est infiltrée dans le code, intervalle. Elle contient juste la valeur, en millisecondes, de l'intervalle de temps qui s'écoule entre deux appels de fonction. Créer une telle variable permet une modification rapide du script et accroît la lisibilité du code. Voici le fichier désormais :

// On déclare et initialise les variables utilisée
var activite_detectee = false;
var intervalle = 100;
// On crée la fonction qui teste toutes les x secondes l'activité du visiteur via activite_detectee
function testerActivite() {
// On teste la variable activite_detectee
// Si une activité a été détectée [On réinitialise activite_detectee]
if(activite_detectee)
activite_detectee = false;
// Si aucune activité n'a été détectée [rien pour le moment]
else {}
// On relance la fonction ce qui crée une boucle
setTimeout('testerActivite();', intervalle);
}
// On lance la fonction testerActivite() pour la première fois, au chargement de la page
setTimeout('testerActivite();', intervalle);

Et voilà, maintenant, le code est fonctionnel, parole de scout !

Bah, c'est nul, on peut pas savoir si il marche vraiment le code, quand on teste on voit rien...

Oui, bon c'est vrai, ça manque de dynamisme mais mon but à la base était de nous amener à un code fonctionnel

Je ne vais donc pas perdre de temps à expliquer le code qui suit (et qui est, soit dit en passant, strictement inutile pour la suite du travail) et qui permet de voir dynamiquement ce qu'il se passe dans notre code. Les commentaires sont là tout de même pour aider à la compréhension :

FICHIER HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Activité et inactivité d'un visiteur</title>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="activite.js"></script>
</head>
<body onkeydown="activite_detectee = true; statut('actif');" onmousemove="activite_detectee = true; statut('actif');">
<h3>Bonjour et bienvenue, cher visiteur !</h3>
<p>Nous testons actuellement, et tout le long de votre présence sur cette page, votre activité et inactivité. Merci d'avoir bien accepté de participer à l'expérience.
Orka et son équipe.</p>
<p id="statut" style="color:#ff0000;">Vous êtes inactif.</p>
</body>
</html>

FICHIER activite.js

// On déclare et initialise les variables utilisée
var activite_detectee = false;
var intervalle = 100;
// On crée la fonction qui teste toutes les x secondes l'activité du visiteur via activite_detectee
function testerActivite() {
// On teste la variable activite_detectee
// Si une activité a été détectée [On réinitialise activite_detectee]
if(activite_detectee)
activite_detectee = false;
// Si aucune activité n'a été détectée [on actualise le statut du visiteur]
else
statut('inactif');
// On relance la fonction ce qui crée une boucle
setTimeout('testerActivite();', intervalle);
}
// On crée une fonction qui permet de mettre à jour le statut du visiteur
function statut(statut) {
// On initialise la variable bloc créée par souci de lisibilité
var bloc = document.getElementById('statut');
// On supprime l'ancien statut affiché
bloc.removeChild(bloc.firstChild);
// Suivant le statut, on change la couleur d'écriture
if(statut == 'actif')
bloc.style.color = '#00ff00'; // Vert
else if(statut == 'inactif')
bloc.style.color = '#ff0000'; // Rouge
// On affiche le nouveau statut
bloc.appendChild(document.createTextNode('Vous êtes ' + statut + '.'));
}
// On lance la fonction testerActivite() pour la première fois, au chargement de la page
setTimeout('testerActivite();', intervalle);

Et voilà ! Cela peut paraître un peu long mais c'est nécessaire pour que tout soit bien expliqué !

Et avant de passer à la deuxième (et dernière) section, un lien de test : je veux tester ce fichu code.

Calculer le temps d'inactivité

Un peu de réflexion

Nous avons bien avancé, mais il nous reste encore un petit bout de chemin à faire : il va falloir déterminer, si une inactivité est détectée, depuis combien de temps celle-ci dure. Une bonne préparation doit nous permettre de rédiger la fin du script en deux coups de cuillère à pot !

Il va bien évidemment falloir mettre en action une nouvelle variable contenant le temps depuis lequel dure l'inactivité. On peut l'appeller temps_inactivite avec pour valeur initiale zéro. L'important, c'est de savoir comment lui donner la bonne valeur au fur et à mesure que le temps passe.

Dès qu'une inactivité est détectée il faut, à chaque appel de la fonction testerActivite() et tant que l'inactivité persiste, mettre à jour la valeur de temps_inactivite. Dès qu'une activité reprend, on remet le compteur à zéro et on recommence...

Oui c'est bien beau tout ça, mais une question me turlupine... :-°

Comment la fonction testerActivite() peut-elle savoir si l'inactivité détectée est persistante ou nouvelle ?

En effet, pour que la fonction mette à jour la valeur de temps_inactivite, il faut qu'elle sache si l'inactivité a déjà été détectée auparavant ou non, et surtout, si elle est persistante, c'est à dire qu'aucune activité n'a été détectée entre temps.

Pour résoudre le problème, il va tout simplement encore falloir faire appel à une variable booléenne.

Supposons que l'on crée une variable avec pour nom inactivite_persistante. Lorsqu'une activité est détectée, on lui donne la valeur true et à chaque appel de testerActivite(), la fonction va savoir qu'il faut mettre à jour la valeur de temps_inactivite. Dès qu'une activité est détectée, on lui donne la valeur false et tout recommence.

Une fois tout ceci fait, et bien il suffit de rajouter un bout de code testant la valeur de temps_inactivite et réagir si elle dépasse un certain seuil (tu donnais l'exemple de 30 secondes). Et voilà, la boucle est bouclée...

Minute, minute... :colere2:

On parle depuis tout à l'heure de "mettre à jour la valeur de la variable", mais cela revient à faire quoi, au juste ? :colere2:

Ah oui, suis-je bête

J'ai oublié de préciser ce qu'il convenait de faire.

Et bien à chaque appel de fonction, il s'est passé un certain temps qui a pour valeur celle de la variable intervalle. Mettre à jour la variable temps_inactivite revient donc en fait à lui rajouter la valeur de intervalle.

Maintenant, on peut passer à la pratique

Mise en application

Tout (ou presque) a été expliqué ci-dessus, je propose donc directement le code suivant (la page HTML ne change pas) :

// On déclare et initialise les variables utilisée
var activite_detectee = false;
var intervalle = 100;
var temps_inactivite = 0;
var inactivite_persistante = true;
// On crée la fonction qui teste toutes les x secondes l'activité du visiteur via activite_detectee
function testerActivite() {
// On teste la variable activite_detectee
// Si une activité a été détectée [On réinitialise activite_detectee, temps_inactivite et inactivite_persistante]
if(activite_detectee) {
activite_detectee = false;
temps_inactivite = 0;
inactivite_persistante = false;
}
// Si aucune activité n'a été détectée [on actualise le statut du visiteur et on teste/met à jour la valeur du temps d'inactivité]
else {
statut('inactif');
// Si l'inactivite est persistante [on met à jour temps_inactivite]
if(inactivite_persistante) {
temps_inactivite += intervalle;
// Si le temps d'inactivite dépasse les 30 secondes
if(temps_inactivite >= 30000)
alert('Trente secondes d\'inactivité viennent de s\'écouler.');
}
// Si l'inactivite est nouvelle [on met à jour inactivite_persistante]
else
inactivite_persistante = true;
}
// On relance la fonction ce qui crée une boucle
setTimeout('testerActivite();', intervalle);
}
// On crée une fonction qui permet de mettre à jour le statut du visiteur
function statut(statut) {
// On initialise la variable bloc créée par souci de lisibilité
var bloc = document.getElementById('statut');
// On supprime l'ancien statut affiché
bloc.removeChild(bloc.firstChild);
// Suivant le statut, on change la couleur d'écriture
if(statut == 'actif')
bloc.style.color = '#00ff00'; // Vert
else if(statut == 'inactif')
bloc.style.color = '#ff0000'; // Rouge
// On affiche le nouveau statut
bloc.appendChild(document.createTextNode('Vous êtes ' + statut + '.'));
}
// On lance la fonction testerActivite() pour la première fois, au chargement de la page
setTimeout('testerActivite();', intervalle);

Et voilà enfin le code fonctionnel que tu désirais

Sans doute peux-tu comprendre maintenant les raisons qui m'ont poussé à prendre autant de temps dans mes explications et mon souci d'aborder les principes du code avant de le démarrer car celui-ci et loin d'être aussi facile que l'on pourrait l'imaginer.

En vérité, vu tel quel, il est difficilement compréhensible.
Comme pour la première section, voici un code (non expliqué mais commenté) qui permet de voir le temps d'inactivité qui s'écoule et qui certifie le bon fonctionnement du code :

FICHIER HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Activité et inactivité d'un visiteur</title>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="activite_final.js"></script>
</head>
<body onkeydown="activite_detectee = true; statut('actif');" onmousemove="activite_detectee = true; statut('actif');">
<h3>Bonjour et bienvenue, cher visiteur !</h3>
<p>Nous testons actuellement, et tout le long de votre présence sur cette page, votre activité et inactivité. Merci d'avoir bien accepté de participer à l'expérience.
Orka et son équipe.</p>
<p id="statut" style="color:#ff0000;">Vous êtes inactif depuis 0 secondes.</p>
</body>
</html>

FICHIER activite.js

// On déclare et initialise les variables utilisée
var activite_detectee = false;
var intervalle = 100;
var temps_inactivite = 0;
var inactivite_persistante = true;
// On crée la fonction qui teste toutes les x secondes l'activité du visiteur via activite_detectee
function testerActivite() {
// On teste la variable activite_detectee
// Si une activité a été détectée [On réinitialise activite_detectee, temps_inactivite et inactivite_persistante]
if(activite_detectee) {
activite_detectee = false;
temps_inactivite = 0;
inactivite_persistante = false;
}
// Si aucune activité n'a été détectée [on actualise le statut du visiteur et on teste/met à jour la valeur du temps d'inactivité]
else {
statut('inactif');
// Si l'inactivite est persistante [on met à jour temps_inactivite]
if(inactivite_persistante) {
temps_inactivite += intervalle;
// Si le temps d'inactivite dépasse les 30 secondes
if(temps_inactivite >= 30000)
alert('Trente secondes d\'inactivité viennent de s\'écouler.');
}
// Si l'inactivite est nouvelle [on met à jour inactivite_persistante]
else
inactivite_persistante = true;
}
// On relance la fonction ce qui crée une boucle
setTimeout('testerActivite();', intervalle);
}
// On crée une fonction qui permet de mettre à jour le statut du visiteur
function statut(statut) {
// On initialise la variable bloc créée par souci de lisibilité
var bloc = document.getElementById('statut');
// On supprime l'ancien statut affiché
bloc.removeChild(bloc.firstChild);
// Suivant le statut, on change la couleur d'écriture
if(statut == 'actif')
bloc.style.color = '#00ff00'; // Vert
else if(statut == 'inactif')
bloc.style.color = '#ff0000'; // Rouge
// On crée une variable statut_a_afficher [si il y a inactivité, on affiche le temps qui s'est écoulé depuis le début de l'inactivité]
if(statut == 'inactif') {
// On transforme le temps d'inactivité calculé en millisecondes en secondes
var temps_secondes = temps_inactivite / 1000;
var statut_a_afficher = statut + ' depuis ' + temps_secondes + ' secondes';
}
else
var statut_a_afficher = statut;
// On affiche le nouveau statut
bloc.appendChild(document.createTextNode('Vous êtes ' + statut_a_afficher + '.'));
}
// On lance la fonction testerActivite() pour la première fois, au chargement de la page
setTimeout('testerActivite();', intervalle);

Et voilààààààà

Un petit lien pour tester : que je suis pressé de voir ce que ça donne.

En espérant que mon aide t'aura satisfaite

orka

7 août 2007 à 18:47:23

Salut

Je voudrais pouvoir détecter l'inactivité d'un utilisateur en surveillant son clavier et la souris.

En gros, ouvrir une page parent au bout de 30 secondes d'inactivité...

C'est possible ? Oui, mais comment ?

Autant je me débrouille bien en PHP, autant je rame en JS

BkM

8 août 2007 à 3:35:46

Franksoft

8 août 2007 à 7:44:16

Je dois l'avoué, une réponse aussi complète est très rare, soit chanceux

Peut-être pourrais-tu en faire un tuto, BkM ?

8 août 2007 à 10:09:38

BkM, tu t'es laché là

Mais j'avoue que c'est TOP NICKEL !

Que dire de plus, sinon merci

Delirium à raison, tu devrais mettre tout ça dans un tuto, car c'est pas facile à trouver sur le net...

spookyed

8 août 2007 à 10:36:25

J'avoue c'est bluffant!!
Je savais pas que c'était possible d'avoir de réponses aussi précises et complète.
C'est un vrai tuto ta réponse en fait.Ca envie de se mettre au JS (car j'en suis encore a l'étape du php pour ma part :lol: