0
WebSocket 기반 쌍방향 메시징

        이희승
차세대 웹의 쌍방향 통신
  표준인 WebSocket
 프로토콜을 이해한다.
목차
• 등장 배경
•   프로토콜 라라
•   클라이언트 구현
•   서버 구현
•   앞으로의 전망
Web 2.0
• 풍부한 사용자 경험
 – AJAX, DHTML, CSS, …
 – Rich Internet Application
• 리프레시 없는 쌍방향 통신 (aka Comet)
 – Long Polling
 – P...
한계
• 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-Web...
Handshake - Response
HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin...
Handshake - Verification
 K1 = “4 @1 46546xW%0l 1 5”
 K2 = “12998 5 Y3 1 .P00”
  A = digitsOnly(K1) / countWhitespace(K1)
...
Data Frame
• Handshake 후 어느 쪽에서든 전송 가능
• Text Frame
  – Type + UTF8 String + Terminator
  – “Hello, World!”
  – 00 48656C6...
Closing Handshake
• 연결을 닫고자 하는 쪽에서 Type 이
  0xFF이고 길이가 0x00인 바이너리
  프레임 전송:

       0xFF 0x00
• 서로 주고 받은 후 연결 종료
목차
• 등장 배경
• 프로토콜 소개
• 클라이언트 구현
• 서버 구현
• 앞으로의 전망
지원 브라우저
• HTML5 지원 브라우저
 – Google Chrome 4+
 – Firefox 3.7pre
 – Apple Safari
• SWF 브리지
 – Firefox 3.0 ~ 3.6
 – Internet E...
예제
if (!window.WebSocket) alert(“UNSUPPORTED”)

var s = new   WebSocket("ws://localhost:8080/demo")
s.onmessage   = functi...
목차
• 등장 배경
• 프로토콜 소개
• 클라이언트 구현
• 서버 구현
• 앞으로의 전망
지원 서버
• API 표준화는 아직
• Standalone
  – Netty (from JBoss)
  – Grizzly
  – jWebSocket (via Netty)
• Servlet Containers
  – 확장...
목차
•   등장 배경
•   프로토콜 소개
•   클라이언트 구현
•   서버 구현
• 앞으로의 전망
앞으로의 전망
• 아직은 IETF Draft
  – 스펙 변경 예상
    • Draft 75 vs. 76
  – 직접 구현보다는 신뢰할만한 라이브러리로
    • Netty를 추천
• 프록시 구현 변경 필요
  – 프...
참고 자료
• WebSocket IETF Draft
   – http://www.whatwg.org/specs/web-socket-protocol/
• WebSockets.org
   – http://www.websoc...
- 감사합니다 -
Upcoming SlideShare
Loading in...5
×

WebSocket 기반 쌍방향 메시징

12,924

Published on

1 Comment
9 Likes
Statistics
Notes
  • 감사합니당

    5page에 스스스 들은 무슨 의미인가요?

    프로토콜 라라 라는 건 websocket 스펙 자체를 의미한 건가요?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
12,924
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
91
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "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. - 감사합니다 -
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×