websocket API의 작동 원리와 이전의 양방향 통신 및 HTTP, TCP 연결에 대해 간단한 설명을 한 PPT입니다.

1. Web-socket protocol
김연재
웹소켓..이제 http,tcp를 곁들인..

2. 목차
1. 양방향 통신
2. 양방향 통신의 역사
3. 웹소켓
4. 작동원리
5. socket.io

3. 양방향 통신?
실시간 주가창, 채팅 등등 ..

4. 양방향 통신의 역사
폴링부터 웹소켓까지
• 폴링
• 롱폴링
• 스트리밍

5. 양방향 통신의 역사
폴링부터 웹소켓까지
• 폴링
• 롱폴링
• 스트리밍

6. 양방향 통신의 역사
폴링부터 웹소켓까지
• 폴링
• 롱폴링
• 스트리밍

7. HTTP 통신
그게몬대

8. TCP 통신
그게몬대

9. HTTP 통신
왜 무거운데
• origin 형식: 끝에 '?'와 쿼리 문자열이 붙는 절대 경로입니다. 이는 가장 일반적인 형
식이며, GET, POST, HEAD, OPTIONS 메서드와 함께 사용합니다.
POST / HTTP 1.1
GET /background.png HTTP/1.0
HEAD /test.html?query=alibaba HTTP/1.1
OPTIONS /anypage.html HTTP/1.0
• absolute 형식: 완전한 URL 형식입니다. 프록시에 연결하는 경우 대부분 GET과 함께
사용됩니다.
GET http://developer.mozilla.org/en-US/docs/Web/HTTP/
Messages HTTP/1.1
• authority 형식: 도메인 이름 및 옵션 포트(':'가 앞에 붙습니다)로 이루어진 URL의
authority component 입니다. HTTP 터널을 구축하는 경우에만 CONNECT와 함께
사용할 수 있습니다.
CONNECT developer.mozilla.org:80 HTTP/1.1
• asterisk 형식: OPTIONS와 함께 별표('*') 하나로 간단하게 서버 전체를 나타냅니
다.
OPTIONS * HTTP/1.1
•
TCP header Http header

10. 웹소켓
이란 무엇인가?
• Http 통신으로 시작해 양방향 통신을 가능하게 해주는 프로토콜
• 서버와 클라이언트간에 소켓 커넥션을 유지하여 언제든 양방향 통신이 가능하도록 함
• stateful하기 때문에 TCP, HTTP 연결 트래픽을 피할 수 있음
• HTTP 프로토콜을 통해 이루어짐
• HTTP의 포트(80,443)을 사용하기 때문에 방화벽 재설정 필요 없음
• 실시간 앱 구현에 널리 사용됨

11. 웹소켓
작동원리

12. 웹소켓
작동원리
GET /chat HTTP/1.
1
Host: example.com:800
0
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key:
dGhlIHNhbXBsZSBub25jZQ=
=
Sec-WebSocket-Version: 1
3
클라이언트 핸드쉐이크 요청

13. 웹소켓
작동원리
GET /chat HTTP/1.
1
Host: example.com:800
0
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key:
dGhlIHNhbXBsZSBub25jZQ=
=
Sec-WebSocket-Version: 1
3
클라이언트 핸드쉐이크 요청

14. 웹소켓
작동원리
GET /chat HTTP/1.
1
Host: example.com:800
0
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key:
dGhlIHNhbXBsZSBub25jZQ=
=
Sec-WebSocket-Version: 1
3
클라이언트 핸드쉐이크 요청

15. 웹소켓
작동원리
HTTP/1.1 101 Switching Protocols
Upgrade: websocke
t
Connection: Upgrad
e
Sec-WebSocket-Accept:
s3pPLMBiTxaQ9kYGzzhZRbK+xOo
=
서버 응답

16. 웹소켓
작동원리
HTTP/1.1 101 Switching Protocols
Upgrade: websocke
t
Connection: Upgrad
e
Sec-WebSocket-Accept:
s3pPLMBiTxaQ9kYGzzhZRbK+xOo
=
서버 응답

17. 웹소켓
작동원리
FIN : 마지막 메세지임을 확인
(0 : 뒤의 메세지를 수신, 1: 전체 메세지 수신 완료)
RSV 1~3 : 사용하지않음, 미래를 위한 필드
Mask : 메세지의 인코딩 여부,
클라이언트 -> 서버 메시지는 항상 마스킹되어있어야 함
Opcode : payload 데이터의 포맷을 나타냄
Payload len : payload의 길이를 나타냄

18. 웹소켓
작동원리
GET /chat HTTP/1.
1
Host: example.com:800
0
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key:
dGhlIHNhbXBsZSBub25jZQ=
=
Sec-WebSocket-Version: 1
3
HTTP/1.1 101 Switching Protocol
s
Upgrade: websocke
t
Connection: Upgrad
e
Sec-WebSocket-Accept:
s3pPLMBiTxaQ9kYGzzhZRbK+xOo
=
Request
Response
HTTP HTTP
Ws(80) or wws(443) Ws(80) or wws(443)

19. socket.io
무엇일까?
WebSocket, FlashSocket, AJAX Long Polling, AJAX Multi part Streaming, IFrame, JSONP Polling
중, 적합한 기술을 선택하여 사용.
(2020년 기준, 97%의 브라우저가 wepsocket API를 지원)
websocketAPI는 string으로 전송이 되므로, 객체의 경우 stringify(서버) -> parse(클라이언트) 해주어야하는데,
이부분을 socket.io가 도와줌

20. Reference
- https://caniuse.com/?search=websocket
- https://d2.naver.com/helloworld/1336
- https://developer.mozilla.org/ko/docs/Web/API/WebSockets_API/
Writing_WebSocket_servers
- https://socket.io/docs/v4/
- https://datatracker.ietf.org/doc/html/rfc6455
- http://www.secmem.org/blog/2019/08/17/websocket-socketio/