Détecter les utilisateurs inactifs

La plupart du temps, vous ne vous souciez pas vraiment de savoir si un utilisateur est activement engagé ou temporairement inactif sur votre application. Inactif, ce qui signifie, peut-être qu'ils se sont levés pour prendre un verre d'eau, ou plus probablement, ont changé des onglets pour faire autre chose. Il existe cependant des situations lorsque le suivi de l'activité utilisateur et la détection de l'inactive peuvent être utiles.

Réfléchissons à quelques exemples lorsque vous pourriez avoir besoin de cette fonctionnalité:

• Suivi du temps de lecture de l'article
• formulaire ou document d'économie automatique
• jeu de pause automatique
• cache des commandes de lecteur vidéo
• Déconnexion automatique des utilisateurs pour des raisons de sécurité

J'ai récemment rencontré une fonctionnalité qui impliquait ce dernier exemple, enregistrant automatiquement les utilisateurs inactifs pour des raisons de sécurité.

Pourquoi devrions-nous nous soucier de la déconnexion automatique?

De nombreuses applications permettent aux utilisateurs d'accéder à une certaine quantité de leurs données personnelles. Selon l'objectif de l'application, le montant et la valeur de ces données peuvent être différents. Ce n'est peut-être que le nom de l'utilisateur, mais il peut également s'agir de données plus sensibles, comme les dossiers médicaux, les dossiers financiers, etc.

Il y a des chances que certains utilisateurs oublient de se déconnecter et de laisser la session ouverte. Combien de fois vous est-il arrivé? Peut-être que votre téléphone a soudainement sonné, ou que vous deviez partir immédiatement, en laissant le navigateur. Laisser une session utilisateur ouverte est dangereux car quelqu'un d'autre peut utiliser cette session pour extraire des données sensibles.

Une façon de combattre ce problème implique le suivi si l'utilisateur a interagi avec l'application dans un certain délai, puis déclenche la déconnexion si ce temps est dépassé. Vous voudrez peut-être montrer un popover, ou peut-être une minuterie qui avertit l'utilisateur que la déconnexion est sur le point de se produire. Ou vous pouvez simplement vous connecter immédiatement lorsque l'utilisateur inactif est détecté.

En un même niveau, ce que nous voulons faire, c'est compter le temps qui est passé de la dernière interaction de l'utilisateur. Si cette période est plus longue que notre seuil, nous voulons licencier notre gestionnaire d'inactivité. Si l'utilisateur effectue une action avant que le seuil ne soit violé, nous réinitialisons le compteur et recommencez.

Cet article montrera comment nous pouvons implémenter une telle logique de suivi d'activité en fonction de cet exemple.

Étape 1: Implémentez la logique de suivi

Implémentons deux fonctions. Le premier sera responsable de la réinitialisation de notre minuterie à chaque fois que l'utilisateur interagit avec l'application, et le second gérera la situation lorsque l'utilisateur deviendra inactif:

• ResetUserActivityTimeout - Ce sera notre méthode chargée de nettoyer le délai d'expiration existant et d'en démarrer une nouvelle chaque fois que l'utilisateur interagit avec l'application.
• InactiveUseraction - Ce sera notre méthode qui sera licenciée lorsque le délai d'expiration de l'activité de l'utilisateur s'épuise.

 Laissez userActivityTimeout = null;

fonction resetUserActivityTimeout () {
  ClearTimeout (UserActivityTimeout);
  userActivityTimeout = setTimeout (() => {
    inactiveUseraction ();
  }, Inactive_user_time_threshold);
}

fonction inactiveUseraction () {
  // Logique de déconnexion
}

OK, nous avons donc des méthodes responsables du suivi de l'activité, mais nous ne les utilisons pas encore.

Étape 2: suivi l'activation

Nous devons maintenant implémenter des méthodes responsables de l'activation du suivi. Dans ces méthodes, nous ajoutons des auditeurs d'événements qui appellent notre méthode ResetUserActivityTimeout lorsque l'événement est détecté. Vous pouvez écouter autant d'événements que vous le souhaitez, mais pour la simplicité, nous limiterons cette liste à quelques-unes des plus courantes.

 fonction activateActivityTracker () {
  window.addeventListener ("MouseMove", ResetUserActivityTimeout);
  Window.AddeventListener ("Scroll", ResetUserActivityTimeout);
  window.addeventListener ("keydown", resetUserActivityTimeout);
  window.addeventListener ("redimensit", resetUserActivityTimeout);
}

C'est ça. Notre suivi des utilisateurs est prêt. La seule chose que nous devons faire est d'appeler l'activatActivityTracker sur notre chargement de page.

