ACC라는 동아리에서 인프라 중심의 해커톤에 참여하게 되었다. 우리 팀은 채팅 시스템을 구현하는 주제를 맡았는데 이제까지 개발해오던 거랑은 달라서 생각보다 공부해야 할 부분이 많다. 그중에 채팅시스템을 구현하기 위해서는 웹소켓이라는 프로토콜을 사용한다.
Websocket이란?
서버와 클라이언트 간의 메시지 교환을 위한 통신 규약(프로토콜)
WebSocket 특징
- 양방향 통신 (Full-Duplex) 데이터 송수신을 동시에 처리 가능!! 즉, 클라이언트와 서버 모두 오랫동안 지속되는 연결을 통해 동시에 데이터를 보내고 받을 수 있다.
- 실시간 네트워킹 (Real Time Networking) 웹 환경에서 연속된 데이터를 빠르게 노출하는 것, HTTP 폴링보다 오버헤드가 적기 때문에 애플리케이션에 실시간 기능에 대한 여러 이점을 제공
웹 소켓이 나오기 전까지의 통신 방식
Polling: 일정한 주기로 서버에 요청(Request)을 보내는 방법.
Long Polling: 요청을 보냈을 때, 서버가 응답을 바로 보내지 않고 특정 이벤트나 타임아웃이 발생했을 때 응답을 전달하는 방식
Streaming: 이벤트가 발생했을 때 응답을 내려주되, 응답을 완료시키지 않고 계속 연결을 유지하는 방식.
HTTP vs socket 통신
- HTTP통신
- http통신을 통해 클라이언트에서 서버로 요청을 보내고 서버가 응답하는 방식으로 통신이 이루어진다.
- JSON, Image, HTML 파일 등 다양한 파일을 전송 받을 수 있다.
- 응답을 받은 후 Connection이 끊어지는 것이 기본 동작이다. (필요하면 Keep Alive옵션을 주어 일정 시간동안 Connection을 유지하는 것이 가능하다)
- socket통신
- 소켓이라는 단어가 두 프로그램이 서로 데이터를 주고 받을 때 양쪽에 생성되는 통신 단자이다.
- 서버와 클라리언트가 양방향 연결이 이루어지는 통신. 서로에게 데이터 전달이 가능하다.
- 계속해서 Connection을 들고 있어 스트리밍이나 실시간 채팅 등 실시간으로 데이터를 주고 받아야 하는 경우 사용 적합하다.
지속적인 연결을 유지하여 실시간 채팅을 구현⇒ socket통신을 선택
webSocket vs socket.io
- webSocket
- HTML5 표준안의 일부 기술
- 소켓을 이용하여 서버와 클라이언트 사이에서 자유롭게 데이터를 주고 받는 양방향 통신을 가능하게 한다.
- 매우 빠르게 작동하며 통신할 때 아주 적은 데이터를 이용, 이벤트를 단순히 듣고 보내는 것만 가능
- socket.io
- 표준 기술이 아니고 라이브러리
- node.js기반으로 만들어진 기술, 자바스크립트로 구현되어있으며 현존하는 대부분의 실시간 웹 기술들을 추상화해 놓아 브라우저 종류에 상관없이 실시간 웹 구현할 수 있도록 한 기술
- 방 개념 이용해 일부 클라이언트에게만 데이터 전송하는 브로드캐스팅 가능
서버에서 연결된 소켓(사용자)들을 세밀하게 관리해야하는 서비스인 경우에는 Broadcasting 기능이 있는 socket.io을 쓰는게 유지보수 측면에서 훨씬 이점이 많습니다.
데이터 전송이 많은 경우는 빠르고 비용이 적은 표준 WebSocket을 이용하는 게 바람직하다고 한다.
Websocket 동작 원리
🤝 Handshake
Opening Handshake 와 Closing Handshake 는 일반적인 HTTP TCP 통신의 과정 중 하나이다.
접속 요청은 HTTP 로 한 뒤, 웹소켓 프로토콜로 변경된다. (WS)
웹소켓 프로토콜로 변경되기 위한 HTTP 헤더는 아래처럼 구성되어 있다.
[요청]
GET /spring-websocket-portfolio/portfolio HTTP/1.1
Host: localhost:8080
Upgrade: websocket ---- 1
Connection: Upgrade ---- 2
Sec-WebSocket-Key: Uc9l9TMkWGbHFD2qnFHltg==
Sec-WebSocket-Protocol: v10.stomp, v11.stomp
Sec-WebSocket-Version: 13
Origin: http://localhost:8080- Upgrade 헤더
- Upgrade connection 사용
위와 같은 요청을 받은 웹 소켓을 지원하는 서버는 일반적으로 200 상태 코드 대신에 101 상태코드를 반환한다
[응답]
HTTP/1.1 101 Switching Protocols ---- 1
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: 1qVdfYHU9hPOl4JYYNXF623Gzn0=
Sec-WebSocket-Protocol: v10.stomp🤝 Data Transfer
Opening HandShake에서 승인이 나고나면,
웹 소켓 프로토콜로 노란색 박스 부분인 Data transfer 이 진행된다.
여기서 데이터는 메시지라는 단위로 전달된다.
