웹소켓이란?

웹소켓은 클라이언트와 서버간에 실시간 양방향 통신을 가능하게 하는 통신 프로토콜이다.

• 기존 HTTP는 요청/응답 기반 -> 클라이언트가 먼저 요청해야만 서버가 응답
• 반면, 웹소켓은 한 번 연결을 맺으면, 양쪽에서 자유롭게 데이터 전송 가능

즉, 끊임없이 데이터를 주고받을 수 있는 실시간 통신 채널이다.

❓ 왜 웹소켓이 필요할까?

HTTP의 한계

• 실시간 알림, 채팅, 게임처럼 지연 없는 통신이 중요한 서비스에선 HTTP로는 부족하다.
• HTTP는 요청할 때마다 새로 연결 -> 비효율적

웹소켓의 장점

• 연결 유지: 한 번 연결하면 계속 유지

• 양방향 통신: 서버 → 클라이언트로도 데이터 push 가능

• 지연 시간 낮음: 오버헤드 적고 실시간 처리에 적합

📦 웹소켓 동작 방식

1. 클라이언트가 WebSocket 객체를 사용해 연결 요청

2. 서버가 101 Switching Protocols 응답 → 프로토콜 전환

3. 이후 TCP 기반으로 양방향 통신 가능

4. 클라이언트와 서버가 서로 메시지를 주고받을 수 있음

const socket = new WebSocket("wss://example.com/chat");

socket.onopen = () => {
  socket.send("Hello Server!");
};

socket.onmessage = (event) => {
  console.log("Message from server: ", event.data);
};

💬 웹소켓 사용 예시

• 💬 실시간 채팅

• 📈 실시간 주식, 암호화폐 가격

• 🎮 온라인 멀티플레이 게임

• 🔔 실시간 알림

• 📄 공동 문서 편집

⚠️ 웹소켓 사용 시 주의할 점

• ❗ 서버와의 연결 관리 필수 (끊김 감지, 재연결 처리 등)

• 🔐 보안을 위해 wss://(HTTPS 기반) 사용 권장

• 🌐 브라우저 호환성은 높지만 프록시나 방화벽 환경에서 차단될 수 있음

• 🚫 Mixed Content 문제: HTTPS 페이지에서 ws:// 연결 시 차단됨