posted by 희정냥★ 2012. 6. 29. 23:49

1. HTML5 웹소켓

- 서버측에서의 복잡한 프로그래밍 없이 웹을 통해서 일반적인 TCP소켓과 같이 실시간 연결지향 양방향 전이중 통신을 가능하게 하는 기술

- 기존 웹브라우져에서 서버로 데이터를 요청하는 방식에 비해, 서버에서 브라우저로 데이터 전송이 가능

- HTTP 통신에서, 서버 통신중에 발생하는 불필요한 데이터인  파일 '헤더' 부분을 최대 1/1000 가량 줄일수 있음

-  웹소켓 기술 업체 카징(Kaazing)에서는 '카징 케이트웨이 HTML5 에디션'  런칭 발표, 본격적인 웹 소겟 시대를 알림


 

2. 웹 소켓과 (Ajax의 통신 객체인) XMLHttpRequest 의 속도 비교

http://bloga.jp/ws/jq/wakachi/mecab/wakachi.html  (크롬 or 사파리에서 실행)

웹 소켓이 대략 50배 이상 좋은 성능을 나타냄



3. 웹 소켓이 필요한 경우

Your web application has data that must flow bi-directional simultaneously.

- 실시간 양방향 데이터 통신이 필요한 경우

Your web application must scale to large numbers of concurrent users.

- 많은 수의 동시 접속자를 수용해야 하는 경우

Your web application must extend TCP-based protocols to the browser.

- 브라우저에서 TCP 기반의 통신으로 확장해야 하는 경우

Your web application developers need an API that is easy to use.

- 개발자에게 사용하기 쉬운 API가 필요할 경우

Your web application must extend SOA over the Web and in the Cloud.

- 클라우드 환경이나 웹을 넘어 SOA 로 확장해야 하는 경우



4. 지원 브라우저

IE와 오페라를 제외한 사파리,크롬,파이어폭스 최신버전에서 웹 소켓을 지원



그림1. 브라우저별 Web Sockeet 지원 현황 (출처: http://caniuse.com/)



5. 웹소켓 구현

서버연결
HTML5가 제공하는 WebSocket 객체를 통해 서버 연결 수행.

일반 통신은 ws, 보안 통신은 wss 프로토콜을 이용.
기본 포트 역시 http,https와 동일한 80,443을 이용.
var wSocket = new WebSocket("ws://yourdomain/demo");

- 데이터 송신
서버와 연결이 되면 데이터를 주고 받을 수 있게 된다. 

WebSocket 객체의 send 함수로 데이터를 서버로 송신.
wSocket.send("송신 메시지");

데이터 수신
서버에서 푸시(전송)하는 데이터를 받으려면 message 이벤트를 구현.
wSocket.onmessage function(e){ //매개변수 e를 통해 수신된 데이터를 조회할 수 있다 }

- 이벤트 제공
-- open 이벤트: 연결이 설정되면 발생
-- close 이벤트: 연결이 끊어지면 발생

- 웹 소켓을 이용하는 클라이언트 코드의 전체 모습

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

  wSocket.onopen = function(e){ alert("서버 연결 완료"); } 
  wSocket.onclose = function(e){ alert("서버 연결 종료"); }  

  function send(){ //서버로 데이터를 전송하는 메서드
    wSocket.send("Hello");
  }
</script>



6. 웹소켓 서버

웹 소켓은 일반적인 TCP 소켓과는 다른 프로토콜로 설계되었다. 

따라서 웹소켓 서버 사양에 맞게 새로 구현해야 한다.

- 웹 소켓 서버를 위한 오픈소스 모듈
pywebsocket

phpwebsocket

jWebSocket

web-socket-ruby

Socket.IO-node



7.  jWebSocket를 이용한 모듈
- 라이브러리 다운로드 : http://jwebsocket.org/ 
- jWebSocketServer : 자바로 구현된 웹 소켓 서버모듈

- jWebSocketClient : 자바스크립트로 구현된 웹 소켓 클라이언트 데모 

- jWebSocketFullSource : jWebSocket 라이브러리의 전체 소스코드 



8. jWebSocketServer 구동
- 아파치 웹서버나 톰켓을 이용하여 구동

- Stand-Alone 구동

- java 설정

 -- jre 1.6 이상.

 -- PATH에 java.exe 등록.

 -- 환경변수에 JAVA_HOME 설정 : 자바 ROOT

 -- 환경변수에 JWEBSOCKET_HOME 설정 : jWebSocket 루트 디렉토리


- Stand-Alone로 구동 예제
1) 다운받는 jWebSocketServer을 압축해제 

2) bin 폴더에 있는 jWebSocketServer.bat 파일을 명령프롬프트에서 실행 

3)  웹 소켓 서버의 구동됨.

4) 웹 소켓 서버와의 통신로그와 디버그 메세지 기록됨.
5) 실행창을 닫으면 서버 종료

* 참고 퀵스타트 : http://code.google.com/p/jwebsocket/wiki/QuickStart



9. jWebSocketClient 데모 테스트
- jWebSocketClient 다운 후 압축해제
- 채팅데모인 chat.htm 을 실행

두 개의 크롬 브라우저에서 각각 로그인 한 뒤, 채팅하는 모습




jWebSocket 에서 서버 연결을 위해 다음과 같은 url을 정의하고 있다
var lURL = jws.JWS_SERVER_URL + "/;prot=json,timeout=360000";
...
JWS_SERVER_URL: "ws://" + ( self.location.hostname ? self.location.hostname : "localhost" ) + ":8787"

ws 프토토콜

localhost, 8787포트로 연결

json 포맷과 타임아웃이 설정


포트 등 변경시 : \conf\jWebSocket.xml 파일 수정

상태 검사 : ws.readState == WebSocket.OPEN / CONNECTING / CLOSED


* 출처 : http://m.mkexdev.net/98

http://blog.daum.net/hopefullife/241


'Computer > Web' 카테고리의 다른 글

HTML5 WebStorage  (1) 2012.06.30
HTML5 주요기술  (0) 2012.06.29
HTML5 웹소켓  (4) 2012.06.29
CSS Box Model  (0) 2011.09.18
CSS 선택자  (0) 2011.09.18
Web 2.0 기반의 Presentation On The Web  (0) 2009.08.06

댓글을 달아 주세요

  1. june 2012.07.10 15:04  Addr  Edit/Del  Reply

    안녕하세요^^ 정보 감사합니다. 혹시..개인적 질문인데... jwebsocket나 websocket을 통해서 파일전송 관련된 예제나 참고할 만한 자료 있는 곳을 아시나요? 그럼 좋은 하루 보내세요^^

  2. Brad 2012.11.16 04:45  Addr  Edit/Del  Reply

    저 SOA는 서비스 지향 아키텍쳐를 말씀하시는것 같습니다!?

  3. 김영규 2013.01.31 17:20  Addr  Edit/Del  Reply

    많은 도움이 되었습니다. 감사합니다.^^

  4. 우왕 2013.12.24 18:21  Addr  Edit/Del  Reply

    감사합니다..^^