Nous pouvons le laisser comme ça, mais si vous regardez de plus près, il y a un grave problème de performances avec le code que nous venons de commander. Chaque fois que l'utilisateur interagit avec l'application, toute la logique s'exécute. C'est bien, mais regardez de plus près. Il existe certains types d'événements qui sont tirés énormément de fois où l'utilisateur interagit avec la page, même si ce n'est pas nécessaire pour notre suivi. Regardons l'événement Mousemove. Même si vous déplacez votre souris juste une touche, l'événement Mousemove sera licencié des dizaines de fois. C'est un véritable tueur de performance. Nous pouvons traiter ce problème en introduisant un lirte qui permettra à la logique d'activité de l'utilisateur une seule fois par période spécifiée.

Faisons ça maintenant.

Étape 3: Améliorer les performances

Tout d'abord, nous devons ajouter une autre variable qui conservera la référence à notre délai d'expiration de ThrotTler.

 Laissez userActivityThrotTlertimeout = null

Ensuite, nous créons une méthode qui créera notre grottler. Dans cette méthode, nous vérifions si le délai d'expiration de ThrotTler existe déjà, et si ce n'est pas le cas, nous en créons un qui tirera le resetUserActivityTimeout après une période de temps spécifique. C'est la période pour laquelle toute activité utilisateur ne déclenchera plus la logique de suivi. Après ce temps, le délai d'expiration de Throttler est effacé, permettant à l'interaction suivante de réinitialiser le tracker d'activité.

 userActivityThrotTler () {
  if (! userActivityThrotTlertimeout) {
    userActivityThrotTlertimeout = setTimeout (() => {
      resetUserActivityTimeout ();

      ClearTimeout (UserActivityThrotTLerTimeout);
      UserActivityThrotTLerTimeout = null;
    }, User_activity_throttler_time);
  }
}

Nous venons de créer une nouvelle méthode qui devrait être licenciée sur l'interaction de l'utilisateur, nous devons donc nous rappeler de changer les gestionnaires d'événements de ResetUserActivityTimeout à UserActivityThrottler dans notre logique activée.

 activateActivityTracker () {
  window.addeventListener ("MouseMove", UserActivityThrotTler);
  // ...
}

Bonus: Revuons-le!

Maintenant que nous avons notre logique de suivi d'activité implémentée, voyons comment peut déplacer cette logique vers une génération d'application avec Vue. Nous baserons l'explication de cet exemple.

Nous devons d'abord déplacer toutes les variables dans les données de notre composant, c'est l'endroit où vivent tous les accessoires réactifs.

 Exporter par défaut {
  données() {
    retour {
      isinactive: faux,
      userActivityThrotTlertimeout: null,
      UserActivityTimeout: null
    };
  },
// ...

Ensuite, nous déplaçons toutes nos fonctions vers des méthodes:

 // ...
  Méthodes: {
    activateActivityTracker () {...},
    resetUserActivityTimeout () {...},
    userActivityThrotTler () {...},
    inactiveUseraction () {...}
  },
// ...

Puisque nous utilisons VUE et son système réactif, nous pouvons supprimer toutes les manipulations DOM directes i. (C'est-à-dire document.getElementyId ("app"). InnerHTML) et dépendre de notre propriété de données isinactive. Nous pouvons accéder à la propriété de données directement dans le modèle de notre composant comme ci-dessous.

 <mpelate>
  <div>
    <p> L'utilisateur est inactif = {{isInactive}} </p>
  </div>
 template></mpelate>

La dernière chose que nous devons faire est de trouver un endroit approprié pour activer la logique de suivi. Vue est livré avec des crochets de cycle de vie des composants qui sont exactement ce dont nous avons besoin - en particulier le crochet BeforeMount. Alors mettons-le là.

 // ...
  beForMount () {
    this.activateActivityTracker ();
  },
// ...

Il y a encore une chose que nous pouvons faire. Étant donné que nous utilisons des délais d'attente et enregistrons des auditeurs d'événements sur la fenêtre, c'est toujours une bonne pratique de nettoyer un peu après nous-mêmes. Nous pouvons le faire dans un autre crochet de cycle de vie, Beforestroy. Supprimons tous les auditeurs que nous avons enregistrés et effacés tous les temps morts lorsque le cycle de vie du composant se termine.

 // ...
  beforestroy () {
    Window.RemoveEventListener ("MouseMove", this.UserActivityThrotTler);
    Window.RemoveEventListener ("Scroll", this.UserActivityThrotTler);
    Window.RemoveEventListener ("Keydown", this.UserActivityThrotTler);
    Window.RemoveEventListener ("redimensionner", this.UserActivityThrotTler);
  
    ClearTimeout (this.UserActivityTimeout);
    ClearTimeout (this.UserActivityThrotTLerTimeout);
  }
// ...

C'est une enveloppe!

Cet exemple se concentre uniquement sur la détection de l'interaction de l'utilisateur avec l'application, la réagissant et le licenciement d'une méthode lorsqu'aucune interaction n'est détectée dans un délai spécifique. Je voulais que cet exemple soit aussi universel que possible, c'est pourquoi je laisse l'implémentation de ce qui devrait se passer lorsqu'un utilisateur inactif qu'il vous a détecté.

J'espère que vous trouverez cette solution utile dans votre projet!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!