AJAX를 이용한 현재접속자 리스트

[프로그램 설명]

 

AJAX를 사용하여 접속자 리스트를 실시간으로 보여준다.
실행환경: 톰캣,JSP 컨테이너
최종수정일: 2006년 05월 17일

 

웹의 특성인 비연결성으로 인해 로그인하는 시점은 알 수 있으나
로그아웃의 시점은 사용자 이벤트가 없는 이상 알아내기 힘들다.
사용자가 로그아웃을 할때는 확실히 알아 낼 수 있고,
브라우져를 종료해도 자바스크립트 이벤트로 알아낼수 있다.
그러나 클라이언트의 비정상적인 종료(시스템다운, 네트워크 연결끊김, 정전)가 일어나면
서버에서 알길이 없다.

 

세션에서 Listener로 세션 종료시 이벤트가 발생하여 세션종료 시점을 알 수 있지만
세션이 종료되는 시점은 세션타임이 설정된 시간 만큼 기다려야 일어난다.
따라서 현실성이 없다.

 

어플리케이션(애플릿,엑티브엑스)을 사용하면 해결할 수 있다.
그러나 이것은 순수웹이 아닌 외부 프로그램이다.
확실한 프로그램이지만 귀찮다.

 

그래서 AJAX를 사용하여 주기적으로 서버와 통신하면서
일정한 시간동안 클라이언트에 응답이 없으면
사용자 리스트에서 제외 하는 방식으로 프로그램을 생각해 보았다.
사용자 측면에서는 알아차리지 못한다.(옛날 히든 프레임으로 할 때는 깜빡거렸다.)
부하문제가 있으나 application 객체만 컨트롤하고 DB접근등
부하될만한 요소는 피하게 구성 하였다.
 

 

[소스 설명]

소스는 모두 JSP로 만들었다.

1. access_user.jsp

AJAX로 3초 마다 ajax_user.jsp를 호출하도록 하였다.
브라우져 종료시 AJAX로 user_exit.jsp를 호출하도록 하였다.

 

다음은 코드의 일부분이다.

-----------------------------------------------------------------------------------

<script language="javascript">   
 function getXmlHttpRequest(){
  var xmlhttp = false;

  // Mozilla/Safari
  if (window.xmlhttpuest) {
    xmlhttp = new xmlhttpuest();
  }
  // IE
  else if (window.ActiveXObject) {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xmlhttp;
 }
 function access_list(){
  var xmlhttp = getXmlHttpRequest();
  var url = "./ajax_user.jsp";
  
  if(url){
   xmlhttp.open("GET", url, true);

   xmlhttp.onreadystatechange = function() {
    if(xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
      var respTxt = xmlhttp.responseText;
      document.getElementById("access_list").innerHTML = respTxt;
     } else {
      //alert("Error loading "+url+", "+xmlhttp.status+"("+xmlhttp.statusText+")");
     }
    }
   }
   xmlhttp.send(null);
  }
  setTimeout("access_list()", 3000);//3초 마다 서버와 통신함
  return false;
 }
 access_list(); //맨처음 실행 해준다.
 function include_exit(msg) {
  var xmlhttp = getXmlHttpRequest();
  var url = 'user_exit.jsp?msg='+msg;
  
  if(url){
   xmlhttp.open("GET", url, true);
   xmlhttp.onreadystatechange = function() {
    if(xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
      var respTxt = xmlhttp.responseText;
     } else {
      //alert("Error loading "+url+", "+xmlhttp.status+"("+xmlhttp.statusText+")");
     }
    }
   }
   xmlhttp.send(null);
  }
  return false;
 }
 function Exit() {
  if (self.screenTop > 9000) {
   // 브라우저종료
   include_exit('브라우저종료');
  } else {
   if(document.readyState == "complete") {
    // 새로고침
    include_exit('새로고침');
   } else if(document.readyState == "loading") {
    // 다른사이트이동
    include_exit('페이지이동');
   }
  }
 }
</script>

<script language="javascript" event="onunload" for="window">
    Exit();
</script>
-----------------------------------------------------------------------------------

 

 

2. ajax_user.jsp

ArrayList로 application 객체를 만들어 사용자 정보를 담는다.
호출되어질 때마다 접속시간이 5초넘어간 것은 제외시키고
사용자 정보를 application 객체에 새로 담는다.
이때 비교는 세션아이디로 체크한다.
application 객체 즉 접속자리스트를 만들어 리턴한다.

3. login_process.jsp

테스트를 위해 로그인를 간단히 구현하였다.

4. logout_process.jsp

로그아웃시 application 객체에서 해당접속자(세션아이디)를 제거한다.

5. user_exit.jsp

브라우져 종료시 application 객체에서 해당접속자(세션아이디)를 제거한다.

 

 

[소스 및 프로그램 데모]

http://www.dbtool.co.kr/examples/access_user/?topmenu=4&leftmenu=1