Aplikacje internetowe pojawiają się w dzisiejszych czasach coraz częściej. Nie są to już proste strony w edycją w stylu CRUD z kilkoma polami edycyjnymi na krzyż. Często formularze bywają złożone i wypełnienie ich użytkownikowi zajmuje dużo czasu. Czy zdarzyło Ci się, developerze, że użytkownicy Twojego systemu byli wylogowywani z niego po 15 minutach “nieaktywności”? Oczywiście przez cały ten czas siedzieli przy komputerze, pisali na klawiaturze i używali myszy w Twojej aplikacji. Czy tak powinny działać aplikacje?!?
Otóż oczywiście, że NIE! A rozwiązanie jest bardzo proste. Wystarczy napisać kawałek inteligentnego skryptu który zabezpieczy nas przed taką nieprofesjonalnością.
Skrypt taki powinien:
- rejestrować zdarzenie poruszenia myszy lub wciśnięcia klawisza
- wysyłać żądanie do serwera pod dowolną stronę z obsługą sesji (powinna się ona szybko generować), na przykład w Zend Framework:
public function preserveSession() { $this->_helper->layout->disableLayout(); $this->_helper->viewRenderer->setNoRender(); }
- odpiąć zdarzenia aby nie obciążać przeglądarki
- ustawić timeout, który przywróci podpięcie zdarzeń
Poniżej zamieściłem skrypt który wykonuje takie właśnie czynności (wymaga do działania jQuery >= 1.4):
pl = window.pl || {}; pl.mediovski = pl.mediovski || {}; pl.mediovski.technology = pl.mediovski.technology || {}; pl.mediovski.technology.FormSessionHolder = function(parameters) { parameters = parameters || {}; var defaultSettings = { url: '/', timeout: 60 }; var settings = jQuery.extend(defaultSettings, parameters); var timeout = null; var actionEventHander = function(event) { jQuery.ajax({ url: settings.url }); jQuery(document).unbind('mousemove.session-holder'); jQuery(document).unbind('keyup.session-holder'); timeout = setTimeout(function() { jQuery(document).bind('mousemove.session-holder', actionEventHander); jQuery(document).bind('keyup.session-holder', actionEventHander); clearTimeout(timeout); }, settings.timeout * 1000); }; actionEventHander(); };
Aby go uruchomić należy załączyć skrypt jako bibliotekę w nagłówku HTML oraz dopisać w dowolnym miejscu poniżej, inicjując obsługę np.:
new pl.mediovski.technology.FormSessionHolder({ timeout: 60, url: '/preserve-session' });
,gdzie:
- parametr
timeoutoznacza interwał co jaki czas mają następować odwołania do bramki (podane w sekundach, domyślnie: 60) - parametr
urloznacza adres do bramki utrzymującej sesję (domyślnie: ‘/’)
Oba parametry są opcjonalne.
Efekt użycia? W momencie gdy użytkownik używa aplikacji, co podany interwał czasu następuje odwołanie do serwera, które powinno nas zabezpieczyć przed wygaśnięciem sesji. Jeżeli użytkownik odejdzie od komputera i nie porusza myszą ani nie pisze na klawiaturze, sesja wygaśnie normalnie. Jest to bardzo prosty trik, który jednakże w znacznym stopniu zmniejsza dyskomfort używania web aplikacji. Nigdy więcej pisania artykułów w Wordzie i kopiowania ich do CMS’a! 
Biblioteka do ściągnięcia: jquery.session-holder.js
Comment by piecioshka — 17 August 2011 @ 7:08 PM
Hehe, pamiętam jak przy jednym takim dużym projekcie z naszym wspólnym kolegą w panelu administracyjnym zastosowaliście podaną technikę
Pomysł jest ciekawy i bardzo usability friendly. Na pewno targetem są tutaj panele administracyjne, ale i nie tylko, długie formularze również.
Ale należy zapamiętać że nie zawsze ma to swoje zastosowanie. Przykładem może być czasowa ważność , np. konkurs na wycieczkę na Woodstock
Comment by krzysztof.kwiatkowski — 24 August 2011 @ 3:18 AM
Hmmm… w jakim celu w wywołaniu funkcji użyto operatora “new”, skoro tworzony obiekt jest pusty/bezużyteczny?
Comment by piecioshka — 5 September 2011 @ 5:02 PM
@krzysztof.kwiatkowski – no widzi, tak Tylko Ci się wydaje że jest nie potrzebne użycie operatora “new”. Jeśli znasz programowanie obiektowe bardzo łatwo dostrzeżesz że Krzysiek S. skorzystał ze specjalnej metody jaką jest konstruktor obiektu. Funkcja wewnętrzna “actionEventHander” która jest zarazem inicjalizatorem obiektu stworzonego poprzez użycie operatora “new”
Pingback by Własna biblioteka JavaScript ( cross-platform ) | blog.piecioshka.pl — 6 September 2011 @ 1:47 PM
[...] Przykładem niech będzie wpis Krzyśka Suszyńskiego na blogu technologicznym jego firmy Mediowski – artykuł: Sesja, a aktywność użytkownika. [...]
Comment by krzysztof.kwiatkowski — 6 September 2011 @ 11:24 PM
@piecioshka – jeśli znasz specyfikę OOP w JS, to wiesz, że ten kod nie ma takiego sensu, jaki mu przypisujesz. Funkcja jest użyta jako konstruktor, ale nic z tego nie wynika, bo wewnątrz funkcji autor z tego zupełnie nie korzysta oraz ignoruje stworzony nowy (pusty i bezużyteczny) obiekt. Jeśli funkcja byłaby wywołana normalnie, działałaby tak samo — nie wierzysz: sprawdź (np. przypisz to co zwraca new pl.mediovski.technology.FormSessionHolder() pod zmienną i ją przelustruj albo wywołaj bez “new”)
New zmienia kontekst (wiąże this z nowo tworzonym obiektem oraz łaczy ten obiekt z własnością prototype funkcji konstruktora) wywołania, no i trochę myli programistów “przychodzacych” z innych języków
“Funkcja wewnętrzna “actionEventHander” która jest zarazem inicjalizatorem obiektu stworzonego poprzez użycie operatora “new”” — to zdanie wprowadza w błąd. Funkcja wewnętrzna formuje domknięcie i używa zmiennych lokalych funkcji przypisanej do FormSessionHolder. Nic poza tym. Żadnej inicjalizacji obiektu. Lekki przerost formy nad treścią z tym “new” — dowiodłem tego?
Generalnie samo rozwiązanie jest fajne.
Comment by krzysztof.kwiatkowski — 7 September 2011 @ 10:27 PM
Przyszedł mi do głowy jeszcze inny wątek: konstruktor nie powinien mieć “skutków ubocznych”. JSLint klasyfikuje użycie ‘new’ bez wykonania przypisania jako błąd i komunikuje: “Do not use ‘new’ for side effects.” — i ma rację.