웹 서비스 개발 – 웹 소켓 – 1 – 웹 소켓 서버 구축

작성자 wooah
웹 서비스 개발 - 웹 소켓 - 1 - 웹 소켓 서버 구축
웹 서비스 개발 – 웹 소켓 – 1 – 웹 소켓 서버 구축

웹 서비스 개발 – 웹 소켓 – 웹 소켓 개념과 동작 원리

안녕하세요~ 😊
오늘은 웹 기술의 새로운 가능성을 열어주는 **웹 소켓(WebSocket)**에 대해 알아보는 시간을 가져보려고 해요!

기존의 HTTP 통신만으로는 한계가 있었던 실시간 데이터 전송을 손쉽고 효율적으로 처리할 수 있게 해주는 주인공이 바로 이 웹 소켓입니다.

마치 전화기를 들고 끊지 않고 계속 대화할 수 있는 것처럼,
웹 소켓은 한 번 연결되면 끊기지 않고 양방향으로 소통할 수 있어요! 📞💬

1. 웹 소켓(WebSocket)이란?

웹 소켓은 실시간 양방향 통신을 가능하게 하는 프로토콜이에요.

기존 HTTP는 요청이 있어야만 응답이 가능한 단방향 방식이지만,
웹 소켓은 서버와 클라이언트가 한 번 연결되면, 실시간으로 계속 주고받을 수 있어요.

즉, 웹 소켓은 **”끊지 않는 HTTP”**처럼 작동하죠!

2. 웹 소켓의 동작 원리

웹 소켓은 다음과 같은 흐름으로 동작합니다.

✅ 1. 핸드셰이크(HandShake)

  • 웹 소켓은 처음에 HTTP 요청을 보내서 연결을 시도해요.
  • 이 요청에 서버가 웹 소켓 업그레이드를 허락하면 연결이 웹 소켓으로 전환됩니다.
GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: xxxxx
Sec-WebSocket-Version: 13

→ 서버가 이를 수락하면 101 Switching Protocols 응답을 보내고, 연결이 전환돼요.

✅ 2. 연결 유지

  • 연결이 유지되며 클라이언트와 서버가 자유롭게 메시지를 주고받을 수 있어요.
  • 이때는 추가적인 HTTP 헤더 없이, 가볍고 빠른 이진 또는 텍스트 프레임이 오갑니다.

✅ 3. 연결 종료

  • 어느 쪽이든 원하면 연결을 종료할 수 있어요. (예: 사용자가 채팅창 닫기)

3. 웹 소켓 vs HTTP

항목 HTTP WebSocket
연결 방식 요청/응답 지속 연결
통신 방향 클라이언트 → 서버 (단방향) 클라이언트 ↔ 서버 (양방향)
속도 느림 (매번 요청 필요) 빠름 (연결 유지)
실시간 처리 어려움 (폴링 필요) 탁월함
사용 예 웹 페이지, API 호출 채팅, 게임, 주식 시세, 실시간 알림 등

웹 소켓은 실시간이 필요한 모든 서비스에서 진가를 발휘해요!

4. 웹 소켓이 필요한 상황은?

  • ✅ 실시간 채팅 서비스 (예: 카카오톡 웹버전)
  • ✅ 실시간 주식 시세/암호화폐 가격 표시
  • ✅ 온라인 멀티플레이 게임
  • ✅ 실시간 알림(푸시 알림)
  • ✅ IoT 센서 데이터 실시간 수집

기존 HTTP 방식으로는 ‘주기적으로 데이터를 요청해야 하는’ 불편함이 있었지만,
웹 소켓은 서버가 먼저 데이터를 **”푸시”**할 수 있어서 훨씬 효율적입니다!

5. 웹 소켓 간단 사용 예시 (JavaScript)

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

// 연결 성공
socket.onopen = () => {
  console.log("서버와 연결되었습니다.");
  socket.send("안녕하세요 서버님!");
};

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

// 오류 발생
socket.onerror = (error) => {
  console.error("에러 발생:", error);
};

// 연결 종료
socket.onclose = () => {
  console.log("연결이 종료되었습니다.");
};

wss://는 SSL이 적용된 웹 소켓 연결이고, ws://는 일반 연결이에요.

6. 서버에서의 웹 소켓 처리 (PHP Ratchet 예시)

PHP에서는 Ratchet이라는 웹 소켓 라이브러리를 주로 사용해요.

composer require cboden/ratchet

간단한 서버 코드 예시:

use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;

class Chat implements MessageComponentInterface {
    public function onOpen(ConnectionInterface $conn) {
        echo "새로운 연결: {$conn->resourceId}
";
    }

    public function onMessage(ConnectionInterface $from, $msg) {
        echo "수신한 메시지: $msg
";
        $from->send("서버 응답: 잘 받았습니다!");
    }

    public function onClose(ConnectionInterface $conn) {
        echo "연결 종료: {$conn->resourceId}
";
    }

    public function onError(ConnectionInterface $conn, \Exception $e) {
        echo "에러 발생: {$e->getMessage()}
";
    }
}

이를 WebSocketServer에 등록하면 실시간 채팅 서버로 활용할 수 있어요.

7. 웹 소켓의 장점과 단점

✅ 장점

  • 실시간 양방향 통신
  • HTTP보다 낮은 오버헤드
  • 빠른 속도, 낮은 지연 시간
  • 서버 푸시 가능

⚠️ 단점

  • 연결 유지로 인한 리소스 소모
  • 프록시/방화벽 설정이 까다로움
  • 브라우저/환경 호환성 체크 필요
  • 상태 관리 복잡성

8. 주의사항 체크리스트 ✅

항목 주의사항
보안 wss://로 SSL 적용 권장
연결 상태 onopen, onclose, onerror 등 콜백 관리 철저
서버 성능 연결 유지 수 증가 시 리소스 관리 필요
재접속 로직 네트워크 끊김 등을 대비한 자동 재접속 구현 필요
메시지 프로토콜 JSON 형식 권장 (타입/데이터 구조 명확하게)

마무리하며 😊

이제 웹 소켓이 어떤 역할을 하고, 어떻게 동작하며, 언제 쓰이는지 완벽하게 이해하셨죠?

웹 소켓은 웹 기술의 진화된 형태로,
실시간 웹 앱을 만드는 데 있어서 없어서는 안 될 핵심 기술입니다!

다음 시간에는 웹 소켓을 활용한 실시간 채팅 구현 예제를 함께 해보는 시간을 가져볼게요.
오늘도 한 뼘 더 성장한 자신을 칭찬해 주세요~ 💪📡🔥

감사합니다! 🙌

답글 남기기