웹 소켓이란?

🌐 웹소켓(WebSocket) 이란?

WebSocket은 서버와 클라이언트가 지속적으로 양방향 통신(Full-Duplex)을 할 수 있는 프로토콜입니다.
기존의 HTTP 기반 통신 방식과 달리, 한 번 연결을 맺으면 지속적으로 데이터를 주고받을 수 있는 방식이 특징입니다.

---

🚀 1. 왜 웹소켓이 필요할까?

기존 HTTP 방식에서는 요청(Request) → 응답(Response) 구조를 사용하여 클라이언트가 요청해야만 서버가 응답할 수 있습니다.
하지만 실시간 데이터 교환(예: 채팅, 게임, 주식 시세, IoT, 라이브 스트리밍)이 필요한 경우에는 HTTP 방식으로 처리하기 어렵습니다.

❌ 기존 HTTP 방식의 문제점

• Polling (폴링)
  • 일정 간격마다 서버에 요청을 보내는 방식 (ex: 1초마다 GET 요청)
  • 불필요한 네트워크 요청이 많아지고 서버 부하 증가
• Long Polling (롱 폴링)
  • 클라이언트가 요청을 보내면, 서버는 새로운 데이터가 생길 때까지 응답을 지연시킴.
  • Polling보다 효율적이지만, 여전히 HTTP 연결을 반복적으로 설정해야 함.
• SSE(Server-Sent Events)
  • 서버에서 클라이언트로 일방향 스트리밍을 지원하는 방식.
  • 서버 → 클라이언트 방향의 실시간 데이터만 가능하고, 클라이언트 → 서버의 실시간 데이터 전송은 불가능.

💡 웹소켓은 이러한 문제를 해결하기 위해 등장했습니다!

---

⚡ 2. 웹소켓(WebSocket)의 특징

✅ Full-Duplex (양방향 통신 가능)

• 클라이언트와 서버가 동시에 데이터를 주고받을 수 있음
• HTTP처럼 매번 요청-응답을 반복할 필요 없음

✅ 한 번의 연결만으로 지속적인 데이터 전송 가능

• HTTP는 요청마다 새로운 연결을 설정해야 하지만,
  웹소켓은 한 번 연결하면 유지(Connection Persistent)

✅ 헤더가 적어 네트워크 오버헤드가 적음

• HTTP 요청에는 큰 헤더가 포함되지만,
  웹소켓 프레임은 크기가 작아 데이터 전송이 빠름

✅ 실시간 데이터 전송이 필요할 때 적합

• 채팅, 게임, 주식 시세, IoT, 스트리밍 등에 적합

---

🔄 3. 웹소켓 연결 과정 (Handshake)

웹소켓은 초기에는 HTTP 요청을 사용해 연결을 맺고, 이후에는 웹소켓 프로토콜로 전환됩니다.

📌 웹소켓 핸드셰이크 과정 1️⃣ 클라이언트 → 서버: WebSocket Upgrade 요청 (HTTP 요청 전송)

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

• Upgrade: websocket → 웹소켓으로 프로토콜 변경 요청
• Connection: Upgrade → 연결 업그레이드 요청
• Sec-WebSocket-Key: 보안을 위한 키

2️⃣ 서버 → 클라이언트: WebSocket Upgrade 응답

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

• 서버가 요청을 승인하고 프로토콜을 웹소켓으로 전환
• 이후부터는 웹소켓 프레임(WebSocket Frame)으로 통신

---

🛠 4. 웹소켓 예제 (JavaScript)

✅ (1) 웹소켓 클라이언트 (JavaScript)

// 웹소켓 서버에 연결
const socket = new WebSocket("ws://localhost:8080");

// 연결 성공 시 실행
socket.onopen = function(event) {
    console.log("WebSocket 연결 성공!");
    socket.send("Hello, Server!"); // 서버로 데이터 전송
};

// 서버로부터 메시지를 받을 때 실행
socket.onmessage = function(event) {
    console.log("서버로부터 데이터 수신: " + event.data);
};

// 연결 종료 시 실행
socket.onclose = function(event) {
    console.log("WebSocket 연결 종료");
};

// 오류 발생 시 실행
socket.onerror = function(error) {
    console.error("WebSocket 오류 발생:", error);
};

---

✅ (2) 웹소켓 서버 (Node.js + ws)

📌 Node.js에서 웹소켓 서버 구현 (ws 라이브러리 사용)

const WebSocket = require('ws');

// 포트 8080에서 웹소켓 서버 실행
const wss = new WebSocket.Server({ port: 8080 });

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

    // 클라이언트로부터 메시지를 받으면 실행
    ws.on('message', (message) => {
        console.log(`클라이언트로부터 메시지 수신: ${message}`);
        ws.send(`서버 응답: ${message}`);
    });

    // 연결 종료 시 실행
    ws.on('close', () => {
        console.log('클라이언트 연결 종료');
    });
});

console.log("웹소켓 서버가 8080 포트에서 실행 중...");

✔ 클라이언트가 웹소켓 서버(ws://localhost:8080)에 연결하면,
✔ 서버가 메시지를 수신하고 응답을 보냄.
✔ 연결이 끊기지 않고 지속적으로 데이터 주고받기 가능 ✅

---

📌 5. 웹소켓 vs 기존 HTTP 방식 비교

비교 항목	HTTP	WebSocket
연결 방식	요청-응답 방식 (단방향)	지속적인 연결 유지 (양방향)
연결 유지	요청마다 새 연결 생성	한 번 연결 후 유지
데이터 전송	요청이 있어야 응답 가능	클라이언트/서버 모두 전송 가능
헤더 크기	큼 (HTTP 헤더 포함)	작음 (WebSocket 프레임)
실시간성	낮음 (지연 발생)	높음 (빠른 응답)
사용 사례	일반 웹 페이지, API 호출	채팅, 게임, 주식, 실시간 스트리밍

💡 즉, 웹소켓은 HTTP보다 실시간성이 중요한 경우(채팅, 게임 등)에 유리합니다!

---

🏆 6. 웹소켓의 활용 사례

📌 웹소켓이 가장 효과적인 경우
✔ 실시간 채팅 (WhatsApp, Slack, Messenger)
✔ 온라인 게임 (멀티플레이어 게임, FPS, MMORPG)
✔ 주식 거래 시스템 (실시간 가격 변동)
✔ IoT(Internet of Things) (센서 데이터 전송, 원격 제어)
✔ 라이브 스트리밍 (트위치, 유튜브 라이브, 스포츠 중계)

---

🎯 7. 결론

✔ WebSocket은 서버와 클라이언트가 지속적으로 양방향 통신을 할 수 있는 프로토콜
✔ HTTP 요청 없이도 서버에서 클라이언트로 데이터를 푸시할 수 있음
✔ 네트워크 오버헤드가 낮고, 빠른 실시간 통신이 가능함
✔ 채팅, 게임, 실시간 데이터 처리 등에 최적화됨

 

🚀 즉, 웹소켓은 HTTP보다 실시간성이 필요한 애플리케이션에 최적화된 프로토콜입니다! 😊