Contents

Base Tutorial

netfunnel.js include

Charset 정의를 통한 Include

netfunnel.js 는 UTF-8 인코딩으로 작성되었으며 EUC-KR 이나 CP949 등의 한글 인코딩 페이지에서는 대기창 정보가 깨져서 보일 수 있으므로 꼭 charset 정보를 추가해야 합니다.


디폴트 값 설정

호스트 및 포트

netfunnel.js 에서 넷퍼널 서버의 디폴트 호스트와 포트 정보를 설정할 수 있습니다.
이 값을 미리 설정해 놓으면 NetFunnel_init() 함수를 호출할 때마다 넷퍼넬 서버 정보를 입력해야 하는 번거로움을 피할 수 있습니다.

NetFunnel.TS_HOST = "nf2.netfunnel.co.kr"; // Default TS host
NetFunnel.TS_PORT = 80; // Default TS port

서비스 아이디 및 액션 아이디

netfunnel.js 에서 넷퍼넬 서버의 서비스 아이디와 액션 아이디 정보를 설정할 수 있습니다.
이 값을 미리 설정해 놓으면 NetFunnel_init() 함수를 호출할 때마다 넷퍼넬 서비스 아이디와 액션 아이디를 입력해야 하는 번거로움을 피할 수 있습니다.

NetFunnel.TS_SERVICE_ID = "service_1"; // Default TS Service id
NetFunnel.TS_ACTION_ID = "act1"; // Default TS Action id

넷퍼넬 우회 기능 (Client Side Bypass)

넷퍼넬 적용 후 시스템에 문제가 생기거나 네트워크에 문제가 발생한 경우 서비스 소스에 적용된 넷퍼넬 함수를 우회하도록 설정할 수 있습니다. "false" 값을 "true" 로 변경해주면 넷퍼넬 서버로 요청하지 않고 우회합니다.

NetFunnel.TS_BYPASS = false; // NetFUNNEL Routine Bypass [true|false]

하지만 Javascript의 경우 웹 브라우저에서 캐싱을 하기 때문에 서버에서 정보가 변경되어도 일정시간 동안 적용이 되지 않는 문제점이 있습니다. 이러한 문제점을 해결하고 변경 즉시 바로 적용되게 하기 위해서는 netfunnel.js Include 시 뒤에 Parameter를 붙여줌으로서 해결할 수 있습니다. Parameter 값은 Timestamp 나 날짜와 같이 unique한 값을 넣어주면 됩니다.

	

AutoComplete

리소스 사용 완료 요청을 자동으로 요청하도록 하는 옵션으로서 Default Host 및 Port 값이 정확히 설정되어 있어야만 정상적으로 동작합니다. "false" 로 설정된 값을 "true" 로 변경해 주면 netfunnel.js를 Include 하기만 해도 자동으로 리소스 사용 완료 요청(setComplete)이 전달되므로 좀 더 편리합니다.

NetFunnel.TS_AUTO_COMPLETE = false; // Auto setComplete [true|false]

사용자 데이터 입력

사용자 데이터는 넷퍼넬 서버에서 사용자의 아이디 체크(IP Block)시 사용하는 입력 데이터이며, 넷퍼넬 서버에 제공하는 데이터 종류로는 쿠키나 변수 형태로 넘겨 주면 됩니다. 아래 예시는 쿠키의 사용자 아이디 값을 사용자 데이터로 넷퍼넬 서버에 넘겨주는 방법입니다.

// Input UserData Key & Type(c=cookie,v=variable)
NetFunnel.TS_USER_DATA_KEYS = [{"key":"userID", "type":"c"}];

