Meistens kümmern Sie sich nicht wirklich darum, ob ein Benutzer aktiv mit Ihrer Anwendung inaktiv oder vorübergehend inaktiv ist. Inaktiv, was bedeutet, dass sie vielleicht aufgestanden sind, um ein Drink Wasser oder wahrscheinlicher zu bekommen, um etwas anderes für ein bisschen zu tun. Es gibt jedoch Situationen, wenn die Verfolgung der Benutzeraktivit?t und Erkennung von Inaktivit?t praktisch sein kann.

Denken wir über einige Beispiele nach, wenn Sie diese Funktionalit?t m?glicherweise ben?tigen:

• Tracking -Artikel -Lesezeit
• automatisches Speichernformular oder Dokument
• Auto pauzieren Sie das Spiel
• Verstecken von Videoplayer -Steuerungen
• Automatische Anmeldung von Benutzern aus Sicherheitsgründen automatisch ausmeldet

Ich habe kürzlich auf eine Funktion gesto?en, die das letzte Beispiel aus Sicherheitsgründen automatisch inaktive Benutzer ausmeldet.

Warum sollten wir uns um das automatische Abmelden kümmern?

Viele Anwendungen geben Benutzern Zugriff auf einen Teil ihrer pers?nlichen Daten. Abh?ngig vom Zweck der Anwendung k?nnen der Betrag und der Wert dieser Daten unterschiedlich sein. Es ist m?glicherweise nur der Name des Benutzers, aber es kann auch sensiblere Daten wie Krankenakten, Finanzunterlagen usw. sein.

Es besteht die Chancen, dass einige Benutzer vergessen werden, sich anzumelden und die Sitzung offen zu lassen. Wie oft ist es dir passiert? Vielleicht klingelte Ihr Telefon pl?tzlich, oder Sie mussten sofort abreisen und den Browser einschalten. Eine Benutzersitzung offen zu lassen, ist gef?hrlich, da jemand anderes diese Sitzung verwenden kann, um sensible Daten zu extrahieren.

Eine M?glichkeit, dieses Problem zu bek?mpfen, besteht darin, die Verfolgung zu verfolgen, wenn der Benutzer innerhalb eines bestimmten Zeitraums mit der App interagiert hat, und dann das Abmelden auszul?sen, wenn diese Zeit überschritten wird. M?glicherweise m?chten Sie einen Popover oder einen Timer zeigen, der den Benutzer warnt, dass sich anmeldet, dass ein Anmeldung passt. Sie k?nnen sich einfach sofort anmelden, wenn der inaktive Benutzer erkannt wird.

Wenn wir ein Level nach unten gehen, wollen wir die Zeit, die aus der letzten Interaktion des Benutzers vergangen ist, z?hlen. Wenn dieser Zeitraum l?nger als unsere Schwelle ist, m?chten wir unseren Inaktivit?tsbehandlungsunternehmen abfeuern. Wenn der Benutzer eine Aktion ausführt, bevor der Schwellenwert verletzt wird, setzen wir den Z?hler zurück und beginnen erneut zu z?hlen.

Dieser Artikel zeigt, wie wir eine solche Aktivit?ts -Tracking -Logik basierend auf diesem Beispiel implementieren k?nnen.

Schritt 1: Implementierung der Tracking -Logik

Lassen Sie uns zwei Funktionen implementieren. Das erste ist dafür verantwortlich, unseren Timer jedes Mal zurückzusetzen, wenn der Benutzer mit der App interagiert, und der zweite wird die Situation behandeln, wenn der Benutzer inaktiv wird:

• ResetuserActivitytimeout - Dies ist unsere Methode, die für die L?schen des vorhandenen Zeitüberschreiters und die Start eines neuen bei jedem Interagieren des Benutzers mit der Anwendung verantwortlich ist.
• InactiveUSeraction - Dies ist unsere Methode, die abgefeuert wird, wenn die Timeout der Benutzeraktivit?t ausgeht.

 Lassen Sie Benutzeraktivit?tstimeout = null;

