Kebanyakan masa anda tidak benar -benar peduli sama ada pengguna secara aktif terlibat atau tidak aktif sementara pada permohonan anda. Tidak aktif, makna, mungkin mereka bangun untuk mendapatkan minuman air, atau lebih mungkin, mengubah tab untuk melakukan sesuatu yang lain untuk sedikit. Terdapat situasi, walaupun, apabila menjejaki aktiviti pengguna dan mengesan tidak aktif mungkin berguna.

Mari kita fikirkan beberapa contoh apabila anda mungkin memerlukan fungsi itu:

• Masa Membaca Artikel Penjejakan
• Borang atau dokumen penjimatan automatik
• Permainan Jeda Auto
• Menyembunyikan kawalan pemain video
• Auto Logging Out pengguna atas alasan keselamatan

Saya baru -baru ini menemui ciri yang melibatkan contoh terakhir, pembalakan auto pengguna tidak aktif atas alasan keselamatan.

Mengapa kita perlu mengambil berat tentang logout auto?

Banyak aplikasi memberi pengguna akses kepada beberapa jumlah data peribadi mereka. Bergantung pada tujuan permohonan, jumlah dan nilai data itu mungkin berbeza. Ia hanya boleh menjadi nama pengguna, tetapi ia juga boleh menjadi data yang lebih sensitif, seperti rekod perubatan, rekod kewangan, dll.

Terdapat kemungkinan bahawa sesetengah pengguna mungkin lupa untuk log keluar dan meninggalkan sesi terbuka. Berapa kali ia berlaku kepada anda? Mungkin telefon anda tiba -tiba berdering, atau anda perlu pergi dengan serta -merta, meninggalkan penyemak imbas. Meninggalkan sesi pengguna terbuka berbahaya kerana orang lain boleh menggunakan sesi itu untuk mengekstrak data sensitif.

Salah satu cara untuk melawan isu ini melibatkan penjejakan jika pengguna telah berinteraksi dengan aplikasinya dalam tempoh tertentu, maka mencetuskan logout jika masa itu melebihi. Anda mungkin mahu menunjukkan popover, atau mungkin pemasa yang memberi amaran kepada pengguna bahawa logout akan berlaku. Atau anda hanya boleh logout segera apabila pengguna tidak aktif dikesan.

Melangkah satu tahap ke bawah, apa yang kita mahu lakukan ialah mengira masa yang diluluskan dari interaksi terakhir pengguna. Jika tempoh masa itu lebih panjang daripada ambang kami, kami mahu melepaskan pengendali tidak aktif kami. Jika pengguna melakukan tindakan sebelum ambang dilanggar, kami menetapkan semula kaunter dan mula mengira lagi.

Artikel ini akan menunjukkan bagaimana kita dapat melaksanakan logik penjejakan aktiviti seperti ini berdasarkan contoh ini.

Langkah 1: Melaksanakan logik penjejakan

Mari kita melaksanakan dua fungsi. Yang pertama akan bertanggungjawab untuk menetapkan semula pemasa kami setiap kali pengguna berinteraksi dengan aplikasinya, dan yang kedua akan mengendalikan situasi apabila pengguna menjadi tidak aktif:

• ResetUserActivityTimeout - Ini akan menjadi kaedah kami yang bertanggungjawab untuk membersihkan tamat masa yang sedia ada dan memulakan yang baru setiap kali pengguna berinteraksi dengan aplikasi.
• InactiveUserAction - Ini akan menjadi kaedah kami yang dipecat apabila masa tamat aktiviti pengguna habis.

 Biarkan userActivityTimeout = null;

fungsi resetuserActivityTimeout () {
  ClearTimeout (userActivityTimeout);
  userActivityTimeout = setTimeout (() => {
    inactiveUserAction ();
  }, Inactive_user_time_threshold);
}

fungsi inactiveUserAction () {
  // logik logout
}

Ok, jadi kami mempunyai kaedah yang bertanggungjawab untuk menjejaki aktiviti tetapi kami tidak menggunakannya di mana sahaja.

Langkah 2: Pengaktifan Penjejakan

Sekarang kita perlu melaksanakan kaedah yang bertanggungjawab untuk mengaktifkan penjejakan. Dalam kaedah tersebut, kami menambah pendengar acara yang akan memanggil kaedah ResetUserActivityTimeout kami apabila peristiwa itu dikesan. Anda boleh mendengar banyak peristiwa yang anda inginkan, tetapi untuk kesederhanaan, kami akan menyekat senarai itu kepada beberapa yang paling biasa.

 fungsi ActivateActivityTracker () {
  window.addeventListener ("mouseMove", resetUserActivityTimeOut);
  window.addeventListener ("tatal", resetUserActivityTimeOut);
  window.addeventListener ("keydown", resetUserActivityTimeOut);
  window.addeventListener ("saiz semula", resetUserActivityTimeOut);
}

Itu sahaja. Penjejakan pengguna kami sudah siap. Satu -satunya perkara yang perlu kita lakukan ialah memanggil ActivateActivityTracker pada beban halaman kami.

