웹소켓이란?

hodu·2022년 11월 4일
0

dev

목록 보기
3/5

https://youtu.be/yXPCg5eupGM
(코딩애플) 오늘의 테크용어 : 웹소켓이 뭐냐면

위 영상을 본 뒤 웹소켓 통신을 조사하여 정리한 글입니다.


서버와 유저가 데이터를 주고받기 위해서는 가장 기초적인 방법은 http 통신이 있다.

유저가 서버에게 서버가 가진 데이터를 보기 위해서는 http 요청을 하게되고, 서버는 데이터를 보내준다.

이 방법은 유저가 먼저 요청을 해야만 데이터를 받을 수 있다.

과거에는 http 요청만으로도 모든 웹서비스를 만들 수 있었으나, 실시간으로 데이터를 주고받는 채팅, 주식, 코인 등 다양한 서비스들이 나오게 되면서 http 요청 방법의 비효율이 드러나기 시작했다.

주식 가격을 2초마다 업데이트 한다고 쳤을 때,

유저는 서버에게 2초마다 "보내줘!"라는 요청을 보내야하고,
그때마다 서버는 유저에게 "데이터"를 보내주어야 한다.

굳이 요청하지 않아도 데이터를 보낼 수 있는 방법이 있지 않을까?

HTTP 방식을 이용하여 실시간 데이터를 받아오기

1. Polling

클라이언트가 주기적으로 서버에 요청을 보내 새로운 데이터가 있는지 확인하는 방식이다.
Polling 방식은 새로운 정보가 없을 때에도 요청을 보내기 때문에 서버에 부담을 주고 실시간으로 빠르게 데이터를 확인하기 어렵다.

2. Long-Polling

Polling 방식과 유사하나 서버에 새로운 데이터가 생길 때까지 요청이 유지됨.
데이터가 준비되면 서버측에서 응답을 보내고 클라이언트는 응답을 받은 즉시 새 요청을 보내서 대기상태를 유지한다.
Polling 방식과 마찬가지로 서버에 부하를 주고 응답을 받고 새 요청을 보내는 짧은 기간동안 데이터 유실 문제가 있을 수 있음.

3. SSE(Server-Sent Event)

서버에서 데이터를 보내는 형태이다.
서버는 HTTP 응답 헤더에 Content-Type: text/event-stream을 작성하여 보내게 되면 연결이 끊기지 않고 유지되는데 이 방법을 통해 서버가 새로운 정보를 실시간으로 보낼 수 있게 된다.
하지만 "단방향"이며 클라이언트측에서 데이터를 전송할 수 없어 이 방법도 마찬가지로 양방향성을 띄진 않는다.

드디어 등장한 WebSocket

웹소켓은 2011년 HTML5의 일부로 공식적으로 표준화되었다.
위에서 작성한 Polling, Long-Polling은 모두 HTTP 통신을 통해서 "양방향성"처럼 보이도록 구현한 것이다.

웹소켓은 HTTP 통신과 다른 독립적인 프로토콜로 처음엔 HTTP 요청을 통해 시작되며, 연결이 완료되면 실시간/양방향 통신이 가능하게 된다.

작동원리

1. 핸드셰이크(Handshake) 단계

  • 연결 초기화: 클라이언트가 서버에게 HTTP 요청을 보내면서 시작되는데, 이 요청에는 Upgrade:websocket이라는 헤더가 포함되어 있음
  • 서버 응답: 서버가 해당 요청을 받은 뒤 웹소켓 연결을 지원하는 경우 101 Switching Protocol 상태코드와 함께 HTTP 응답을 보낸 뒤 웹소켓 프로토콜로 전환함

2. 데이터 전송

  • 데이터는 프레임(frame) 이라는 단위로 전송되는데, 이 프레임들이 모여 하나의 메세지를 구성하게 된다.
  • 이 프레임에는 다음과 같은 형태의 데이터들이 들어간다.
    • 텍스트 데이터:UTF-8로 인코딩된 텍스트 메세지/JSON, XML
    • 이진 데이터: 이미지, 오디오, 비디오파일
    • 제어 프레임: 연결 관리를 위한 특수 프레임(Ping, Pong, Close)
    • 분할된 메세지: 용량으로 인해 텍스트 데이터에 담을 수 없는 메세지를 분할함

웹소켓 연결 후에는 이러한 데이터 프레임을 자유롭게 보낼 수 있게 함

3. 연결 유지

  • 지속적 연결: 명시적으로 종료하지 전까지 지속됨
  • Heartbeats: 연결이 활성 상태인지 확인하기 위해 주기적으로 Ping-Pong 메세지를 교환함

4. 연결 종료

  • 클라이언트/서버 측에서 종료 프레임을 전송하여 상대방에게 연결 종료를 알림
  • 비정상적으로 연결이 끊어지게 될 경우도 있으나 이때는 개발자가 재연결 매커니즘을 구현하는게 좋음

웹소켓은 이러한 방식으로 동작하여 웹 애플리케이션에 실시간, 양방향 통신 기능을 제공한다. 이는 특히 실시간 채팅, 멀티플레이어 게임, 실시간 데이터 스트리밍 등에 유용하게 사용됨.

profile
안녕 세계!

0개의 댓글