SlideShare a Scribd company logo
WebSocket 그리고 Spring4.0
2015.11.29
http://pigbrain.github.io
이현동
HTTP
- 웹 브라우저와 웹 서버가 통신하는 규약
- 요청/응답 형태
웹 브라우저
웹 서버
주소입력
링크클릭
…
HTML 렌더링
JS 실행
…
요청 처리
요청 응답
브라우저의 요청이 있어야 서버는 응답을 보낼 수 있다
서버에서 이벤트가 발생하면 브라우저에 통지할 수 없다
Facebook 메신저 Gmail 메신저
어떻게 만듬 ??
웹 브라우저
웹 서버
onTimer()
요청 빈 응답
onTimer() onTimer()
응답
Polling
트래픽 통신할 필요가 없어도 요청/응답 발생
서버 부하 요청/응답이 계속 발생하니까..
지연시간 요청 간격에 따라 응답 시간도 달라짐
Polling
웹 브라우저
웹 서버
요청 응답
Long Polling
기다린다
이벤트가 발생하면
응답을 보낸다
기다린다
응답 처리 후 다음 요청을 보낸다
웹 브라우저
웹 서버
요청 응답
Long Polling
저장해둔 이벤트를 보낸다 기다린다
응답 처리 후 다음 요청을 보낸다
이벤트 발생
대기중인 요청이 없
을 경우 일단 저장!
복잡하다 이전에 발생한 이벤트가 있는지,, 대기중인 요청이 있는지,,
지연시간 요청 이전에 이벤트가 발생하면 바로 응답을 보낼 수가 없다
Long Polling
WEBSOCKET
(HTML5)
웹 브라우저
웹 서버
HandShake
WebSocket
CONNECT
(WebSocket HandShake)
Send
Send
Receive
Receive
WebSocket
트래픽
서버부하
지연시간
복잡하다
WebSocket
포트
- HTTP (80)
- HTTPS (443)
URL
- http://www.websockets.org
- ws://www.websockets.org
WebSocket HandShake
웹소켓으로 연결 하기 위해서
웹브라우저와 웹서버는 HandShake 과정을 거쳐야 한다
WebSocket HandShake
웹 브라우저
웹 서버
CONNECT
(WebSocket HandShake)
WebSocket HandShake
요청 응답
Sec-WebSocket-Key : Base64로 인코딩된 랜덤한 16바이트의 문자열
Sec-WebSocket-Version : 무조건 13 !
Updage : “websocket” 키워드가 반드시 있어야 한다
Connection : “Upgrade” 토큰이 반드시 있어야 한다
WebSocket HandShake
요청 응답
Sec-WebSocket-Key : Base64로 인코딩된 랜덤한 16바이트의 문자열
Sec-WebSocket-Key + “258EAFA5-E914-47DA-95CA-C5AB0DC85B11”
-> uRovscZjNol/umbTt5uKmw==258EAFA5-E914-47DA-95CA-C5AB0DC85B11
-> SHA-1으로 해싱
-> acb1c2930fd22ac3 bd1801ff65216104 04c32ab5
-> Base64로 인코딩
->rLHCkw/SKsO9GAH/ZSFhBATDKrU=
WebSocket Frame
웹소켓 HandShake 완료 후
정해진 데이터 Frame에 따라 양방향 통신이 가능
application data : 0x00 Hello World 0xFF
….. (이하 생략)
Sprint 4.x
(WEBSOCKET)
1. web.xml
2. Configuration
ws://localhost:8080/chat
3. Handler (Controller)
소켓 연결 완료
메시지 수신
메시지 전송
소켓 연결 종료
JavsScript
(WEBSOCKET)
소켓 연결 완료
메시지 수신
소켓 끊어짐
메시지 전송
Reference
- http://www.websocket.org
- NDC12 실시간 HTTP 양방향 통신 – 이승재
- http://www.codeproject.com/Articles/209041/HTML5-Web-
Socket-in-Essence#WebSocketInEssence
끝

More Related Content

PDF
A middleware system between web and database servers
PPTX
웹소켓 (WebSocket)
PDF
WebSocket
PDF
이승재, 실시간 HTTP 양방향 통신, NDC2012
PDF
Websocket
PDF
Websocket.. whit http, tcp
PDF
WebSocket 기반 쌍방향 메시징
PPTX
Web Socket
A middleware system between web and database servers
웹소켓 (WebSocket)
WebSocket
이승재, 실시간 HTTP 양방향 통신, NDC2012
Websocket
Websocket.. whit http, tcp
WebSocket 기반 쌍방향 메시징
Web Socket

Similar to Websocket of Spring (20)

PDF
Spring-WebSocket 기반 Full-Featured 채팅 구현
PDF
[아이펀팩토리] 2018 데브데이 서버위더스 _01 HTML5/WebSocket으로 Pong 게임 만들기
PPTX
Web socket
PDF
Web Socket API
PPTX
WebSocket and STOMP for real-time chat.pptx
PPT
Servlet3
PDF
웹 서버 실행 환경
DOCX
Comet
PDF
DGMIT 제3회 R&D 컨퍼런스 r&d1 team : HTTP 프로토콜 개요
PPTX
[Network] Data Transfer History
PPTX
HTTP 완벽가이드 4장 커넥션관리
PDF
Spring 4.x Web Application 살펴보기
PPTX
.net core 에서 SignalR 사용해보기
PPTX
200.마이크로서비스에 적합한 오픈소스 WAS는 무엇?
PPTX
HTTP 발표자료 - 김연수
PDF
HTTP 완벽가이드 : 1-1 http 개관
PDF
Web server
PDF
PPTX
GDG Dev camp 발표자료 - python으로 만들어보는 http서버
PPTX
UWP 응용 프로그램 작성시 올바른 networking APIs 사용하기
Spring-WebSocket 기반 Full-Featured 채팅 구현
[아이펀팩토리] 2018 데브데이 서버위더스 _01 HTML5/WebSocket으로 Pong 게임 만들기
Web socket
Web Socket API
WebSocket and STOMP for real-time chat.pptx
Servlet3
웹 서버 실행 환경
Comet
DGMIT 제3회 R&D 컨퍼런스 r&d1 team : HTTP 프로토콜 개요
[Network] Data Transfer History
HTTP 완벽가이드 4장 커넥션관리
Spring 4.x Web Application 살펴보기
.net core 에서 SignalR 사용해보기
200.마이크로서비스에 적합한 오픈소스 WAS는 무엇?
HTTP 발표자료 - 김연수
HTTP 완벽가이드 : 1-1 http 개관
Web server
GDG Dev camp 발표자료 - python으로 만들어보는 http서버
UWP 응용 프로그램 작성시 올바른 networking APIs 사용하기
Ad

Websocket of Spring