websocket 기반 쌍방향 메시징
DESCRIPTION
TRANSCRIPT
WebSocket기반쌍방향메시징
이희승
차세대웹의쌍방향통신표준인WebSocket 프로토콜을이해한다.
목차
• 등장배경• 프로토콜라라• 클라이언트구현• 서버구현• 앞으로의전망
Web 2.0
• 풍부한사용자 경험– AJAX, DHTML, CSS, …– Rich Internet Application
• 리프레시 없는쌍방향통신 (aka Comet)– Long Polling– Piggybacking– Hidden <iframe/>
한계
• HTTP–무상태–단방향스스 · 요청짝짓기–불완전한스스스스스
• 환경에따른복잡한 구현전략–언제끊어질지모른다!–브라우저 ·서버모두복잡–프록시
목차
• 등장배경
• 프로토콜 소개• 클라이언트구현• 서버구현• 앞으로의전망
특징
• HTML5 ‘표준’–브라우저 ·서버모두간결–프록시지원기대
• 커넥션기반• 양방향풀듀플렉스• TCP/IP 소켓을직접다루듯
Handshake - Request
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Protocol: sample
Upgrade: WebSocket
Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5
Origin: http://example.com
^n:ds[4U
Handshake - Response
HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: http://example.com
Sec-WebSocket-Location: ws://example.com/demo
Sec-WebSocket-Protocol: sample
8jKS'y:G*Co,Wxa-
Handshake - VerificationK1 = “4 @1 46546xW%0l 1 5”K2 = “12998 5 Y3 1 .P00”A = digitsOnly(K1) / countWhitespace(K1)= 4146546015 / 5 = 829309203 = 0x316E4113 (32b)
B = digitsOnly(K2) / countWhitespace(K2)= 1299853100 / 5 = 259970620 = 0x0F7ED63C (32b)
C = req.getContent()= “^n:ds[4U” = 0x5E6E3A64735B3455 (64b)
IN = concat(A, B, C)= 0x 316E4113 0F7ED63C 5E6E3A64735B3455 (128b)
OUT = md5sum(IN)= 0x386a4B5327793A472A436F2C5778612D (128b)= res.getContent()= “8jKS'y:G*Co,Wxa-”
Data Frame
• Handshake 후어느쪽에서든 전송가능• Text Frame
– Type + UTF8 String + Terminator– “Hello, World!”– 00 48656C6C6F2C20576F726C6421 FF
• Binary Frame–현재는쓰이지않으나예약됨
Closing Handshake
• 연결을닫고자 하는쪽에서 Type 이0xFF이고길이가 0x00인바이너리프레임전송:
0xFF 0x00
• 서로주고받은후연결종료
목차
• 등장배경• 프로토콜소개
• 클라이언트 구현• 서버구현• 앞으로의전망
지원브라우저
• HTML5 지원브라우저– Google Chrome 4+– Firefox 3.7pre– Apple Safari
• SWF 브리지– Firefox 3.0 ~ 3.6– Internet Explorer 6+– Opera 9+
예제if (!window.WebSocket) alert(“UNSUPPORTED”)
var s = new WebSocket("ws://localhost:8080/demo")s.onmessage = function(evt) { alert(evt.data) }s.onopen = function(evt) { alert(“OPEN") }s.onclose = function(evt) { alert(“CLOSED") }
function send(message) {if (s.readyState == WebSocket.OPEN)s.send(message)
elsealert(“NOT OPEN")
}
목차
• 등장배경• 프로토콜소개• 클라이언트구현
• 서버구현• 앞으로의전망
지원서버
• API 표준화는아직• Standalone
– Netty (from JBoss)– Grizzly– jWebSocket (via Netty)
• Servlet Containers–확장기능으로제공– Jetty 8– Glassfish (via Grizzly)
목차
• 등장배경• 프로토콜소개• 클라이언트구현• 서버구현
• 앞으로의 전망
앞으로의전망
• 아직은 IETF Draft–스펙변경예상
• Draft 75 vs. 76–직접구현보다는신뢰할만한라이브러리로
• Netty를추천
• 프록시구현변경필요–프록시사용이거의없는일반이용자부터
• 브라우저뿐만아니라다양한곳에서– WebSocket을통해 JMS 큐에직접연결
• HornetQ를추천
참고자료
• WebSocket IETF Draft– http://www.whatwg.org/specs/web-socket-protocol/
• WebSockets.org– http://www.websockets.org/
• Netty Project– http://jboss.org/netty/
• Flash Bridge– http://github.com/gimite/web-socket-js
• HornetQ– http://jboss.org/hornetq/
-감사합니다 -