코멧(Comet) #1 – 웹 페이지를 실시간으로 업데이트하는 방법

코멧(Comet)이란?

웹 페이지가 다시 로드되지 않고도 실시간으로 변동사항을 반영해 변화하게 하려면 어떻게 해야할까요. 이런 고민들은 의외로 많은 곳에서 만나게 됩니다. 웹에서 실시간 모니터링 도구를 만들어야 한다던가, 스포츠 실황중계처럼 매우 짧은 시간간격으로 변화하는 상황을 사용자에게 보여주어야만 하는 서비스를 만든다던가 할 때, 우리는 이와 같은 고민에 빠지게 됩니다. 함께 접속한 사용자들이 작성한 글을 거의 실시간에 가깝게 다른 사용자들에게 보여주어야만 하는 채팅 서비스에서도 물론 같은 고민에 직면할 것입니다.

만약에 서버가 모니터링하고 있다가 그 상태를 수시로 클라이언트 측에 전달할 수 있다면, 특별히 고민할 이유가 없을 것입니다. 이런 방식을 서버 푸시(Server Push)라고 부릅니다. 그러나 불행히도 웹에서 사용하는 HTTP로는 서버 푸시를 구현할 수 없습니다. HTTP는 기본적으로 클라이언트(웹 브라우저)가 서버에 요청(Request)을 하면, 서버가 그에 대해 응답(Response)을 한 후에 연결을 끊습니다. HTTP에서는 클라이언트가 먼저 요청을 하지 않는 이상, 서버는 결코 먼저 움직일 수 없는 것이지요.

하지만 궁하면 통하는 법! 이 문제를 해결하기 위해서 전세계의 많은 개발자들이 만들어놓은, 약간은 편법처럼 느껴지는 방법들이 있습니다. 이러한 방법을 묶어서 코멧(Comet)이라고 합니다.

 

정말로 실시간인가?

코멧에는 사실 여러 가지 기법들이 있는데, 이들도 결국은 웹 상에서 작동하는 기법들이기 때문에 모두 요청을 하면 응답 후에 연결을 끊는 HTTP를 이용합니다. 따라서 이 기법들 중에 어느 것도 완벽하게 실시간(real-time)으로 작동하는 것은 아닙니다. 사실 코멧은 짧은 시간 간격으로 웹 페이지를 업데이트하는 것에 불과합니다.

하지만 그 시간 간격이 사용자에게 불편을 주지 않을 정도로 짧아진다면, 실제 서비스에는 큰 문제 없습니다. 또한 어떤 기법들은 거의 실시간에 가깝게 보일 정도로 짧은 시간 간격에 업데이트가 되도록 개발할 수도 있습니다. 때문에 코멧을 이야기할 때에는, 보통 실시간으로 간주하고 이야기하는 경우가 많습니다.

 

코멧의 종류

앞서 소개한 바와 같이 코멧은 어떤 한가지 기법을 가리키는 말이 아니라, 여러 가지 방법들을 묶어서 부르는 이름입니다. 잘 알려진 대표적인 방법으로는 4가지가 있습니다.

첫 번째는 Ajax 폴링(Ajax Polling)이라고 하는 방법입니다. 이것은 Ajax로 상태를 가져와 화면을 업데이트하는 자바스크립트 함수를 작성하고, setInterval()로 일정 시간마다 이 함수를 호출하는 방법입니다. 설명 만으로도 감잡으신 분들이 있을 정도로 간단한 방법인데요, 이 시리즈의 2편에서 살펴볼 것입니다.

두 번째는 숨겨진 아이프레임(Hidden iframe)이라는 방법입니다. 이름 그대로 CSS 등을 이용해 보이지 않게 한 <iframe> 태그를 만들어놓고, 이 태그가 임베디드하는 파일이 연결을 끊지 않고 계속 작동하면서 화면을 업데이트하는 스크립트를 실행하게 하는 방법입니다.

세 번째는 Ajax를 이용한 롱 폴링(Long Polling by Ajax)입니다. Ajax로 호출하는 파일이 반복문을 돌며 대기하고 있다가, 화면을 업데이트 해야할 상황이 되면 비로소 화면을 업데이트 할 수 있도록 데이터를 출력하고 Ajax를 마치는 방법입니다. 화면이 업데이트되고 나면 다시 동일한 파일을 Ajax로 호출하여 같은 과정을 반복하게 됩니다. 이 방법에 관하여서는 3편에서 다룰 예정입니다.

네 번째는 스크립트 태그를 이용한 롱 폴링(Long Polling by Script Tag)이라고 하는 방법입니다. 이것은 <script> 태그를 하나 만들고, 이 <script> 태그가 임베디드 하는 파일이 화면을 업데이트하는 스크립트를 실행한 후, 다시 자신을 임베디드하는 <script> 태그를 만드는 방법입니다. 그 필요성과 구체적인 방법을 4편에서 소개하도록 하겠습니다.

 

WebSocket API와 코멧의 미래

하지만 코멧 역시도 결국은 편법에 가까운 방법일 뿐입니다. 때문에 HTML5에서는 서버 푸시를 구현할 수 있도록 WebSocket API라는 새로운 기술이 도입될 예정입니다. WebSocket을 모든 브라우저에서 사용할 수 있는 시기가 오면, 코멧은 과거의 유산이 될 것입니다.

그러나 아직까지 HTML5는 Specification이 확정되지 않았고, 예전 버전의 브라우저를 사용하는 사람들은 여전히 많습니다. 특히 익스플로러의 경우에는 10 버전에서야 WebSocket를 지원하기 시작했습니다. 따라서 당분간 코멧의 생명력은 유지될 것입니다.

3 thoughts on “코멧(Comet) #1 – 웹 페이지를 실시간으로 업데이트하는 방법

  1. 연재가 계속되었으면 좋겠습니다~! 세 번 째 방법과 네 번 째 방법 쪽이 특히 관심이 가네요.

    • 간단하면서 좋은 예제코드를 준비해야 하는데, 쉽지 않아서 좀 미뤄두었네요. 가급적 빨리 시작해보겠습니다.

  2. Pingback: Comet - CCL FREE

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.

*

다음의 HTML 태그와 속성을 사용할 수 있습니다: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>