익스플로러 브라우저 close event 감지

2017-10-16
블로그 UI가 개편중입니다. 참고해주세요.

요즘 socket.io를 이용해서 웹 채팅 화면을 구현중이다. ie 요구사항은 9 버젼부터이다. ie9는 웹소켓을 사용할 수 없어서 폴링방식을 이용하여 통신하는데 아래과 같은 close 상황일 때에 문제가 발생하였다.

  • 탭 창이 닫힌 경우
  • F5를 눌러서 새로고침 한 경우
  • ctrl + r을 눌러서 새로고침 한 경우

당연히 폴링방식이기 때문에 위와 같은 상황에서 제대로 close가 되지않는다. 폴링 방식에서는 클라이언트가 죽었는지 살았는지 http를 통해 체크하기 때문에 즉시 close가 안된다.

일단은 아래와 같이 window.onunload 이벤트를 이용해서 작업하였다.

function close () {
    // socket.io close....
}

window.onunload = function () {
    close();
}

위와 같이 작성하고 테스트를 해보니 탭 닫기, 창 닫기인 경우에 socket close를 하고 정상 종료되었다. 하지만 F5, ctrl + r 를 눌렀을 때에는 여전히 close가 안되었는데 아래와 같이 꼼수로 해결하였다. (꼼수를 쓰지 않으려면 flash를 이용하는 방법이 있다.)

document.onkeydown = function ( event ) {
    if ( event.keyCode == 116  // F5
        || event.ctrlKey == true && (event.keyCode == 82) // ctrl + r
    ) {
        //접속 강제 종료
        close();
        // keyevent
        event.cancelBubble = true; 
        event.returnValue = false; 
        setTimeout(() => {
            window.location.reload();
        }, 100);
        return false;
    }
}
Prev

자바스크립트 화살표 함수 (array function)

array func은 아래와 같은 간단한 형태를 보면 매우 간단하나, 복잡한 구문을 보면 매우 어렵게 느껴진다. 쉬운 array func 부터 복잡한 array func까지 절차적으로 밟아보자. array func array func의 특징을 정리해보자면 아래와 같이 간략하게 정리할 수 있다. function에 비해 구문이 짧다....

typescript에서 ie9 window.console bug 수정하기

ie와의 지독한 싸움이 아직도 끝나지 않았다. 예전에 ie9에서 작업할 때 꼭 디버깅 창을 열어야 javascript 소스가 실행되는 현상이 있었다. 알고보니 ie9 버그로써 디버그 창을 열어야 console을 인식하고, 디버그 창을 열지 않으면 console이라는 문자열이 js에 찍히는 순간 javascript가 에러나서 종료되는 현상이였다....

nodejs cluster 프로세스에서 데이터 공유하기

nodejs의 cluster는 기본적으로 child_process의 기능을 바탕으로 만들어졌다. master process와 worker process는 프로세스간 통신할때 일반적으로 사용되는 IPC를 사용하여 서로 통신한다. 또한 cluster 모듈을 사용할 때 공식적으로 프로세스간에 공유하는 메모리는 없다. 따라서 같은 메모리 주소값을 참조해서 데이터를 사용하는 방법 역시 없다. 하지만...

webpack으로 nodejs 서버사이드 개발시 옵션

webpack으로 nodejs server-side를 작성하려고 하니까 모듈 exports나 기타 모듈 관계 생성이 잘 동작하지 않는다. webpack의 기본 옵션은 front-side로 맞춰져 있기 때문이다. server-side에서 바로 시작할 수 있게끔 webpack의 가장 중요한 옵션을 정리해본다. config file 수정 아래를 참고해서 3부분을 수정하면 바로 server-side용으로...