티스토리 뷰




 무엇보다 서버에서 세션이 종료되었을 경우 자동으로 "세션이 종료되었다" 하고 클라이언트에 알려주는게 최고이겠지만.. 그러려면 푸시 서버를 구성해야 한다.. HTML 5의 웹소켓 기술을 사용하더라도 사용자들이 모두 HTML5를 지원하는 브라우저를 사용하는것도 아니니 그냥 Ext JS의 DelayedTask를 이용해서 세션체크 기능을 구성해 보았다.


 대강 흐름은 세션체크 클래스는 싱글턴으로 구성하고, 최초 어플리케이션이 로딩될 때 딱 한번 초기화한다. 싱글턴으로 구성했기 때문에 차후 세션체크 클래스를 Ext.create() 로 생성하려 하다간 애러를 뱉어내게 된다.


 초기화된 세션체크 클래스는 세션을 종료하는 URL(로그아웃 URL)이 아닌 그 외의 모든 URL 호출이 있을경우 이벤트 리스닝을 통하여 실행되게 된다. 로그인이건, 게시판 리스트 요청이건 전부 포함된다.


 세션체크시간을 30분으로 지정해 놓을 시 어떠한 Ajax 요청이 완료된 후 다음 Ajax 요청이 30분간 없을 경우, 세션을 유지할것인지, 종료할 것인지 묻는 확인창이 출력되고 예를 클릭하면 세션 유지를 위한 Ajax 호출, 아니오를 클릭하면 세션 종료를 위한 Ajax호출을 하게된다.




  1   JS Source



 클래스이름은 SessionChecker로 정했다. 싱글턴으로 구성했기 때문에 어플리케이션이 로딩될 때 자동으로 이 클래스 또한 로딩된다.

그렇기 때문에 다른 클래스에서는 이 SessionChecker 클래스를 new 또는 Ext.create()를 사용하지 않고 바로 클래스이름을 통하여 클래스를 사용할 수 있다. 


 다른 클래스에서 SessionChecker 클래스를 사용할때 Myapp.SessionChecker.init() 같은 형식으로 사용하게 되는데, 이 이름도 긴거 같아  alternateClassName: 'SessionChecker' 설정을 통하여 짧게 만들었다. 이제 다른클래스에서는 그냥 SessionChecker.init() 같은 형식으로 사용하면 된다.





  2   Execute



 위에서 말했듯이 어플리케이션이 로딩될 때 딱 한번 이클래스는 초기화 된다. 그래서 app.js의 launch 함수에 초기화 함수를 넣어놓았다.

SessionCheker 클래스가 초기화 되고 이 SessionChecker 클래스가 실행되는 시점을 정의해 놓았다.


 Ajax요청에 이벤트를 걸어놓았는데 request가 완료될때마다 리스닝을 하게 된다. 그렇기 때문에 지금은 테스트용으로 Ajax요청을 보내는 구문을 작성해 놓았지만 나중에는 로그인이건 게시판이건 Ajax 요청이 있을때마다 이 이벤트를 리스닝 하게 될것이다.



'Javascript > Ext JS' 카테고리의 다른 글

Ext JS Code - 중복 탭 생성 방지  (0) 2014.11.04
Ext JS Grid plugin - SubTable  (0) 2014.11.03
Ext JS Save the data to the session storage  (0) 2014.10.27
Ext JS Chart  (0) 2014.10.03
Ext JS Loading data via a proxy  (0) 2014.09.26
댓글