Erkennen inaktiver Benutzer

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!