Javascript Girl
  1. Javascript Girl
  3. Détection de l'inactivité des utilisateurs sur un navigateur – purement par javascript
Intereting Posts
Limites iFrame Javascript JQuery UI et Splitter Angular2 ngModel contre ngFor variables En ce qui concerne la sécurité côté client, CORS fait-il autre chose que subvertir la même politique d'origine? La fonction gère l'événement et le paramètre jQuery? Sombrement variable et test d'existence avant l'affectation en javascript Modification du format d'importation automatique dans WebStorm Détecter la première page avec jQuery? OrientDB Aucune instance de base de données trouvée dans l'erreur contextuelle? Comment utiliser le système de module node.js sur le client Comment utiliser vue-scroll La validation du formulaire Bootstrap ne fonctionne pas Limiter les types de fichiers affichés dans la fenêtre Parcourir Obtenir un élément à partir duquel la règle CSS est héritée AngularJS / UI Bootstrap – évanouissement de l'alerte sur supprimer

Détection de l'inactivité des utilisateurs sur un navigateur – purement par javascript

Dans la construction d'un moniteur, qui surveillerait toute activité sur le navigateur par l'utilisateur, comme cliquer sur un bouton ou en tapant sur une zone de texte (pas la souris survolant le document). Donc, s'il n'y a pas d'activité de l'utilisateur depuis longtemps, la session va expirer.

Nous devons le faire sans jquery ou quelque chose de tel. Je peux utiliser ajax. Le servlet java à l'autre extrémité est préférable.

Voici un mode JavaScript simple pour suivre l'inactivité et quand il atteint certaines limites, faites-en quelques mesures, vous pouvez modifier en conséquence et utiliser 

var IDLE_TIMEOUT = 60; //seconds var _idleSecondsCounter = 0; document.onclick = function() { _idleSecondsCounter = 0; }; document.onmousemove = function() { _idleSecondsCounter = 0; }; document.onkeypress = function() { _idleSecondsCounter = 0; }; window.setInterval(CheckIdleTime, 1000); function CheckIdleTime() { _idleSecondsCounter++; var oPanel = document.getElementById("SecondsUntilExpire"); if (oPanel) oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + ""; if (_idleSecondsCounter >= IDLE_TIMEOUT) { alert("Time expired!"); document.location.href = "logout.html"; } }

Ce code attendra 60 secondes avant d'afficher l'alerte et la redirection, et toute action "réinitialise" le compte – clic de la souris, déplacement de la souris ou appui sur la touche.

Il devrait être aussi navigateur possible que possible, et tout droit. Il prend également en charge le temps restant, si vous ajoutez un élément à votre page avec ID de SecondsUntilExpire.

Ref: Comment connaître le temps d'inactivité du navigateur?

Le problème avec l'approche que vous proposez est que la session émettra le temps, même si l'utilisateur déplace la souris ou saisit une entrée. Donc, si vous avez un délai d'attente de session réglé à 20 minutes, et que l'utilisateur continue de taper pendant 21 minutes, la session continuera d'expirer, même s'ils ont été "actifs". La seule chose qui empêchera la session de passer son temps est une nouvelle demande pour le serveur.

Solution 1: Laissez le serveur contrôler le délai d'attente de la session

Sauf si vous faites des requêtes Ajax en arrière-plan, cela va continuer à renouveler la session, vous pouvez simplement définir un délai de JavaScript lorsque la page est chargée et alerter l'utilisateur de cette manière. Sauf si vous faites d'autres requêtes au serveur, alors que l'utilisateur est sur votre page, il n'est pas nécessaire de le rendre difficile: 

 setTimeout(function () { alert("You've timed out baby!"); }, 1200000); // 20 minutes in millisec (modify to your session timeout)

Si l'utilisateur visite une autre page ou recharge la page, la session est renouvelée et la temporisation JavaScript est réinitialisée. Si l'utilisateur ne fait rien de tel, la session va expirer en même temps que l'utilisateur reçoit son alerte.

Solution 2: Laissez le client contrôler le délai d'attente de la session

Si vous souhaitez que le JavaScript soit entièrement contrôlé quant à la durée de la session, afin qu'il soit renouvelé chaque fois que l'utilisateur tape, déplace la souris ou autre chose, vous devrez continuer à faire des requêtes Ajax en arrière-plan vers votre serveur. La session est renouvelée. (Cela pourrait être une demande de mannequin vide, juste quelque chose qui frappe le serveur)

Vous devriez alors suivre toutes les actions que vous considérez comme "activité utilisateur" (AnhSirk suggère une manière dans sa réponse) et réinitialiser la temporisation chaque fois qu'un tel événement se produit. Si l'utilisateur est inactif pendant trop longtemps, vous devez alors faire une requête Ajax sur une page sur le serveur, ce qui invalide la session, puis vous pouvez alerter l'utilisateur de la fin de la session.