ng2 idle

介紹

一個用於響應Angular應用程序中空閒用戶的模塊。這是NG-IDLE模塊的重寫；但是，如果您使用的是Angular 1，則必須使用該模塊。

維護者想要

角度社區需要您！我正在尋找新的開發人員或團隊來接管該模塊的維護。這些是任何感興趣的候選人應考慮的責任：

• 現在：完整的beta過程（剩餘的主要項目是使其與SSR兼容）
• 現在：更新演示並添加API文檔
• 正在進行：錯誤修復
• 正在進行：新版本的Angular的新版本
• 稍後：重構以簡化API並降低包裝尺寸
• 稍後：添加對非瀏覽器環境的支持？

理想情況下，候選人：

• 在Angular 5+中具有構建應用的經驗
• 是一個活躍的角開發人員，並調整為角釋放時間表
• 喜歡開源和角度社區
• 致力於釋放模塊化和輕巧的軟件包
• 對DOM事件，JavaScript計時器和間隔，Web Storage API和Cookie有努力的了解
• 了解使用業力和茉莉花的測試，並致力於高度的代碼覆蓋率
• 對貢獻指南有努力的理解，願意接受他人的貢獻，並且可以有效地使用github和相關工具
• 有時間分類和回答票，或委派給他人
• 對釋放軟件包的NPM有基本的了解

如果您有興趣，請聯繫！

演示

請訪問https://grbsk.github.io/ng2-idle，以查看一個簡單的示例，並使用快速啟動說明。

快速開始

@ng-idle通過npm發貨。您可以使用以下命令安裝軟件包，以獲取最新支持的Angular：

 npm install --save @ng-idle/core

將軟件包集成和配置到您的應用程序中需要更多步驟。請訪問 @ng-idle-example，以獲取有關如何開始的來源和說明。

設計注意事項

該模塊的主要應用是檢測用戶何時閒置。它也可以用來警告用戶即將來臨的超時，然後將其計時。該模塊的核心是Idle服務，它可以根據您的配置來最佳，以檢測用戶何時處於活動狀態或閒置，並將該信息傳遞給您的應用程序，以便它可以適當響應。

模塊化

核心功能可以通過NPM在@ng-idle/core軟件包中找到。

擴展功能的其他模塊：

• @ng-idle/keepalive （見下文）

可擴展的飼養整合

在用於會話管理的常見用例中，您可能需要定期向服務器發出信號，表明用戶仍在登錄並處於活動狀態。如果需要該功能， @ng-idle可以選擇與@ng-idle/keepalive集成。 @ng-idle將在用戶處於活動狀態時指示@ng-idle/keepalive to ping，並在閒置或超時後停止。當用戶恢復活動或空閒狀態重置時，它將立即進行ping，然後恢復ping。請注意，KeepAlive集成是可選的，您必須單獨安裝和配置@ng-idle/keepalive才能獲得此功能。您可以通過擴展KeepaliveSvc並將其配置為KeepaliveSvc類應用程序中的提供商來實現自己的實現。

可擴展的中斷

中斷是任何輸入來源（通常來自用戶，但可能是其他選項卡或事件），可以用來發出信號以Idle表明閒置手錶應被中斷或重置。與ng-idle不同，這些來源不是硬編碼。您可以擴展InterruptSource或任何內置資源以適合您的目的。此功能對於處理可能困擾您特定用例的輸入噪聲也很有用。它也可以用於針對頁面上的特定元素，而不是整個文檔或窗口。以下資源內置在此軟件包中：

• InterruptSource （摘要）：您可以實現的基本類型來製作自己的來源。
• EventTargetInterruptSource ：任何實現EventTarget對象，例如HTMLElement或Window 。吸入源是源的對象和一個空間劃界字符串，該字符串包含導致中斷的事件。
• DocumentInterruptSource ：在document.documentElement （ html節點）中尋找事件（在空間劃界字符串中）。
• WindowInterruptSource ：在Window上冒泡的事件（在空間劃界字符串中）。
• StorageInterruptSource ：僅查找Window對象的Storage事件。 LocalStorageExpiry的強制性。

