안녕하세요^^

요즘 웹개발을 하면서 관심을 두고 있는 기술이 생겨 짬날때마다 공부를 하고 있는 1人입니다.

다들 아시다시피 클라이언트 입장에서의 웹이라는 것이 요청을 하지 않으면 결과물이 오지 않는 아키텍쳐인 관계로 극히 수동적일 수 밖에 없습니다.

예를 들어 어떤것을 보고싶고, 실행하고 싶을때는 버튼을 클릭한다던지 url을 입력한다던지 하는 행위(요청)이 없다면 실행되지 않는 특징이자 단점을 가지고 있지요...

하지만 이러한 웹의 한계를 극복하고자 여러가지 기술들이 등장하며 많은 발전을 이루고 있습니다. 대표적인 것으로는 RIA와 같은 것이 있지요...

하지만 RIA와 같은 기술들은 비용측면뿐만 아니라 기술적 수준또한 매우 높은 경지을 요하게 됩니다.

역시 고객의 입장에서는 비용적인 측면이 가장큰 이슈이자 부담이 아닐수 없습니다.

하여 고객과 개발자가 함께 윈윈할 수 있는 적은 가격으로 RIA와 같은 실시간 웹서비스에 가까운 제품을 개발하기 위해 등장한 기술들이 매우 많지요.

첫번째로 등장하는 것이 Polling 기술 입니다. Polling 기술은 요청이 없으면 결과값을 보내지 않는 웹서버의 특성을 고려하여 JAVASCRIPT를 이용해 사용자가 보이지 않도록 계속해서 서버에 요청을 보내고 결과값을 받아와 변경된 부분에 채워넣는 것입니다. 하지만 이러한 경우 변경된 부분이 없음에도 불구하고 클라이언트는 서버로 불필요한 요청을 계속해서 보내게 됩니다. 불필요한 요청을 계속해서 받고 이에대한 불필요한 결과값을 계속 응답해주는 서버측의 입장에서도 매우 비 효율적이면서 부하가 많이 발생하게 됩니다...( 한사람의 경우 초당1번의 결과값을 보낼수 있는 서버라고 가정했을 경우 10명이 접속하였을 경우 10초동안 결과값을 보내기 위한 비용이 발생하며 불필요한 트래픽 또한 증가하게 됩니다.)

이러한 비효율적 부분을 개선하고자 등장한 기술적 방안이 바로 long-Polling이라는 것입니다. long-Polling이란 요놈은 Polling 기술은 주기적으로 서버에 요청을 보내면 서버가 바로 응답을 하여 불필요한 트래픽소모를 줄이고자 고안된 방법입니다. Polling은 요청을 주기적으로 보내고 서버가 바로 응답하는 형식이 아니라 서버가 변경된 정보가 없을때는 클라이언트가 보낸 요청을 물고 있다가 어떠한 요청의 변경사항이 있을때 비로소 그 응답을 보내는 형식으로 동작을 합니다. long-Polling은 트래픽 적인 부분에서 Polling보다 많이 개선되었다고는 하나.... 생각해보십시오... 1000명이 A라는 이슈에 long-Polling방식으로 서버에 접속해 있을 경우 A에 갱신이 이루어졌을때 1000명의 접속자에게 한번에 응답을 보내주어야 합니다..... 응답을 받은 1000명의 접속자는 또다시 A의 정보에 대한 갱신내용을 받기위해 서버에 요청을 보내겠지요.... 제 기억에 의하면 IIS는 최대 요청갯수가 5000개 정도라고 알고 있습니다, 그렇다면 5000개가 최대 요청갯수라 가정하면, long-Polling 서비스를 사용하는 접속자가 5000명까지 밖에 소화해낼수 없다는 결론에 도달합니다. 5000개의 요청이 최대갯수라면... 그 이전에 벌써 서버는 버벅거리고 있겠지요... DDOS공격... 별다른걸보고 DDOS라고 하지 않습니다. 바로 이런경우라면 서버는 자살기도를 하는것이겠지요...^^;; (표현이 다소 거칠수 있지만 적절한 표현이 아닌가 싶습니다.)

실제로 이런식으로 구현된 안타까운 웹사이트들을 종종 보게 됩니다. 안타깝긴 하지만 웹의 특성상... 특별한 방법이 없는것도 사실입니다.

