ng2 idle

Perkenalan

Modul untuk menanggapi pengguna yang menganggur dalam aplikasi sudut. Ini adalah penulisan ulang modul NG-Idle; Namun jika Anda menggunakan Angular 1, Anda harus menggunakan modul itu.

Pemelihara diinginkan

Komunitas sudut membutuhkan Anda! Saya mencari pengembang atau tim baru untuk mengambil alih pemeliharaan modul ini. Ini adalah tanggung jawab yang harus dipertimbangkan oleh kandidat yang berminat:

• Sekarang: Proses Beta Lengkap (item yang tersisa adalah untuk membuatnya kompatibel dengan SSR)
• Sekarang: Perbarui demo dan tambahkan dokumentasi API
• Berkelanjutan: Perbaikan bug
• Berlangsung: Rilis baru untuk versi baru Angular
• Nanti: refactor untuk menyederhanakan API dan mengurangi ukuran paket
• Nanti: Tambahkan dukungan untuk lingkungan non-browser?

Idealnya, seorang kandidat:

• Memiliki pengalaman membangun aplikasi di sudut 5+
• Adalah pengembang sudut aktif dan disetel ke dalam jadwal rilis sudut
• Menyukai open source dan komunitas sudut
• Berkomitmen untuk melepaskan paket modular dan ringan (mungkin)
• Memiliki pemahaman yang berfungsi tentang peristiwa DOM, pengatur waktu dan interval javascript, API penyimpanan web, dan cookie
• Memahami pengujian menggunakan karma dan melati, dan berkomitmen untuk persentase yang tinggi dari cakupan kode
• Memiliki pemahaman yang bekerja tentang panduan yang berkontribusi, bersedia menerima kontribusi dari orang lain, dan dapat menggunakan GitHub dan alat terkait secara efektif
• Memiliki waktu untuk triase dan menjawab tiket, atau mendelegasikan kepada orang lain
• Memiliki pemahaman dasar tentang NPM untuk merilis paket

Harap hubungi jika Anda tertarik!

Demo

Kunjungi https://grbsk.github.io/ng2-idle untuk melihat contoh sederhana dengan instruksi start cepat.

Awal yang cepat

@ng-idle dikirim melalui NPM. Anda dapat menginstal paket menggunakan perintah berikut untuk versi Angular yang didukung terbaru:

 npm install --save @ng-idle/core

Mengintegrasikan dan mengkonfigurasi paket ke dalam aplikasi Anda memerlukan beberapa langkah lagi. Silakan kunjungi @ng-idle-contoh untuk sumber dan instruksi tentang cara pergi.

Pertimbangan desain

Aplikasi utama modul ini adalah mendeteksi ketika pengguna menganggur. Ini juga dapat digunakan untuk memperingatkan pengguna tentang waktu tunggu yang akan datang, dan kemudian mengatur waktu mereka. Inti dari modul ini adalah layanan Idle yang melakukan yang terbaik - berdasarkan konfigurasi Anda - untuk mendeteksi ketika pengguna aktif atau menganggur dan meneruskan informasi itu ke aplikasi Anda sehingga dapat merespons dengan tepat.

Modularisasi

Fungsionalitas inti dapat ditemukan di paket @ng-idle/core melalui NPM.

Modul tambahan untuk memperluas fungsionalitas:

• @ng-idle/keepalive (lihat di bawah)

Integrasi Keepalive yang Dapat Diperpanjang

Dalam kasus penggunaan umum di mana digunakan untuk manajemen sesi, Anda mungkin perlu memberi sinyal ke server secara berkala bahwa pengguna masih masuk dan aktif. Jika Anda membutuhkan fungsi itu, @ng-idle dapat secara opsional diintegrasikan dengan @ng-idle/keepalive . @ng-idle akan menginstruksikan @ng-idle/keepalive ke ping saat pengguna aktif, dan berhenti begitu mereka pergi diam atau time out. Ketika pengguna melanjutkan aktivitas atau keadaan idle diatur ulang, itu akan segera terjadi dan kemudian melanjutkan ping. Harap dicatat bahwa integrasi KeepAlive adalah opsional, dan Anda harus menginstal dan mengonfigurasi @ng-idle/keepalive secara terpisah untuk mendapatkan fungsionalitas ini. Anda dapat mengimplementasikannya sendiri dengan memperluas KeepaliveSvc dan mengkonfigurasinya sebagai penyedia dalam aplikasi Anda untuk kelas KeepaliveSvc .

