HTML5 웹소켓
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 이벤트: 연결이 끊어지면 발생
- 웹 소켓을 이용하는 클라이언트 코드의 전체 모습
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
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
출처: http://cutewebi.tistory.com/710 [cutewebi 희정냥★]