Funktion ResetuserActivitytimeout () {
  ClearTimeOut (Benutzeraktivit?tszeit);
  Benutzeraktivit?tstimeout = setTimeout (() => {
    InactiveUSeraction ();
  }, Inactive_user_time_threshold);
}

Funktion InactiveUSeraction () {
  // Logik abmelden
}

Ok, wir haben Methoden, die für die Verfolgung der Aktivit?t verantwortlich sind, aber wir verwenden sie noch nirgendwo.

Schritt 2: Aktivierung der Verfolgung

Jetzt müssen wir Methoden implementieren, die für die Aktivierung der Verfolgung verantwortlich sind. In diesen Methoden fügen wir Ereignish?rer hinzu, die unsere ResetuserActivityTimeout -Methode bezeichnen, wenn das Ereignis erkannt wird. Sie k?nnen so viele Ereignisse anh?ren, wie Sie m?chten, aber zum Einfachheit halber werden wir diese Liste auf einige der h?ufigsten beschr?nken.

 Funktion activateActivitytracker () {
  window.adDeVentListener ("Mousemove", ResetuserActivitytimeout);
  window.adDeVentListener ("Scroll", ResetuserActivitytimeout);
  window.adDeVentListener ("KeyDown", ResetuserActivityTimeout);
  window.adDeVentListener ("Gr??e", ResetuserActivitytimeout);
}

Das war's. Unsere Benutzerverfolgung ist fertig. Das einzige, was wir tun müssen, ist, den ActivateActivityTracker auf unserer Seitenladung aufzurufen.

Wir k?nnen es so lassen, aber wenn Sie genauer hinschauen, gibt es ein ernstes Leistungsproblem mit dem Code, den wir gerade begangen haben. Jedes Mal, wenn der Benutzer mit der App interagiert, wird die gesamte Logik ausgeführt. Das ist gut, aber schau genauer. Es gibt einige Arten von Ereignissen, die enorme Zeiten abgefeuert haben, wenn der Benutzer mit der Seite interagiert, auch wenn dies für unsere Verfolgung nicht erforderlich ist. Schauen wir uns das Mousemove -Event an. Selbst wenn Sie Ihre Maus nur einen Touch bewegen, wird das Mousemove -Ereignis Dutzende Male abgefeuert. Dies ist ein echter Performance -Killer. Wir k?nnen uns mit diesem Problem befassen, indem wir einen Throttler einführen, mit dem die Benutzeraktivit?tslogik nur einmal pro Zeitraum abgefeuert werden kann.

Lass uns das jetzt tun.

Schritt 3: Verbesserung der Leistung

Zun?chst müssen wir eine weitere Variable hinzufügen, die sich auf unser Throttler -Timeout bezieht.

 Lassen Sie die Benutzeraktivit?t Throttlertimeout = null

Anschlie?end erstellen wir eine Methode, die unseren Throttler erstellt. In dieser Methode überprüfen wir, ob das Timeout von Throttler bereits vorhanden ist, und wenn dies nicht der Fall ist, erstellen wir eine, die die ResetuserActivitytimeout nach bestimmter Zeitraum abfeuert. In diesem Zeitraum, in dem alle Benutzeraktivit?ten die Tracking -Logik nicht wieder ausl?sen. Nach dieser Zeit wird das Throttler -Timeout gel?scht, sodass die n?chste Interaktion den Aktivit?ts -Tracker zurücksetzt.

 Benutzeraktivit?tsthrottler () {
  if (! UserActivity Throttlertimeout) {
    UserActivityThrottlertimeout = setTimeout (() => {
      ResetuserActivitytimeout ();

      ClearTimeOut (Benutzeraktivit?tsthrottlertimeout);
      userActivityThrottlertimeout = null;
    }, User_activity_throttler_time);
  }
}

