HTML5 WebSocket

1. WebSocket
HTML5

2. Five Signs You Need HTML5
WebSockets
1. Your web application has data that must flow bi-directional
simultaneously.
2. Your web application must scale to large numbers of concurrent
users.
3. Your web application must extend TCP-based protocols to the
browser.
4. Your web application developers need an API that is easy to use.
5. Your web application must extend SOA over the Web and in the
Cloud.
출처: http://peterlubbers.sys-con.com/node/1551694 BY PETER LUBBERS

3. Websocket 특징
• Real-time full duplex communication over TCP
• Uses port 80 / 443
• URL scheme : ws, wss (SSL)
• Small overhead for text message (frame base) - 0x00 ~ 0xFF
• Ping/Pong frames for staying alive

4. 웹소켓 지원 브라우저
• 웹소켓은 2011년 RFC 6455에 의해서 표준화
• 웹소켓 API들은 W3C에 의해서 표준으로 채택

5. 웹소켓 Handshake 과정
GET /mychat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Version: 13
Origin: http://example.com
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
① 웹소켓을 사용할 수 있는지 서버에 요청
② websocket 으로 upgrade 요청
③ 웹서버 응답
④ HTTP를 websocket으로 switching 하겠다고 응답
⑤ 웹소켓 생성
⑥ 웹소켓 프로토콜을 이용해서 데이터 통신

6. 브라우저 웹소켓 API
이벤트 핸들러 설명
onopen 웹소켓이 열리면 호출
onmessage 메시지가 도착하면 호출
onerror 에러가 발생하면 호출
onclose 웹소켓이 닫히면 호출
• 브라우저는 단 6개의 API로 소켓통신이 가능
• 4개의 이벤트 핸들러와 2개의 함수로 구성
함수 설명
send 메시지 전송
close 웹소켓 닫기
참고: https://w3c.github.io/websockets/#the-websocket-interface

7. WebSocket API 예제

8. 웹소켓 서버구현 방법
• Apache Tomcat 7
• Spring 4.X (tomcat 7.x 이상이 필요)
• Java-WebSocket
– A barebones WebSocket client and server implementation written in
100% Java
• jWebSocket
– jWebSocket is a pure Java/JavaScript high speed bidirectional
communication solution for the Web server and various clients
• Grizzly
– Framework for building web servers of various scales and types incl
Web Socket client & server apis.
참고: https://java.net/projects/websocket-spec/pages/WebSocketAPIs

9. Spring 4.0에서 WebSocket 예제
• 다음과 같은 절차로서 구성
1) MessageHandler의 구성
2) Spring Configuratio에 ConnectionEndPoint 설정

10. 디버깅 및 테스트
• 웹브라우저의 웹소켓 지원여부 확인
• Chrome Simple Websocket Client
크롬브라우저에서 simple websocket cleint extension을 이용하여 웹소켓 테스트 가능

11. 웹소켓 개발 사례
데모: http://browserquest.mozilla.org/
소스: https://github.com/mozilla/BrowserQuest
• BrowserQuest