이러한 부분에 대해 속시원하게 웹에서 실시간 서비스를 제공하기엔 힘든것인가에 대한 목마름은 인간이 가진 "욕심"이란 본능을 자극하게 됩니다. 저 또한 이러한 부분에 대한 속시원한 해결방법에 대한 갈구가 어느덧 집념비슷하게 생겨버렸네요^^

여하튼 저만 이런것이 아니었나 봅니다.

HTML5가 등장하면서 새롭게 태어난(?) 기능이 바로 WebSocket입니다. 표준화는 아직 진행중이지만 최신버전의 브라우저들에서는 대부분 웹소켓을 지원한다고 합니다. 아직도 한국인이 많이 쓰는 Microsoft Internet Explorer는 10부터 지원하며, 파이어폭스나 크롬은 이미 각각 6.0, 14.0점대 버젼부터 지원한다고 합니다.

웹소켓은 브라우저에서 서버에서 웹서비스를 하는 포트인 80포트 외의 다른 포트로 실시간 양방향 통신을 할 수 있도록 해주는 기술입니다. 요즘 모바일 플랫폼(스마트폰, 테블릿 등)에서 푸쉬기능은 빠질 수 없는 필수적인 요소가 되었습니다. 하지만 기존의 PC용 웹브라우저의 경우 이러한 푸시기능을 쓸수 없었습니다. 서버에 부하를 최소화하면서 이러한 효율적인 실시간 서비스를 받을 수 있는 방법은 전무했었지요. 웹소켓은 Polling, long-Polling과 같이 기존에 형성되어 있는 커넥션이 필요없다고 합니다. 그에 대한 부하또한 줄어들게 되겠지요... 서버의 효율을 극대화하게 되며 이로인해 사용자들은 더욱더 쾌적한 웹서비스를 받을수 있게 됩니다.

또한 웹소켓은 한국 온라인 사회에서 가장 골칫덩이인 ActiveX가 사라지는데도 일조하게 될것이라는 기대또한 만연하고 있는 실정입니다.

저또한 웹소켓을 이용해 여러가지 개발과 테스트를 하면서 깊이빠져있구요...

본론으로 돌아와서...

웹소켓은 자바스크립트의 네이티브(PC의 웹브라우저)와 연동할 수 있는 특징을 활용해 구현됩니다. 이르 위해 HTML5는 서버와 연결 할 수 있는 WebSocket객체를 제공하며 일반통신은 ws, 보안통신은 wss 프로토콜을 사용합니다.

이쯤에서 웹소캣을 이용한 클라이언트쪽 JS의 간략한 코드를 한번 올려봅니다.

<script>
  var wSocket = new WebSocket("ws:domain/path");
  
  wSocket.onmessage = function(e){
      alert(e.data);
  }  

  wSocket.onopen = function(e){ 
      alert("서버에 연결되었습니다.");
 } 
  wSocket.onclose = function(e){
      alert("서버에 연결이 종료되었습니다.");
 }  

  function send(){ //서버로 데이터 전송
    wSocket.send("hi~");
  }
</script>

위의 소스는 WebSockt의 5가지 중요한 메서드들의 예시입니다.

우선 가장 중요하며, 가장먼저 해야할 기능으로 웹소켓 연결 객체입니다.

두번째 메서드는 서버측에서 전송된 데이터를 받는 부분이며,

세번째 메서드는 서버에 연결이 완료되었을때 실행되는 메서드,

네번째는 서버연결이 종료되었을 때 실행되며,

다섯번째는 클라이언트에서 서버쪽으로 데이터를 전송할때 사용됩니다.(위 소스에서는 "hi~"라는 데이터를 서버로 전송하네요^^)

물론 위 소스는 웹소켓의 가장 중요하며 특별한 메서드들을 간략하게 구현한 것입니다.

 

웹 소켓을 위해서는 서버쪽도 준비를 해 주어야 합니다.

서버쪽 준비는 2탄에서 한번 다뤄보도록 하겠습니다^^

 추가로 3탄은 MQTT에 대해 다뤄볼 예정입니다.

 

 

 

P.S.

말재주가 없는 관계로 글이 엉망입니다.

길고 두서없는 글 읽어주신 여러분께 감사인사드립니다.^^