Kita boleh meninggalkannya seperti ini, tetapi jika anda melihat lebih dekat, terdapat isu prestasi yang serius dengan kod yang kami lakukan. Setiap kali pengguna berinteraksi dengan aplikasi, keseluruhan logik berjalan. Itu bagus, tetapi lihat lebih dekat. Terdapat beberapa jenis peristiwa yang dipecat sejumlah besar masa apabila pengguna berinteraksi dengan halaman, walaupun tidak perlu untuk penjejakan kami. Mari lihat acara Mousemove. Walaupun anda memindahkan tetikus anda hanya sentuhan, acara Mousemove akan dipecat berpuluh -puluh kali. Ini adalah pembunuh prestasi sebenar. Kita boleh menangani isu itu dengan memperkenalkan seorang pendeta yang akan membolehkan logik aktiviti pengguna dipecat hanya sekali setiap tempoh masa yang ditentukan.

Mari kita buat sekarang.

Langkah 3: Meningkatkan prestasi

Pertama, kita perlu menambah satu lagi pemboleh ubah yang akan merujuk kepada tamat masa throttler kita.

 Biarkan userActivityThrottLertimeout = null

Kemudian, kami membuat kaedah yang akan mencipta pendikit kami. Dalam kaedah itu, kita periksa sama ada tamat throttler sudah wujud, dan jika tidak, kita membuat satu yang akan membakar resetuseractivityTimeout selepas tempoh masa tertentu. Itulah tempoh yang semua aktiviti pengguna tidak akan mencetuskan logik penjejakan sekali lagi. Selepas itu, tamat tempoh throttler dibersihkan membolehkan interaksi seterusnya untuk menetapkan semula pelacak aktiviti.

 userActivityThrottler () {
  jika (! userActivityThrottLertimeout) {
    userActivityThrottLertimeout = setTimeout (() => {
      resetUserActivityTimeout ();

      clearTimeout (userActivityThrottLertimeout);
      userActivityThrottLertimeout = null;
    }, User_activity_throttler_time);
  }
}

Kami hanya mencipta kaedah baru yang harus dipecat pada interaksi pengguna, jadi kami perlu ingat untuk menukar pengendali acara dari resetuseractivityTimeout ke userActivityThrottler dalam logik Aktifkan kami.

 ActivateActivityTracker () {
  window.addeventListener ("mousemove", userActivityThrottler);
  // ...
}

Bonus: Mari kita revue!

Sekarang kita mempunyai logik penjejakan aktiviti kami yang dilaksanakan Mari lihat bagaimana boleh memindahkan logik itu ke aplikasi membina dengan Vue. Kami akan mendasarkan penjelasan mengenai contoh ini.

Mula -mula kita perlu memindahkan semua pembolehubah ke dalam data komponen kita, iaitu tempat di mana semua alat reaktif hidup.

 Eksport Lalai {
  data () {
    kembali {
      isinaktif: palsu,
      UserActivityThrottLertimeout: NULL,
      UserActivityTimeout: NULL
    };
  },
// ...

Kemudian kami memindahkan semua fungsi kami ke kaedah:

 // ...
  Kaedah: {
    ActivateActivityTracker () {...},
    resetuserActivityTimeout () {...},
    userActivityThrottler () {...},
    inActiveUserAction () {...}
  },
// ...

Oleh kerana kita menggunakan Vue dan sistem reaktif, kita boleh menggugurkan semua manipulasi DOM langsung i (iaitu Document.GetElementById ("App"). InnerHTML) dan bergantung kepada harta data isinaktif kita. Kami boleh mengakses harta data secara langsung dalam templat komponen kami seperti di bawah.

 <pemat>
  <dana>
    <p> pengguna tidak aktif = {{isInactive}} </p>
  
</dana></pemat>

Perkara terakhir yang perlu kita lakukan ialah mencari tempat yang betul untuk mengaktifkan logik penjejakan. Vue datang dengan cangkuk kitaran hayat komponen yang betul -betul apa yang kita perlukan - khususnya cangkuk Beforemount. Oleh itu, mari kita letakkan di sana.

 // ...
  beforemount () {
    this.ActivateActivityTracker ();
  },
// ...

Ada satu perkara lagi yang boleh kita lakukan. Oleh kerana kami menggunakan masa tamat dan mendaftarkan pendengar acara di tetingkap, ia sentiasa menjadi amalan yang baik untuk membersihkan sedikit selepas diri kita sendiri. Kita boleh melakukannya dalam cangkuk kitaran hayat yang lain, beforedestroy. Mari kita keluarkan semua pendengar yang kami berdaftar dan jelaskan semua tamat masa apabila kitaran hayat komponen berakhir.

 // ...
  boredestroy () {
    window.removeEventListener ("mouseMove", this.useractivityThrottler);
    window.removeEventListener ("tatal", this.useractivityThrottler);
    window.removeEventListener ("keydown", this.useractivityThrottler);
    window.removeEventListener ("Resize", this.useractivityThrottler);
  
    clearTimeout (this.userActivityTimeout);
    clearTimeout (this.useractivityThrottLertimeout);
  }
// ...

Itu bungkus!

Contoh ini menumpukan semata -mata untuk mengesan interaksi pengguna dengan aplikasi, bertindak balas terhadapnya dan menembak kaedah apabila tiada interaksi dikesan dalam tempoh masa tertentu. Saya mahukan contoh ini sebagai sejagat yang mungkin, jadi sebab itu saya meninggalkan pelaksanaan apa yang harus berlaku apabila pengguna yang tidak aktif ia dikesan kepada anda.

Saya harap anda akan mendapati penyelesaian ini berguna dalam projek anda!

Atas ialah kandungan terperinci Mengesan pengguna yang tidak aktif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!