Introduce
이전에 Socket에 대하여 알아보았고, Socket과 WebSocket 이 둘은 비슷해 보이지만 엄연히 다른 개념이라고 소개하였습니다.
이제 WebSocket에 대해 알아보는 시간을 가지려고 합니다.
WebSocket이 무엇인가요?
WebSocket은 Socket과 IP Adress와 Port Number로 통신한다는 점에서는 같지만, 분명한 차이가 있습니다.
웹 브라우저는 HTTP Protocol을 준수하기 때문에 단방향 통신만 가능합니다.
그래서 Socket처럼 connection을 유지하는 양방향 통신을 사용할 수 없습니다.
물론 HTTP Protocol 만으로도 실시간 통신이 가능한 것처럼 보이게 할 수는 있지만, 여러가지 한계로 인해 WebSocket이 등장하였습니다.
즉, WebSocket은 웹 브라우저에서 양방향 통신을 하기 위한 통신 방법입니다.
WebSocket의 특징
- 양방향 통신
- 데이터 송수신을 동시에 처리 가능합니다.
- Client와 Server가 원할 때 데이터 송수신이 가능합니다.
- 실시간 네트워킹
- 전화, WebRTC, 텔레비전 서비스, 웹 기반의 푸시 투 토크 기능을 포함한 화상 통화 분야 등의 스트리밍 미디어를 수반하는 통신, 엔터테인먼트 시스템에 사용 되고 있습니다.
- 여러 Device에 데이터 송수신이 가능합니다.
WebSocket의 동작원리
HandShaking
처음 Browser에서와 Server를 연결해주는 것을 Handshake라고 합니다.
연결 수립 과정에서는 HTTP Protocol을 사용하고, HTTP Protocol 위에서 HandShaking 하기 때문에 HTTP Header를 사용합니다.
다음은 연결 수립을 요청할 때 보내는 Header입니다.
GET/chst HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhllHNhbXbsZSbid2Sjdx==
Origin: http://example.com
Sec-WebScoket-Protocol: chat, superchat
Sec-WebSocket-Version: 13위에서 부터 하나하나 뜯어보면 GET 메서드를 사용하고 HTTP 버전이상이어야 합니다.
Host: 웹 소켓 서버의 주소
Upgrade: 현재 Protocol에서 다른 Protocol로 업그레이드 또는 변경 하기 위한 규칙
Connection: Upgrade 헤더 필드가 명시되어 있으면 Upgrade 옵션을 지정한 Connection 헤더 필드도 전송
Sec-WebSocket-key: 클라이언트와 서버간 신원을 인증
Origin: 클라이언트의 주소
Sec-WebSocket-Protocol: 서브 Protocol을 의미하며 서버에서 지원하는 Protocol을 반환
다음은 응답 부분입니다.
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket_accept: ssSVLWEfK41Wm5wOun57LsSVaD0=101 Switching Protocols이 응답으로 오면 Socket이 정상적으로 연결되었다는 의미입니다.
Upgrade: 현재 Protocol에서 다른 Protocol로 업그레이드 또는 변경 하기 위한 규칙
Connection: Upgrade 헤더 필드가 명시되어 있으면 Upgrade 옵션을 지정한 Connection 헤더 필드도 전송
Sec-WebSocket-key: 클라이언트와 서버간 신원을 인증
Data Transfer
HandShaking이 완료되면 ws 또는 wss(데이터 보안을 위해 SSL을 적용한 프로토콜) 프로토콜로 변경됩니다.
- Message: 여러 Frame이 모여 구성하는 하나의 논리전 단위
- Frame: Communication에서 가장 작은 단위의 데이터(작은 헤더 + Payload) -> 기존 무거운 헤더의 단점을 해소
- 데이터는 UTF-8 인코딩입니다. (ex: 0x00 (Data) 0xff)
Frame의 헤더 구조
Frame의 헤더 구조는 전송하는 Data의 크기에 따라 다르며 126byte 이하일 경우의 헤더 구조를 살펴보려고 합니다.
- FIN (END) : 이 프레임이 전체 메시지의 끝인지 나타내는 플래그
- OPCODE : 이 프레임이 어떤 용도로 사용될지 알려줌
- Continue (0x0) : 전체 메시지의 일부임을 의미
- Text (0x1) : 포함된 데이터가 UTF-8 텍스트라는 의미
- Binary (0x2) : 포함된 데이터가 이진 데이터라는 의미
- close (0x8) : Close 핸드쉐이크를 시작한다는 의미
- Length : 이 프레임에 포함된 데이터의 총 길이를 나타내는 단위
- RSV 1~3 : 프로토콜 별로 사용할 수도 있고 사용할 수도 있지 않은 것들이다.
핸드 쉐이크도 완료되었고, 이로인한 데이터 양방향 전송도 모두 완료 되었다면 이제는 연결 종료해야 한다.
연결 종료 할 때는 Close Frame을 주고 받으며 종료한다.
Close HandShake
Clost Frame을 주고 받으면서 연결을 종료합니다.
Client 쪽에서 Network가 끊기는 경우가 Mobile Application에서는 충분히 일어날 수 있는 일이기 때문에 정상적으로 종료됐는지 확인할 필요가 있습니다.
WebSocket의 동작원리 정리
WebSocket의 한계
- HTML5 이전의 기술로 구현된 서비스에서는 WebSocket이 지원하지 않습니다.
- 이전에 나온 Polling, Long Polling, Streaming 방식에 비해 구현이 복잡합니다.
- 항상 연결을 유지해야하면 연결이 비정상적으로 끊기게 되는 경우에 대한 대안이 필요합니다.
WebSocket의 한계에 대한 대안
위와 같은 한계를 보완하기 위해 나온 라이브러리가 바로 Socket.io 와 Sock.js 입니다.
이는 HTML5 이전에 구현된 환경에서 WebSocket처럼 사용할 수 있게 도와주는 기술입니다.
웹 브라우저와 웹 서버의 종류와 버전을 파악하여 가장 적합한 기술을 사용합니다.
끝
이것으로 Socket과 WebSocket의 차이에 대한 세미나를 마치도록 하겠습니다.