注意：初始化應用程序時必須自己配置源。默認情況下，未配置任何中斷。您可以通過導入DEFAULT_INTERRUPTSOURCES並將該引用傳遞給Idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);來使用類似於ng-idle默認值的配置； 。

可擴展的到期

ng-idle移植的另一個功能是能夠在某個商店中存儲有效值的功能，在該商店中，多個運行相同應用程序可以寫入的標籤或窗口可以寫入。通常，這家商店是localStorage ，但可以是cookie或您想要的任何東西。該到期和到期商店的目的是雙重的：首先，防止窗口是否睡覺或停頓時間不超過所配置的超時期。其次，可以使用它，以便在一個選項卡中或窗口中的活動防止同一應用程序中的其他選項卡或窗口的計時。

默認情況下，提供了LocalStorageExpiry類型，該類型只會跟踪LocalStorage中的到期。它將滿足上述所有目的。如果您不想支持多個標籤或窗口，則可以使用SimpleExpiry 。換句話說， SimpleExpiry不會協調選項卡或Windows之間的最後一個活動。如果要將到期值存儲在另一家商店（例如cookie）中，則需要使用或創建支持該的實現。您可以通過擴展IdleExpiry或SimpleExpiry創建自己的創建，並將其配置為IdleExpiry類的提供商。

多個空閒實例支持

角度的依賴性注射器支持分層注入策略。這使您可以在所需的任何範圍內創建一個Idle的實例，並且可以有一個以上的實例。這使您可以在頁面上的兩個不同元素上擁有兩個單獨的手錶。
如果您使用默認有效期（ LocalStorageExpiry ），則需要使用Idle.setIdleName('yourIdleName')定義每個空閒的名稱，否則在LocalStorage中將使用相同的鍵，並且此功能將無法按預期工作。

示例用例

例如，考慮電子郵件應用程序。為了提高安全性，該應用程序可能希望確定用戶何時不活動並將其註銷，從而使他們有機會在他們仍在計算機上並分散注意力的情況下擴展了會話。此外，為了更好的安全性，服務器可能會發布用戶會話的安全令牌，該標記在不活動5分鐘後到期。用戶可能需要花費更多的時間來輸入他們的電子郵件並發送。當您積極使用該軟件時，發現您已被登錄會令人沮喪！

@ng-idle/core可以檢測到用戶正在單擊，鍵入，觸摸，滾動等，並且知道用戶仍然處於活動狀態。它可以與@ng-idle/keepalive一起使用每隔幾分鐘的服務器來ping服務器，以使它們登錄。在這種情況下，只要用戶正在做某事，他們就會登錄。如果它們遠離計算機，我們可以提出警告對話框，然後在倒計時後列出它們。

服務器端渲染/通用

@ng-idle/core使用各種目標上的DOM事件來檢測用戶活動。但是，當使用SSR/Universal渲染時，該應用程序並不總是在瀏覽器中運行，因此可能無法訪問這些DOM目標，從而導致您的應用程序可能會崩潰或投擲錯誤，因為它試圖使用 @ng-idle的document和窗口，例如文檔和window 。

EventTargetInterruptSource和所有從其衍生的中斷源（例如DocumentInterruptSource ， WindowInterruptSource和StorageInterruptSource ）旨在懶惰地初始化事件目標偵聽器，以兼容服務器端渲染。 EventTargetInterruptSource將通過使用isPlatformServer檢測您的應用程序是在瀏覽器中還是在服務器上運行，並在服務器上運行時跳過事件目標偵聽器的初始化。

發展

該項目是使用.nvmrc文件中的Nodejs版本開發的。您可能會使用較舊版本遇到問題。嘗試NVM或類似於同時管理不同版本的節點。如果使用NVM，則可以執行nvm install以下載並切換到正確的版本。

克隆存儲庫後，請使用npm安裝所有軟件包：

 npm install

現在，您可以在覆蓋範圍內構建並運行所有測試。

 npm test

如果您在全球安裝了@angular/cli則可以通過執行npm run ng test <project name>或ng test <project name>在更改項目時連續運行測試。

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

注意：保存取決於核心。如果您正在運行上述連續測試，則需要首先和更改核心後的npm build或npm run ng build core Core。但是， npm test將構建所有模塊，並一擊進行測試。

貢獻

請參閱貢獻指南。