← Log

웹소켓의 기본 개념과 통신 과정

Cola Chat 익명 채팅 개발기· 2 / 7
  1. 1 — Cola Chat — 익명 채팅 프로젝트 소개
  2. 2 — 웹소켓의 기본 개념과 통신 과정
  3. 3 — Socket.IO 웹소켓 세팅
  4. 4 — 채팅방 입장/퇴장 처리 로직
  5. 5 — 실시간 메시지 전송과 수신
  6. 6 — 실시간 사용자 온라인 상태 관리
  7. 7 — 프로젝트 배포와 점검

실시간 채팅 기능을 구현할 수 있는 다양한 통신 방식이 있지만, 그중 가장 보편적으로 사용되는 프로토콜은 WebSocket이다.

사실 채팅 기능을 개발해보는 이유도 이 WebSocket을 사용해보기 위해서이기도 하다.

개발에 앞서 WebSocket이 무엇인지와 특징을 살펴보자.

WebSocket

웹소켓(WebSocket)은 클라이언트와 서버가 실시간으로 데이터를 주고받을 수 있도록 양방향 통신을 지원하는 프로토콜이다.

HTTP 통신과는 다르게 ‘요청-응답’ 패턴이 하나의 과정으로 강제되지 않으며, 서버는 클라이언트의 요청 없이도 독립적으로 클라이언트에게 데이터를 보낼 수 있다. (그렇다고 특정 요청에 대한 응답을 하지 못하는 것은 아니다.)

웹소켓 프로토콜의 **<특징>**을 나열하면 다음과 같다.

  • 양방향 통신: 클라이언트와 서버 간에 독립적으로 실시간으로 데이터를 주고받을 수 있다.
  • 지속적인 연결: 한 번 연결이 성립되면 클라이언트와 서버는 지속적으로 연결을 유지하며 데이터를 주고받을 수 있다.
  • 낮은 오버헤드: HTTP와 달리 매번 새로운 연결을 생성하지 않아 네트워크 오버헤드가 적다.
  • 빠른 데이터 전송: 연결된 상태에서 즉시 데이터를 전송할 수 있어 지연 시간이 최소화된다.

통신 과정

웹소켓의 통신 과정은 다음 네 단계로 이루어진다.

핸드셰이크 서버응답 메세지 전송 연결 종료

핸드셰이크

클라이언트는 서버에 웹소켓 프로토콜 연결을 요청하는 HTTP 요청을 보낸다. 이때 header에는 다음과 같은 내용이 포함되어야 한다.

GET /chat HTTP/1.1
# 서버 호스트
Host: example.com
# 현재의 연결을 업그레이드할 것임을 명시
Connection: Upgrade
# 업그레이드할 프로토콜
Upgrade: websocket
# 랜덤 문자열(클라이언트 식별용)
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
# 클라이언트가 지원하는 웹소켓 프로토콜 버전
Sec-WebSocket-Version: 13

# Upgrade한다고 하여 HTTP 프로토콜을 WS으로 '변환'하는 것이 아니라, 핸드셰이크 후 새로운 웹소켓 연결을 생성하는 것일 뿐이다.

서버 응답

클라이언트의 요청을 수신하고 연결을 수락할 경우 101 Switching Protocols 응답을 보낸다. 이때도 마찬가지로 다음과 같은 내용이 header에 포함되어야 한다.

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
# Sec-WebSocket-Key를 기반으로 생성한 식별 토큰
Sec-WebSocket-Accept: HSm4Kz4h0zTvh3cv3p8HwiGNrXY=

메세지 전송

클라이언트와 서버는 프레임 단위로 메시지를 주고받는다.

연결 종료

클라이언트 또는 서버가 연결을 종료하고자 할 경우, CLOSE 프레임을 전송하여 종료 요청한다.

목차