디폴트 값 Overriding

  • Overriding 가능한 변수값
    Key Type 설명 Default값
    host String TS Server Hostname TS_HOST
    port Number TS Server Port TS_PORT
    proto String TS Server Porotocol TS_PROTO
    query String TS Query String TS_QUERY_STR
    service id String TS Service ID TS_SERVICE_ID
    action id String TS Action ID TS_ACTION_ID
    max_ttl Number onContinued 이벤트 발생시 대기 ttl 값의 최대값 TS_MAX_TTL
    conn_timeout Number 접속 제한 시간 TS_CONN_TIMEOUT
    conn_retry Number 재 접속 횟수 TS_CONN_RETRY
    cookie_id String 쿠키 아이디 TS_COOKIE_ID
    cookie_time Number 쿠키 지속시간 TS_COOKIE_TIME
    cookie_domain String 쿠키 도메인 TS_COOKIE_DOMAIN
    showcnt_limit Number 화면에 보여줄 대기자수 제한 TS_SHOWCNT_LIMIT
    showtime_limit Number 화면에 보여줄 대기시간 제한 TS_SHOWTIME_LIMIT
    shownext_limit Number 화면에 보여줄 내 뒤의 대기자수 제한 TS_SHOWNEXT_LIMIT
    popup_top Number 대기창의 top 위치 지정 TS_POPUP_TOP
    popup_left Number 대기창의 left 위치 지정 TS_POPUP_LEFT
    skin_id String 대기창 스킨ID TS_SKIN_ID
    use_unfocus Boolean NetFUNNEL 호출 후 focus값 변경 TS_USE_FOCUS
    virt_wait Number 가상 대기시간 TS_VIRT_WAIT
    use_mobile_ui Boolean 대기창에 모바일UI 사용여부 TS_USE_MOBILE_UI
    mp_use Boolean MProtect기능 사용여부 MP_USE
    popup_target Window object 대기창이 출력될 window지정 TS_POPUP_TARGET
    use_frame_ block Boolean 여러 frame으로 구성된 페이지 에서 다른 Frame 비활성화 기능 사용여부 TS_USE_FRAME_BLOCK
    frame_block_list Object Array 비활성화 할 frame리스트 TS_FRAME_BLOCK_LIST
    use_pre_wait Boolean Pre Wait 사용여부 TS_USE_PRE_WAIT
    user_data String User Data -
    nwait_bypass Boolean 일정기간 대기인원 미변화시 Bypass 변경 TS_NWAIT_BYPASS
    max_nwait_count Number 대기인원 확인 주기 TS_MAX_NWAIT_COUNT
    block_msg String Server Block시 알림 문구 TS_BLOCK_MSG
    block_url String Server Block시 이동 되는 URL TS_BLOCK_URL
    ipblock_wait_count Number server IP Block 가상대기창 반복 횟수 TS_IPBLOCK_WAIT_COUNT
    ipblock_wait_time Number server IP Block 가상대기 시간 TS_IPBLOCK_WAIT_TIME
    config_use Boolean js에 설정된 ip, port 강제 사용여부 TS_CONFIG_USE
    popup_zindex Number 대기창의 z-index값을 설정한다. TS_POPUP_ZINDEX
  • Overriding 가능한 함수

    아래 함수의 "oConfig" 부분에 적용이 가능합니다.

    // 초기화 함수
    NetFunnel_init(oFlash,oConfig,oCallbacks);
    
    // 자원사용 요청 함수
    NetFunnel_Action(oConfig,form|url|func|oCallbacks);
    
    // 자원사용 함수
    NetFunnel_AliveNotice(oConfig,func);
    
    // 자원사용 완료 함수
    NetFunnel_Complete(oConfig,func);
    
  • Overriding 예

    포트를 443으로 변경하고 skin_id"new_type"으로 use_unfocus를 사용하지 않도록 디폴트 값을 Overriding하는 경우의 예입니다.

    NetFunnel_Action({port:443,skin_id:"new_type",use_unfocus:false},"index.html");	
    

넷퍼넬 적용

넷퍼넬 적용 위치

  • 사용자 동선을 볼 때 트래픽이 많이 몰리는 부분
  • 정해진 시간 내에 열리는 이벤트 성 서비스 부분
  • 처리되는 서비스 로직이 많고 무거워 서비스 시 동시에 적당량만 요청 및 처리해야 하는 부분
  • 넷퍼넬 Admin을 통하여 서비스 유입량 및 처리 시간을 체크하고 싶은 부분

넷퍼넬 적용 방법