Interupsi yang dapat diperluas

Interupsi adalah sumber input apa pun (biasanya dari pengguna, tetapi bisa menjadi hal -hal seperti tab lain atau peristiwa) yang dapat digunakan untuk memberi sinyal untuk Idle bahwa jam tangan idle harus terganggu atau diatur ulang. Tidak seperti ng-idle , sumber-sumber ini tidak hardcoded; Anda dapat memperluas InterruptSource atau sumber bawaan apa pun yang sesuai dengan tujuan Anda. Fitur ini juga berguna untuk menangani noise input yang mungkin mengganggu kasus penggunaan khusus Anda. Ini juga dapat digunakan untuk menargetkan elemen spesifik pada halaman daripada seluruh dokumen atau jendela. Sumber -sumber berikut masuk ke dalam paket ini:

• InterruptSource (Abstrak): Jenis dasar yang dapat Anda terapkan untuk membuat sumber sendiri.
• EventTargetInterruptSource : objek apa pun yang mengimplementasikan EventTarget , seperti HTMLElement atau Window . Mengambil objek yang merupakan sumber dan string yang dibatasi ruang yang berisi peristiwa yang menyebabkan interupsi.
• DocumentInterruptSource : Mencari acara (dalam string ruang yang dibatasi) yang melembabkan ke document.documentElement ( html node).
• WindowInterruptSource : Mencari acara (dalam string string yang dibatasi) yang menggelembung ke Window .
• StorageInterruptSource : Hanya mencari acara Storage objek Window . Wajib untuk LocalStorageExpiry .

Catatan : Anda harus mengkonfigurasi sendiri sumber saat Anda menginisialisasi aplikasi. Secara default, tidak ada interupsi yang dikonfigurasi. Anda dapat menggunakan konfigurasi yang analog dengan default ng-idle dengan mengimpor DEFAULT_INTERRUPTSOURCES dan meneruskan referensi itu ke Idle.setInterrupts(DEFAULT_INTERRUPTSOURCES); .

Kedaluwarsa yang dapat diperluas

Fitur lain yang diporting dari ng-idle adalah kemampuan untuk menyimpan nilai kedaluwarsa di beberapa toko di mana banyak tab atau jendela yang menjalankan aplikasi yang sama dapat ditulis. Umumnya, toko ini adalah stor localStorage , tetapi bisa berupa cookie atau apa pun yang Anda inginkan. Tujuan dari kedaluwarsa ini dan toko kedaluwarsa ada dua: pertama, untuk mencegah jendela tidak menghitung waktu jika tidur atau berhenti lebih lama dari periode batas waktu yang dikonfigurasi. Kedua, dapat digunakan sehingga aktivitas dalam satu tab atau jendela mencegah tab atau jendela lain dalam aplikasi yang sama dari waktu keluar.

Secara default, tipe LocalStorageExpiry disediakan, yang hanya akan melacak kedaluwarsa di LocalStorage. Ini akan memenuhi semua tujuan yang disebutkan di atas. Jika Anda tidak ingin mendukung beberapa tab atau Windows, Anda dapat menggunakan SimpleExpiry . Dengan kata lain, SimpleExpiry tidak mengoordinasikan aktivitas terakhir antara tab atau Windows. Jika Anda ingin menyimpan nilai kedaluwarsa di toko lain, seperti cookie, Anda harus menggunakan atau membuat implementasi yang mendukungnya. Anda dapat membuat sendiri dengan memperluas IdleExpiry atau SimpleExpiry dan mengkonfigurasinya sebagai penyedia untuk kelas IdleExpiry .

Beberapa dukungan instance idle

