1. WebSocket 기반 쌍방향 메시징
이희승

2. 차세대 웹의 쌍방향 통신
표준인 WebSocket
프로토콜을 이해한다.

3. 목차
• 등장 배경
• 프로토콜 라라
• 클라이언트 구현
• 서버 구현
• 앞으로의 전망

4. Web 2.0
• 풍부한 사용자 경험
– AJAX, DHTML, CSS, …
– Rich Internet Application
• 리프레시 없는 쌍방향 통신 (aka Comet)
– Long Polling
– Piggybacking
– Hidden <iframe/>

5. 한계
• HTTP
– 무상태
– 단방향 스스 · 요청 짝짓기
– 불완전한 스 스스스스
• 환경에 따른 복잡한 구현 전략
– 언제 끊어질 지 모른다!
– 브라우저 · 서버 모두 복잡
– 프록시

6. 목차
• 등장 배경
• 프로토콜 소개
• 클라이언트 구현
• 서버 구현
• 앞으로의 전망

7. 특징
• HTML5 ‘표준’
– 브라우저 · 서버 모두 간결
– 프록시 지원 기대
• 커넥션 기반
• 양방향 풀 듀플렉스
• TCP/IP 소켓을 직접 다루듯

8. 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

9. 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-

10. Handshake - Verification
K1 = “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-”

11. Data Frame
• Handshake 후 어느 쪽에서든 전송 가능
• Text Frame
– Type + UTF8 String + Terminator
– “Hello, World!”
– 00 48656C6C6F2C20576F726C6421 FF
• Binary Frame
– 현재는 쓰이지 않으나 예약됨

12. Closing Handshake
• 연결을 닫고자 하는 쪽에서 Type 이
0xFF이고 길이가 0x00인 바이너리
프레임 전송:
0xFF 0x00
• 서로 주고 받은 후 연결 종료

13. 목차
• 등장 배경
• 프로토콜 소개
• 클라이언트 구현
• 서버 구현
• 앞으로의 전망

14. 지원 브라우저
• HTML5 지원 브라우저
– Google Chrome 4+
– Firefox 3.7pre
– Apple Safari
• SWF 브리지
– Firefox 3.0 ~ 3.6
– Internet Explorer 6+
– Opera 9+

15. 예제
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)
else
alert(“NOT OPEN")
}

16. 목차
• 등장 배경
• 프로토콜 소개
• 클라이언트 구현
• 서버 구현
• 앞으로의 전망

17. 지원 서버
• API 표준화는 아직
• Standalone
– Netty (from JBoss)
– Grizzly
– jWebSocket (via Netty)
• Servlet Containers
– 확장 기능으로 제공
– Jetty 8
– Glassfish (via Grizzly)

18. 목차
• 등장 배경
• 프로토콜 소개
• 클라이언트 구현
• 서버 구현
• 앞으로의 전망

19. 앞으로의 전망
• 아직은 IETF Draft
– 스펙 변경 예상
• Draft 75 vs. 76
– 직접 구현보다는 신뢰할만한 라이브러리로
• Netty를 추천
• 프록시 구현 변경 필요
– 프록시 사용이 거의 없는 일반 이용자부터
• 브라우저 뿐만 아니라 다양한 곳에서
– WebSocket 을 통해 JMS 큐에 직접 연결
• HornetQ를 추천

20. 참고 자료
• 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/

21. - 감사합니다 -