넷퍼넬 적용은 NetFunnel_Action 함수를 이용해서 손쉽게 적용시킬 수 있습니다.
NetFunnel_Action 함수에 이동 할 주소를 입력해 주면 “< a >”태그 같은 단순 링크 방식에 적용됩니다.
아래 예시는 단순 링크 방식의 넷퍼넬 적용 방법입니다.

  • 기존 코드
  • 뉴스
  • 브리핑
  • 일정
  • 적용 후 코드
  • 뉴스
  • 브리핑
  • 일정
  • NetFunnel_Action 함수에 Form Object를 넣어 주면 넷퍼넬 적용과 동시에 Submit 처리까지 합니다. 아래 예시는 일반적인 로그인 서비스에 Form Submit일 경우의 넷퍼넬 적용 방법입니다.

  • 기존 코드
    	
    
    User ID :
    Password :
  • 적용 후 코드
    	
    
    User ID :
    Password :

    Form Submit 과 비슷한 형태이지만 넷퍼넬 대기 후 단순히 Form을 Submit 하지 않고 기타 다른 작업이 수행되는 경우에는 하나의 Function으로 분리해서 적용해야 합니다. 하나의 함수를 2개로 분리할 때의 기준은 입력인자 확인 등의 Javascript 내부에서 자체적으로 처리 가능한 부분이 끝난 이후입니다.

  • 기존 코드

    frm.already_done.value 는 submit() 하기 바로 전에 설정되어야 한다고 가정합니다.

    	
    
    User ID :
    Password :
  • 적용 후 코드
    	
    
    User ID :
    Password :

Callback 함수 재정의

