[Network] WebSocket, Socket.IO

💖 WebSocket

HTML5 웹 표준 기술
양방향(bidirectional) 통신 프로토콜
클라이언트와 서버를 연결하여 실시간(real-time) 통신이 가능

🔥 HTTP와 WebSocket

• HTTP는 요청이 있을 때만 서버가 응답하는 단방향 통신이며 stateless 프로토콜이기 때문에 상태 정보를 저장하지 않는다
• HTTP와 달리 WebSocket은 한 번 연결되면 양쪽에서 지속적으로 통신할 수 있다
• 어느 한쪽에 의해 종료될 때까지 활성 상태를 유지하기 때문에 stateful 프로토콜이다

🔥 동작과정

Handshake : 통신에서 연결을 설정하기 위한 과정

1. 클라이언트는 웹 서버에 HTTP 요청을 보내고, Upgrade 헤더를 포함해서 WebSocket 연결로 전환함을 나타냄

// 클라이언트 요청
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

2. 서버는 클라이언트의 요청을 확인하고, 101 Switching Protocols 응답을 반환해서 WebSocket 연결을 수락함

// 서버 응답
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

💖 Socket.IO

양방향 통신을 위해 웹소켓 기술을 활용한 라이브러리
HTML5 웹 표준 기술이 아니다. (웹소켓과는 다른 개념)
HTML5 이전의 기술로 구현된 서비스 에서 웹 소켓처럼 사용할 수 있다

What Socket.IO ?

Socket.IO is a library that enables low-latency, bidirectional and event-based communication between a client and a server.

It is built on top of the WebSocket protocol and provides additional guarantees like fallback to HTTP long-polling or automatic reconnection.

** latency : 어떠한 물리적 변화에 대한 원인과 결과 간의 지연 시간

Reference

https://kbj96.tistory.com/46
https://doozi0316.tistory.com/entry/WebSocket%EC%9D%B4%EB%9E%80-%EA%B0%9C%EB%85%90%EA%B3%BC-%EB%8F%99%EC%9E%91-%EA%B3%BC%EC%A0%95-socketio-Polling-Streaming

https://socket.io/docs/v4/#what-socketio-is