Injektor ketergantungan dalam sudut mendukung strategi injeksi hierarkis. Ini memungkinkan Anda untuk membuat instance Idle pada ruang lingkup apa pun yang Anda butuhkan, dan mungkin ada lebih dari satu instance. Ini memungkinkan Anda untuk memiliki dua jam tangan terpisah, misalnya, pada dua elemen berbeda pada halaman.
Jika Anda menggunakan Expiry Default ( LocalStorageExpiry ), Anda perlu menentukan nama untuk setiap IDLE dengan Idle.setIdleName('yourIdleName') , jika tidak, kunci yang sama akan digunakan di LocalStorage dan fitur ini tidak akan berfungsi seperti yang diharapkan.

Contoh Penggunaan Kasus

Misalnya, pertimbangkan aplikasi email. Untuk meningkatkan keamanan, aplikasi mungkin ingin menentukan kapan pengguna tidak aktif dan keluar, memberi mereka kesempatan untuk memperpanjang sesi mereka jika mereka masih di komputer dan baru saja terganggu. Selain itu, untuk keamanan yang lebih baik, server dapat mengeluarkan sesi pengguna token keamanan yang berakhir setelah 5 menit tidak aktif. Pengguna dapat mengambil lebih banyak waktu dari itu untuk mengetik email mereka dan mengirimkannya. Akan membuat frustasi menemukan Anda dicatkan ketika Anda secara aktif menggunakan perangkat lunak!

@ng-idle/core dapat mendeteksi bahwa pengguna mengklik, mengetik, menyentuh, menggulir, dll. Dan tahu bahwa pengguna masih aktif. Ini dapat bekerja dengan @ng-idle/keepalive untuk melakukan ping server setiap beberapa menit agar tetap masuk. Dalam hal ini, selama pengguna melakukan sesuatu, mereka tetap masuk. Jika mereka melangkah menjauh dari komputer, kita dapat menyajikan dialog peringatan, dan kemudian setelah hitung mundur, keluarlah.

Rendering sisi server/universal

@NG-IDLE/Core menggunakan acara DOM pada berbagai target untuk mendeteksi aktivitas pengguna. Namun, ketika menggunakan rendering SSR/universal, aplikasi tidak selalu berjalan di browser dan dengan demikian mungkin tidak memiliki akses ke target DOM ini, menyebabkan aplikasi Anda berpotensi merusak atau melempar kesalahan karena mencoba menggunakan global browser seperti document dan window melalui @ng-idle.

EventTargetInterruptSource dan semua sumber interupsi yang berasal darinya (seperti DocumentInterruptSource , WindowInterruptSource , dan StorageInterruptSource ) dirancang untuk dengan malas menginisialisasi pendengar target acara untuk kompatibilitas dengan rendering sisi server. EventTargetInterruptSource akan mendeteksi apakah aplikasi Anda berjalan di browser atau di server dengan menggunakan isPlatformServer dan akan melewati inisialisasi pendengar target acara saat dijalankan di server.

Berkembang

Proyek ini dikembangkan menggunakan versi NodeJS yang ditemukan di file .nvmrc . Anda mungkin mengalami masalah menggunakan versi yang lebih lama. Coba NVM atau serupa untuk mengelola berbagai versi node secara bersamaan. Jika menggunakan NVM, Anda dapat menjalankan nvm install untuk mengunduh dan beralih ke versi yang benar.

Setelah Anda mengkloning repositori, instal semua paket menggunakan npm :

 npm install

Anda sekarang dapat membangun dan menjalankan semua tes sekali dengan cakupan.

 npm test

Anda juga dapat terus menjalankan tes saat Anda melakukan perubahan pada proyek dengan mengeksekusi npm run ng test <project name> atau ng test <project name> Jika Anda memiliki @angular/cli yang diinstal secara global.

 npm run ng test core
...
npm run ng test keepalive

Catatan: Keepalive tergantung pada inti. Jika Anda menjalankan tes kontinu di atas, Anda harus npm build atau npm run ng build core terlebih dahulu dan setelah membuat perubahan pada Core. Namun, npm test akan membangun semua modul dan menjalankan tes dalam satu tembakan.

Berkontribusi

Lihat Panduan yang Berkontribusi.