NetFunnel_Action({},oCallbacks)의 oCallbacks 부분에 넷퍼넬 각각의 이벤트에 대한 Callback 함수를 재정의할 수 있습니다. Callback 재정의를 하지 않으면 기본적으로 success로 인식합니다.

  • 재정의 가능한 Callback
    Callback명 설명
    success 성공시 호출되는 함수
    continued 넷퍼넬 대기화면은 안나오지만 Background의 대기 루틴은 계속 수행중인 함수
    stop 대기창 중지 버튼 눌렀을 경우 실행될 함수
    error error가 발생시 실행될 함수
    bypass Server단에서 Bypass 처리 일때 호출되는 함수
    block Server단에서 Block 처리 일때 호출되는 함수
    ipblock Server IP Block 처리가 되었을때 호출되는 함수
    expressnumber express number에 등록이 되어 대기/차단 상황에서 Bypass 처리 호출되는 함수
  • 재정의 방법

    넷퍼넬 API에서 제공하는 재정의 가능한 Callback 값들의 인자들을 다음의 소스 예시에서 참고하세요.

    • 넷퍼넬_액션
      var debug = true;
      NetFunnel_Action({},{	
      	success:function(ev,ret){
      		var msg = "success:"
      			+",code="+ret.code
      			+",key="+ret.data.key
      			+",ip="+ret.data.ip
      			+",port="+ret.data.port
      			+",nnext="+ret.data.nnext
      			+",nwait="+ret.data.nwait
      			+",tps="+ret.data.tps
      			+",ttl="+ret.data.ttl;
      		debug && console.log(msg);
      	},
      	continued:function(ev,ret){
      		var msg = "continued:"
      			+",code="+ret.code
      			+",key="+ret.data.key
      			+",ip="+ret.data.ip
      			+",port="+ret.data.port
      			+",nnext="+ret.data.nnext
      			+",nwait="+ret.data.nwait
      			+",tps="+ret.data.tps
      			+",ttl="+ret.data.ttl;
      		debug && console.log(msg);			
      		return false;				// 리턴을 false로 넘길경우 넷퍼넬 기본 대기창은 뜨지 않는다.(모든 콜백 기본값은 True)
      	},
      	stop:function(ev,ret){
      		var msg = "stopped";
      		debug && console.log(msg);
      	},
      	error:function(ev,ret){
      		var msg = "error:"
      			+",code="+ret.code
      			+",msg="+ret.data.msg;
      		debug && console.log(msg);
      	},	
      	bypass:function(ev,ret){
      		var msg = "bypass:"
      			+",code="+ret.code
      			+",msg="+ret.data.msg;
      		debug && console.log(msg);			
      	},
      	block:function(ev,ret){
      		var msg = "block:"
      			+",code="+ret.code	
      			+",msg="+ret.data.msg;
      		debug && console.log(msg);	
      	},
      	ipblock:function(ev,ret){
      		var msg = "ipblock:"
      			+",code="+ret.code
      			+",msg="+ret.data.msg;
      		debug && console.log(msg);
      	},
      	expressnumber:function(ev,ret){
      		var msg = "expressnumber:"
      			+",code="+ret.code		
      			+",msg="+ret.data.msg;
      		debug && console.log(msg);
      	}		
      });		
      
    • 넷퍼넬_AliveNotice
      NetFunnel_AliveNotice({},{
      	success:function(ev,ret){
      		var msg = "success:"
      			+",code="+ret.code
      			+",key="+ret.data.key
      			+",ip="+ret.data.ip
      			+",port="+ret.data.port
      			+",nnext="+ret.data.nnext
      			+",nwait="+ret.data.nwait
      			+",tps="+ret.data.tps
      			+",ttl="+ret.data.ttl;
      		console.log(msg);
      	},
      	continued:function(ev,ret){
      		var msg = "continued:"
      			+",code="+ret.code	
      			+",key="+ret.data.key
      			+",ip="+ret.data.ip	
      			+",port="+ret.data.port
      			+",nnext="+ret.data.nnext
      			+",nwait="+ret.data.nwait
      			+",tps="+ret.data.tps
      			+",ttl="+ret.data.ttl;
      		console.log(msg);
      		return true;					// 리턴을 false로 넘길경우 넷퍼넬 기본 대기창은 뜨지 않는다.(모든 콜백 기본값은 True)
      	},			
      	stop:function(ev,ret){
      		var msg = "stopped";	
      		console.log(msg);
      	},	
      	error:function(ev,ret){	
      		var msg = "error:"
      			+",code="+ret.code
      			+",msg="+ret.data.msg;
      		console.log(msg);
      	},
      	bypass:function(ev,ret){
      		var msg = "bypass:"
      			+",code="+ret.code
      			+",msg="+ret.data.msg;
      		console.log(msg);
      	},
      	block:function(ev,ret){
      		var msg = "block:"
      			+",code="+ret.code
      			+",msg="+ret.data.msg;
      		console.log(msg);
      	},
      	ipblock:function(ev,ret){		
      		var msg = "ipblock:"
      			+",code="+ret.code
      			+",msg="+ret.data.msg;
      		console.log(msg);
      	},
      	expressnumber:function(ev,ret){
      		var msg = "expressnumber:"
      			+",code="+ret.code
      			+",msg="+ret.data.msg;
      		console.log(msg);
      	}
      });					
      
      NOTE

      사용자 정의 함수 또는 대기 화면을 설정할 수 있도록 Callback의 리턴 값에 따라 넷퍼넬 대기창을 끄고 켤 수 있도록 설정할 수 있습니다.

  • Callback 재정의 시 대기창 Skin 지정

    Callback 함수를 지정해서 쓸 때에는 각각 Callback에 맞추어 대기창 Skin을 지정해서 사용할 수 있습니다. Skin 지정은 NetFunnel.PopupSetup 함수를 이용하여 지정할 수 있고, 차단 시 Skin을 지정하여 사용하는 방법은 아래와 같습니다.

    Skin 설정 방법은 Skin을 참고하세요.
    • block_skin.js : 변경할 차단 Skin 파일
      if(typeof NetFunnel == "object"){
      NetFunnel.SkinUtil.add('block',{
      	htmlStr:'<div id="NetFunnel_Skin_Top" style="background-color:white;border:1px solid black; width:300px"> \
      		<div style="text-align:right;padding-top:5px;padding-right:5px;;text-align:center;"> \
      			<div style="text-align:center;font-size:9pt;color:black"><b><span style="color:black">차단 되었습니다!! </span> \
      			<br><br><br><span onclick="NetFunnel.popup_close()" style="cursor:pointer">[중지]</span> </b><br><br></div> \
      		</div>'
      	},'normal');
      }
      
    • 넷퍼넬 Skin 지정 호출 부분
      NetFunnel_Action({},{success:frm,block:function(ev,ret){NetFunnel.PopupSetup("alert", ret, "block");}});	
      

      위의 예시와 같이 NetFunnel.PopupSetup을 이용할 때 처음 지정 값에서 팝업 창의 type을 입력하고, 마지막 부분에 skin 아이디를 입력하세요.

    • 팝업창 type 종류
      type 종류 설명
      continue 일반 대기창 형식, 대기 기능을 수행한다.
      vcontinue 가상 대기창 형식, 가상대기창 설정값에 맞춰 가상대기 기능을 수행한다.
      alert alert 팝업창 형식, 대기나 가상대기 기능을 사용하지 않는 팝업을 표시해 준다.