Successfully reported this slideshow.

WebSocket 기반 쌍방향 메시징

13

Share

Upcoming SlideShare
Web Socket
Web Socket
Loading in …3
×
1 of 21
1 of 21

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

WebSocket 기반 쌍방향 메시징

  1. 1. WebSocket 기반 쌍방향 메시징 이희승
  2. 2. 차세대 웹의 쌍방향 통신 표준인 WebSocket 프로토콜을 이해한다.
  3. 3. 목차 • 등장 배경 • 프로토콜 라라 • 클라이언트 구현 • 서버 구현 • 앞으로의 전망
  4. 4. Web 2.0 • 풍부한 사용자 경험 – AJAX, DHTML, CSS, … – Rich Internet Application • 리프레시 없는 쌍방향 통신 (aka Comet) – Long Polling – Piggybacking – Hidden <iframe/>
  5. 5. 한계 • HTTP – 무상태 – 단방향 스스 · 요청 짝짓기 – 불완전한 스 스스스스 • 환경에 따른 복잡한 구현 전략 – 언제 끊어질 지 모른다! – 브라우저 · 서버 모두 복잡 – 프록시
  6. 6. 목차 • 등장 배경 • 프로토콜 소개 • 클라이언트 구현 • 서버 구현 • 앞으로의 전망
  7. 7. 특징 • HTML5 ‘표준’ – 브라우저 · 서버 모두 간결 – 프록시 지원 기대 • 커넥션 기반 • 양방향 풀 듀플렉스 • TCP/IP 소켓을 직접 다루듯
  8. 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. 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. 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. 11. Data Frame • Handshake 후 어느 쪽에서든 전송 가능 • Text Frame – Type + UTF8 String + Terminator – “Hello, World!” – 00 48656C6C6F2C20576F726C6421 FF • Binary Frame – 현재는 쓰이지 않으나 예약됨
  12. 12. Closing Handshake • 연결을 닫고자 하는 쪽에서 Type 이 0xFF이고 길이가 0x00인 바이너리 프레임 전송: 0xFF 0x00 • 서로 주고 받은 후 연결 종료
  13. 13. 목차 • 등장 배경 • 프로토콜 소개 • 클라이언트 구현 • 서버 구현 • 앞으로의 전망
  14. 14. 지원 브라우저 • HTML5 지원 브라우저 – Google Chrome 4+ – Firefox 3.7pre – Apple Safari • SWF 브리지 – Firefox 3.0 ~ 3.6 – Internet Explorer 6+ – Opera 9+
  15. 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. 16. 목차 • 등장 배경 • 프로토콜 소개 • 클라이언트 구현 • 서버 구현 • 앞으로의 전망
  17. 17. 지원 서버 • API 표준화는 아직 • Standalone – Netty (from JBoss) – Grizzly – jWebSocket (via Netty) • Servlet Containers – 확장 기능으로 제공 – Jetty 8 – Glassfish (via Grizzly)
  18. 18. 목차 • 등장 배경 • 프로토콜 소개 • 클라이언트 구현 • 서버 구현 • 앞으로의 전망
  19. 19. 앞으로의 전망 • 아직은 IETF Draft – 스펙 변경 예상 • Draft 75 vs. 76 – 직접 구현보다는 신뢰할만한 라이브러리로 • Netty를 추천 • 프록시 구현 변경 필요 – 프록시 사용이 거의 없는 일반 이용자부터 • 브라우저 뿐만 아니라 다양한 곳에서 – WebSocket 을 통해 JMS 큐에 직접 연결 • HornetQ를 추천
  20. 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. 21. - 감사합니다 -

×