關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

Page Keygen 防止使用者同時開啟多視窗瀏覽同一個頁面

Page Keygen 防止使用者同時開啟多視窗瀏覽同一個頁面

在現有維護的專案中,其中一個教學系統提供影片單元,

可以讓學生觀看教學影片,並且紀錄學生在各單元影片的學習進度及完成度。

卻發現有部分學生透過開啟多個瀏覽器,或者跨不同裝置來同時播放教學影片的方式快速累積完成度。

為了防止這種狀況,針對這個問題,設計了 Page keygen 的方式來進行處理:

Page keygen

首先,在系統資料庫新增 table 用來儲存 keygen, active, updated_time, created_time

  • keygen是系統針對每一個頁面請求,會產生的唯一uuid

  • active 是用來表示這組key是否有效,1表示有效,0表示失效

  • updated_time 主要用來記錄更新時間,若超過30分鐘則也代表失效

  • created_time 主要用於記錄首次建立時間

取得請求時,會依照以下幾個因素來進行判斷

(1) keygen是否存在

(2) 有效(active=1)

(3) 尚未過期 (updated_time <=30 )

防止開多分頁及跨裝置觀看

在學生訪問學習網頁時,

系統會偵測該學生 Key 是否存在,若已經存在,就會警示該學生不可同時開多分頁或跨裝置觀看影片

若不存在,則開始生成第一組 Key ,儲存於資料庫並且傳送到客戶端進行儲存

在客戶端瀏覽器,需要留意 Key 必須儲存於公用變數,而不能存在 cookie或localstorage

才能達成同瀏覽器且不同分頁,能成功產生不同得key

不重載頁面且超時的情況

在學習過程中,需要將學習紀錄傳給後端,記錄在資料庫中

這時,前端透過 Ajax 將 Page key 傳到後端,後端檢查此組 Keygen 是否與資料庫有效的 Key相同,

相同的話,就將紀錄學習狀況,並且更新該組key的updated_time

另外,若學生在同一個頁面,可能中途離開超過30分鐘,導致 key 超時失效

這時,不重載入的情況繼續學習時,仍會透過 Ajax 傳輸學習狀況到後端時,後端會知道目前所有key都失效,就會產生新key記錄於資料庫,再回傳給前端進行更新

若沒有 key,檢查目前無有效key存在,則同樣產生新 key紀錄在資料庫,再傳送給前端進行更新

離開頁面即註銷 Key

當學生觀看影片結束後,前往其他單元或關閉瀏覽器時

將會呼叫 page_close() 並且透過 Api 通知後端要將這組 key 註銷,設定為 disable

此外,三十分鐘有效時間,可避免在一些邊際情況

例如,網頁突然當掉,會引發資料庫中的key的 active狀態不會被disabled,會造成 key 被鎖死的問題

因此,透過 updated_time 30 分鐘的有效限制,就可防止這種問題,超過時間就會自動將 key 進行註銷


如果這篇文章對你有幫助,請在這裡點個讚



最新文章推薦