Wir haben gerade eine neue Methode erstellt, die auf die Benutzerinteraktion abgefeuert werden sollte. Daher müssen wir uns daran erinnern, die Ereignishandler von ResetuserActivitytimeout in unsere Aktivit?tslogik in Benutzeraktivit?tsthrottler zu ?ndern.

 ActivateActivityTracker () {
  window.adDeVentListener ("Mousemove", Benutzeraktivit?tsthrottler);
  // ...
}

Bonus: Lass uns es überarbeiten!

Nachdem wir unsere Aktivit?ts -Tracking -Logik implementiert haben, sehen wir sehen, wie diese Logik mit VUE zu einem Anwendungsaufbau verschoben werden kann. Wir werden die Erkl?rung auf dieses Beispiel stützen.

Zuerst müssen wir alle Variablen in die Daten unserer Komponente verschieben, dies ist der Ort, an dem alle reaktiven Requisiten leben.

 Standard ausführen {
  Data () {
    zurückkehren {
      isInactive: falsch,
      Benutzeraktivit?t Throttlertimeout: NULL,
      Benutzeraktivit?tszeit: NULL
    };
  },
// ...

Dann verschieben wir alle unsere Funktionen auf Methoden:

 // ...
  Methoden: {
    ActivateActivityTracker () {...},
    ResetuserActivitytimeout () {...},
    Benutzeraktivit?tsthrottler () {...},
    InactiveUSeraction () {...}
  },
// ...

Da wir Vue und das reaktive System verwenden, k?nnen wir alle direkten DOM -Manipulationen abgeben. (Dh document.getElementById ("App"). Innerhtml) und h?ngt von unserer isInaktiven Dateneigenschaft ab. Wir k?nnen auf die Dateneigenschaft direkt in der Vorlage unserer Komponente wie unten zugreifen.

 <semplate>
  <div>
    <p> Benutzer ist inaktiv = {{isinactive}} </p>
  </div>
</semplate>

Das Letzte, was wir tun müssen, ist, einen richtigen Ort zu finden, um die Tracking -Logik zu aktivieren. Vue wird mit Komponenten -Lebenszyklus -Hooks geliefert, die genau das sind, was wir brauchen - insbesondere der vordehnte Haken. Also lass es uns dort hinlegen.

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

Wir k?nnen noch etwas tun. Da wir Timeouts verwenden und Event -H?rer im Fenster registrieren, ist es immer eine gute Praxis, ein wenig nach uns selbst aufzur?umen. Wir k?nnen das in einem anderen Lebenszyklushaken tun, der entfachtete. Lassen Sie uns alle Zuh?rer entfernen, die wir registriert und alle Auszeitungen l?schen, wenn der Lebenszyklus der Komponente zu Ende geht.

 // ...
  befreit entforedestroy () {
    window.removeEventListener ("Mousemove", this.userActivityThrottler);
    window.removeEventListener ("scrollen", this.userActivityThrottler);
    window.removeEventListener ("keydown", this.userActivityThrottler);
    window.removeEventListener ("Gr??e", this.userActivityThrottler);
  
    Clearimeout (this.userActivitytimeout);
    ClearTimeout (this.userActivity throttlertimeout);
  }
// ...

Das ist ein Wrap!

Dieses Beispiel konzentriert sich nur darauf, die Benutzerinteraktion mit der Anwendung zu erkennen, auf sie zu reagieren und eine Methode zu entlassen, wenn keine Interaktion innerhalb eines bestimmten Zeitraums festgestellt wird. Ich wollte, dass dieses Beispiel so universell wie m?glich ist. Deshalb lasse ich die Implementierung dessen, was geschehen soll, wenn ein inaktiver Benutzer, den er Ihnen erkannt hat,.

Ich hoffe, Sie finden diese L?sung in Ihrem Projekt nützlich!

Das obige ist der detaillierte Inhalt vonErkennen inaktiver Benutzer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!