[WebSocket] 채팅부터 알림까지, 실시간 웹의 기반

728x90

WebSocket 

HTTP로는 실시간 채팅, 알림 서비스 등을 구현하기 어렵다는 얘기를 들어본 적 있으신가요? 그럴 때 등장하는 기술이 바로 WebSocket입니다. WebSocket은 웹에서 클라이언트(브라우저)와 서버가 끊기지 않는 연결 상태를 유지하며 양방향으로 실시간 통신할 수 있게 해주는 프로토콜입니다.

이 글에서는 WebSocket의 기본 개념, HTTP와의 차이점, 동작 방식, 예제 코드, 활용 사례까지 정리해드립니다.

 

---

1.  WebSocket이란?

WebSocket은 클라이언트와 서버 간에 지속적인 양방향 통신이 가능한 프로토콜입니다. 초기 연결은 HTTP로 시작되지만, 이후 WebSocket 프로토콜로 업그레이드되어 풀-듀플렉스 통신을 제공합니다.

WebSocket과 HTTP, 뭐가 다른가요?

항목	HTTP	WebSocket
통신 방식	요청-응답(Request-Response)	양방향 통신 (Full-Duplex)
연결 유지	요청마다 새로 연결	연결 유지(Persistent Connection)
실시간성	낮음 (폴링/롱 폴링 필요)	높음
헤더 오버헤드	큼	작음
주 사용 용도	웹 페이지 로딩, API 요청	채팅, 알림, 실시간 데이터 등

 

---

2.  WebSocket 동작 흐름

a.  클라이언트 → 서버 : HTTP 요청으로 업그레이드 요청

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: xxxxx
Sec-WebSocket-Version: 13

b.  서버 → 클라이언트 : 업그레이드 응답

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: yyyyy

c.  클라이언트 ↔ 서버 (연결 성립 후) : 실시간 양방향 데이터 교환

 

 

---

3.  간단한 예제 (Node.js + ws)

서버 코드

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('클라이언트 연결됨');

  ws.on('message', (message) => {
    console.log(`클라이언트 메시지: ${message}`);
    ws.send(`서버 응답: ${message}`);
  });

  ws.send('서버에 연결되었습니다!');
});

클라이언트 코드 (브라우저 JS)

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = () => {
  console.log('서버 연결 완료');
  socket.send('안녕하세요 서버!');
};

socket.onmessage = (event) => {
  console.log('서버로부터 메시지:', event.data);
};

 

---

4.  WebSocket이 유용한 상황

• 💬 실시간 채팅 (카카오톡, 슬랙 등)
• 🔔 실시간 알림 (SNS, 쇼핑몰 알림)
• 📈 실시간 데이터 대시보드 (주식, 환율, 서버 모니터링 등)
• 🕹️ 온라인 게임 (멀티플레이 통신)
• 🧭 실시간 위치 공유 (택시 앱, 배달 추적 등)

 

---

5.  WebSocket의 한계와 주의사항

• 연결 수가 많아질수록 서버 부하가 많아집니다. → 스케일링 고려 필요
• 브라우저 호환성은 대부분 좋지만, 방화벽이나 프록시에서 차단될 수 있습니다.
• HTTP보다 복잡한 인증 처리가 필요합니다. → JWT, 토큰 방식 활용

WebSocket을 대체/보완하는 기술

• SSE (Server-Sent Events) : 서버 → 클라이언트 단방향 실시간 전송
• Socket.IO : WebSocket을 내부적으로 사용하면서 fallback, 인증, reconnect 등 지원
• WebRTC : P2P 기반 실시간 통신 (영상/음성에 최적화)
• MQTT : IoT에 특화된 경량 메시징 프로토콜

 

---

6.  마무리

키포인트	설명
프로토콜	클라이언트-서버 간 지속적 양방향 통신
시작 방식	HTTP → WebSocket으로 업그레이드
장점	실시간성, 헤더 오버헤드 적음, 빠른 반응
단점	서버 부하 관리, 인증 처리, 연결 유지 비용
활용 예	채팅, 알림, 실시간 대시보드, 온라인 게임

함께 보면 좋은 자료

외부 사이트 :

• MDN Web Docs - WebSocket

블로그 글 :

[프로토콜] 컴퓨터 세상에서의 약속과 규칙

[WebRTC] 화상회의·음성채팅을 위한 웹 기반 실시간 기술

[WebSocket과 WebRTC] 실시간 통신, 어떤 기술을 써야 할까?

 

---

반응형