WebSocket 정리 🚀

1. WebSocket이란?

웹소켓(WebSocket)은 브라우저와 서버 간의 실시간 양방향 통신을 지원하는 프로토콜입니다.
기존 HTTP와는 달리, 한 번 연결이 맺어지면 클라이언트와 서버가 서로 자유롭게 데이터를 주고받을 수 있습니다.

---

2. 기존 HTTP와의 차이

구분	HTTP	WebSocket
연결 방식	요청 → 응답 단발성	연결 유지 (persistent)
데이터 흐름	클라이언트 → 서버 (일방향)	클라이언트 ↔ 서버 (양방향)
성능	매번 요청 시 TCP/HTTP 헤더 오버헤드 발생	최초 연결 이후에는 최소한의 프레임만 전송
활용 예	게시판, 뉴스 기사 요청	채팅, 주식 시세, IoT 제어

---

3. 동작 방식

1. Handshake

   • 클라이언트가 HTTP Upgrade 요청을 보냄
   • 서버가 승인하면 프로토콜이 ws:// (또는 wss://)로 변경
     (ws는 http, wss는 https기반 프로토콜)

   GET /socket HTTP/1.1
   Host: example.com
   Upgrade: websocket
   Connection: Upgrade
   Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
   Sec-WebSocket-Version: 13

2. 연결 유지

   • TCP 연결이 유지되며, 클라이언트 ↔ 서버 간 자유롭게 데이터 교환 가능

3. 메시지 교환

   • JSON, 텍스트, 바이너리 등 다양한 형태 가능

---

4. 사용 예시 (JavaScript)

// 연결
const socket = new WebSocket("ws://localhost:8080/socket");

// 연결 성공
socket.onopen = () => {
    console.log("연결 성공");
    socket.send(JSON.stringify({ msg: "Hello Server!" }));
};

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

// 연결 종료
socket.onclose = () => console.log("연결 종료");

// 에러 처리
socket.onerror = (err) => console.error("에러:", err);

---

5. 언제 쓰면 좋을까?

✅ 채팅 서비스 (카카오톡, Slack 같은 구조)
✅ 실시간 알림 (주식 시세, 비트코인 가격, 스포츠 경기 스코어)
✅ IoT 기기 제어 (드론, 센서, 로봇)
✅ 온라인 게임 (멀티플레이어 동기화)

---

6. 장단점

👍 장점

• 서버와 클라이언트의 실시간 상호작용 가능
• HTTP 폴링보다 네트워크 자원 절약
• 텍스트/바이너리 모두 지원

👎 단점

• 연결 유지에 따른 서버 리소스 부담
• 방화벽/프록시 환경에서 제약이 있을 수 있음
• 연결 관리 로직(끊김 복구, 재연결 등) 필요

---

7. HTTP vs WebSocket vs SSE

• HTTP (Polling) : 클라이언트가 계속 요청 (비효율적)
• SSE (Server-Sent Events) : 서버 → 클라이언트 단방향 실시간 알림
• WebSocket : 양방향, 고성능, 실시간 통신

---

8. 마무리

웹소켓은 실시간성이 중요한 서비스에 거의 표준처럼 쓰이고 있습니다.
채팅, 알림, IoT 제어 같은 기능을 구현한다면 WebSocket은 사실상 필수입니다.

“HTTP는 편지, WebSocket은 전화”

---

9. 추가

9-1. 웹소켓 연결 확인 방법 🔍

웹소켓 통신이 정상적으로 이루어지면, 브라우저 개발자 도구 → 네트워크 탭 → Socket 필터에서 상태 코드를 확인할 수 있습니다.

• 상태 코드 101 Switching Protocols

  • 의미: 클라이언트가 요청한 프로토콜을 서버가 WebSocket으로 전환을 승인했음을 나타냅니다.
  • 쉽게 말하면, HTTP → WebSocket으로 성공적으로 업그레이드 되었다는 신호입니다.

💡 TIP: 이 상태 코드가 보이면, 이제 send와 onmessage 이벤트로 실시간 양방향 통신이 가능합니다.
상태 코드가 다른 값이 나오면, 방화벽, CORS 정책, 혹은 서버 설정 문제일 수 있습니다.

---