web-dev-qa-db-fra.com

Détection de l'inactivité des utilisateurs sur un navigateur - uniquement via javascript

Lors de la construction d'un moniteur, qui surveillerait toute activité sur le navigateur par l'utilisateur, comme le clic d'un bouton ou la frappe sur une zone de texte (pas la souris en survolant le document). Donc, s'il n'y a pas d'activité de l'utilisateur pendant une longue période, la session expirera.

Nous devons le faire sans jquery ou quoi que ce soit. Je peux utiliser ajax. Java servlet à l'autre extrémité est préférable.

javascriptjavascript-eventssession-timeout
25
Ranjan Sarma

Voici une méthode JavaScript pure pour suivre le temps d'inactivité et quand il atteint une certaine limite, faites une action, 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éinitialisera" le décompte - clic de souris, déplacement de la souris ou appui sur une touche.

Il doit être aussi croisé que possible et simple. Il prend également en charge l'affichage du temps restant, si vous ajoutez un élément à votre page avec l'ID de SecondsUntilExpire.

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

62
AnhSirk Dasarp

Le problème avec l'approche que vous suggérez est que la session expirera, même si l'utilisateur déplace la souris ou tape une entrée. Ainsi, si le délai d'expiration de la session est défini sur 20 minutes et que l'utilisateur continue de taper pendant 21 minutes, la session expire toujours, même si elle a été "active". La seule chose qui empêchera la session de se terminer est une nouvelle demande au serveur.

Solution 1: laissez le serveur contrôler le délai d'expiration de la session

À moins que vous ne fassiez des demandes Ajax en arrière-plan, cela continuera à renouveler la session, vous pouvez simplement définir un délai d'expiration JavaScript lorsque la page se charge et alerter l'utilisateur de cette façon. À moins que vous ne fassiez d'autres requêtes au serveur, alors que l'utilisateur est sur votre page, il n'est pas nécessaire de rendre la tâche 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 le minuteur JavaScript est réinitialisé. Si l'utilisateur ne fait rien de tel, la session expirera en même temps que l'utilisateur reçoit son alerte.

Solution 2: laissez le client contrôler le délai d'expiration de la session

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

Vous devrez ensuite suivre toutes les actions que vous considérez comme "l'activité de l'utilisateur" (AnhSirk suggère une façon dans sa réponse) et réinitialiser le délai d'expiration chaque fois qu'un tel événement se produit. Si l'utilisateur est inactif pendant trop longtemps, vous devrez alors effectuer une demande Ajax sur une page du serveur, qui invalide la session, puis vous pouvez alerter l'utilisateur que la session a expiré.

4
Christofer Eliasson