웹 개발을 하다 보면 '실시간 통신'이라는 주제를 많이 접하게 된다. 예를 들어, 주식 프로그램을 사용할 때 새로고침을 하지 않아도 실시간으로 주가가 변동하는 경우처럼 말이다. 이때 많이 등장하는 키워드 중 하나가 바로 웹소켓(WebSocket)이다.
웹소켓은 실시간 통신을 가능하게 해준다고 하는데, 웹소켓이 무엇이고 정확히 어떤 방식으로 동작하며 왜 사용해야 할까?
1. 웹 소켓(Web Socket)이란?
 |  |
|---|
전기,전자 제품의 연결 단자를 소켓이라 한다.
웹소켓이란 웹에서 실시간으로 두 프로그램 간의 메시지 교환을 위한 통신 방법 중 하나이다.
일반적으로 브라우저는 HTTP 프로토콜을 통해 서버와 통신하는데, 이는 요청과 응답이 일회성으로 끝나는 구조이다. 하지만 채팅, 게임, 주식 시세 등 서버와 클라이언트가 계속 상호작용해야 하는 경우가 늘어나면서, 계속 연결을 유지하며 데이터를 주고받을 수 있는 프로토콜의 필요성이 증가하였다.
이런 이유로 웹소켓이 등장하였다. 간단히 말해, 브라우저와 서버가 연결된 파이프를 하나 열어두고(소켓 연결), 그 길을 통해 언제든지 자유롭게 데이터가 주고받는 방식이다.
2. 웹소켓의 특징
1️⃣ 양뱡향 통신 🔁
웹소켓은 클라이언트와 서버 어느 쪽에서든 메시지를 보낼 수 있다. HTTP처럼 '요청▶응답' 단방향이 아니라 서버에서 먼저 클라이언트로 전송하는 것도 가능
HTTP에서 서버는 전여친과 같다. 답장은 해주지만 절대 선톡은 하지 않는다.
2️⃣ 실시간 연결 ⚡
연결이 된 상태에서 끊기지 않고 유지된다. 필요할 때마다 데이터를 전송할 수 있고, 각 메시지마다 별도의 재연결이 필요하지 않다
3️⃣ 낮은 오버헤드 📉
HTTP 요청을 반복할 때마다 불필요한 헤더가 오가곤 하는데, 웹소켓은 한 번 연결을 맺으면 재연결 없이 계속 통신하므로 오버헤드가 훨씬 적다
🔔 오버헤드: 특정 기능을 수행하는데 드는 간접적인 시간 or 메모리
4️⃣ HTML5 표준 🌐
웹소켓은 HTML5에 포함된 기술이고 크롬,파이어폭스,사파리,엣지 등 대부분의 현대 브라우저에서 지원 가능
3. 웹소켓을 왜 쓸까?(웹소켓 이전의 실시간 통신)
웹소켓 이전에도 실시간으로 보이게 만들기 위해 몇 가지 방식이 시도되었다. 하지만 모두 어느 정도 한계가 있었고, 그 부족함을 메워주는 것이 웹소켓이다. 아래는 이전의 통신 방법이다.
1️⃣ 폴링(Polling)
- 동작원리
클라이언트가 주기적으로 서버에 "새 데이터 있나요?" 요청을 보냄 - 장단점
쉽지만 서버에 쓸데없는 요청이 많아 트래픽 낭비가 큼
2️⃣ 롱 폴링(Long Polling)
- 동작원리
요청을 보내놓고 서버가 응답을 늦게 보내는 방식. 새로운 데이터가 생기면 즉시 응답 - 장단점
실시간에 가까워졌지만 여전히 HTTP 요청,응답을 기반으로 한다는 한계
3️⃣ SSE(Server-Sent Events)
- 동작원리
서버에서 클라이언트로만 일방향으로 데이터를 푸시하는 방식 - 장단점
서버▶클라이언트로는 실시간 가능하다. 그러나 클라이언트▶서버 전송이 어려움
4️⃣ 웹소켓
- 동작원리
양방향으로 연결을 맺어, 언제든 서로 데이터를 보내고 받을 수 있다. - 장단점
가장 효율적이나, 연결 유지 비용과 서버/네트워크 환경 설정 등이 필요하다
위와 같이 폴링,롱 폴링,SSE는 각각의 장점이 있지만, 완전한 양방향 실시간 통신을 구현하기엔 아쉬움이 있다.
웹소켓은 서버와 클라이언트 간 연결을 항상 유지하고 서로 마음대로 데이터를 주고받을 수 있어 훨씬 유연하다.
HTML5 이전의 기술로 구현된 서비스에서는 Socket.io, SockJS와 같은 라이브러리를 쓰면 된다.
4. 웹소켓의 동작 방법
1️⃣ 초기 핸드쉐이크(Handshake)
1. 클라이언트(브라우저)가 HTTP 프로토콜을 이용해 Upgrade: websocket 헤더로 업그레이드 요청을 한다.
2. 서버가 이를 받아들일 수 있다면, 101 Switching Protocol이라는 상태 코드로 응답하며 프로토콜을 웹소켓으로 바꾼다.
이 과정을 핸드쉐이크라고 부르며, 일단 성공하면 이후에는 웹소켓 프로토콜이 적용되어 양방향 프로토콜을 웹소켓으로 바꾼다.
🔔 반드시 GET메서드를 사용해야 한다. 또한, Upgrade 정보는 서버,전송, 프로토콜 연결에서 다른 프로토콜로 업그레이드 or 변경하기 위한 규칙이다.
2️⃣ 연결 유지
연결이 맺히면 클라이언트와 서버는 언제든지 서로 메시지를 주고받을 수 있다.
아래는 Java(Spring Boot)예시이다. 먼저 WebSocketConfig를 통해 핸들러를 등록할 수 있다.
// WebSocketConfig.java
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(new MyWebSocketHandler(), "/ws") // 웹소켓 Endpoint: /ws
.setAllowedOrigins("*"); // CORS 허용
}
}
이렇게 설정 후, 실제 통신을 처리할 WebSocketHandler를 만든다.
// MyWebSocketHandler.java
public class MyWebSocketHandler extends TextWebSocketHandler {
// 클라이언트가 웹소켓 연결을 맺었을 때
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
System.out.println("새로운 웹소켓 세션 연결: " + session.getId());
// 필요하다면 세션 목록에 저장하거나, 사용자 정보를 확인하는 로직 등을 추가
}
// 클라이언트에서 텍스트 메시지를 보냈을 때
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
System.out.println("받은 메시지: " + message.getPayload());
// 수신 메시지를 가공하거나, 다른 사용자에게 전달하는 로직 등을 넣을 수 있음
// Echo 예시: 같은 메시지를 다시 클라이언트에게 보내기
session.sendMessage(new TextMessage("Echo: " + message.getPayload()));
}
// 웹소켓이 종료되었을 때
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
System.out.println("웹소켓 세션 종료: " + session.getId());
}
}
위 코드처럼 핸드쉐이크가 성공하면 afterConnectionEstablished가 호ㅓ출되어 연결을 맺은 뒤, 클라이언트가 웹소켓으로 보내온 메시지를 handleTextMessage에서 처리한다. 필요하면 다른 세션에게 메시지를 전달해 채팅 등을 구현할 수 있다.
3️⃣ 종료
- 사용자가 웹 페이지를 떠나거나, 서버 또는 클라이언트가 명시적으로 close를 요청하면 연결이 종료된다
- 네트워크 장애나 특정 타임아웃 등 여러 요인으로 인해 종료될 수 있으니 필요에 따라 재연결 로직을 구현해야 할 수도 있다.
5. 🤔 웹소켓은 현역일까?
2025년 현재, 웹소켓은 사실상 실시간 통신이 필요한 곳이라면 어디든 쓰이고 있다. 실시간 채팅/메신저, 실시간 협업 도구, 온라인 게임, IoT, 스트리밍 서비스 등 다양한 곳에 쓰인다.
다만 통신 환경이나 사용 사례에 따라 직접 대체하는 기술이 꾸준히 발전하고 있다.
- SSE(Server-sent Events)
- 한방향(서버▶클라이언트)으로 실시간 이벤트를 전달해야할 때 간단하게 사용할 수 있다.
- WebRTC
- 주로 P2P 기반의 미디어 스트리밍 및 데이터 전송을 위해 사용되는 프로토콜
- 단순 텍스트 메시지 교환도 가능하지만, 복잡한 초기 연결 설정(시그널링) 과정이 필요해 일반적인 실시간 웹 앱과는 용도가 조금 다르다
- WebTransport
- 비교적 최근부터 관심을 받고 있는 기술로, 표준화가 진행중이고 웹 브라우저에서 실험저긍로 지원되기도 한다.
- UDP 기반의 단일,다중 스트림을 통해 낮은 레이턴시를 목표로 한다.
- 아직 완전히 보편화된 기술은 아니지만, 대규모 실시간 스트리밍이나 게이밍같은 저지연이 필요한 분야에서 점차 도입될 예정이다.
🔔 UDP(User Datagram Protocol): 인터넷에서 컴퓨터 간에 데이터를 주고받을 때 사용되는 프로토콜. 보안과 신뢰성보다는 전송 속도와 효율성을 중시하는 경우에 사용
- gRPC-Web
- gRPC를 웹 환경에서 사용할 수 있게 만든 방식으로, HTTP/2 스트리밍을 활용한다
- 브라우저 단에서 gRPC를 직접 지원하지 않기 때문에 프록시를 통한 호환 계층이 필요한 경우가 많음
🔥 결론
실시간이라는 키워드가 떠오른다면,
양방향 통신이 필요하다면,
WebSocket을 쓰자!
