[개발지식] 온라인 통신 - 웹소켓 - 온라인 통신을 위한 “양방향 채널”

웹 통신(HTTP)과 온라인 통신(실시간)의 차이점 요약

연결·세션·채널 개념 정리, WebSocket·SSE·Long Polling 방식별 특징과 데이터 포맷(JSON·Binary·Protobuf) 활용 가이드

연결 유지에 따른 비용·스케일링·보안 고려사항 정리

---

목차

1. 웹소켓의 개요
2. 웹소켓의 연결
3. 웹소켓의 송수신 데이터
4. 웹소켓 예시 코드

---

웹 소켓

개요

항목 내용

정의	웹 브라우저와 서버 간의 실시간 양방향 통신 기술
표준	RFC 6455
기반	최초 연결은 HTTP → 이후 전용 프로토콜 전환

• 웹 소켓은 HTTP로 시작하지만 연결이 수립되면 HTTP가 아닌 WebSocket 전용 프로토콜로 전환

정의

• 온라인 통신을 위한 “양방향 채널”
• 서버와 클라이언트가 대등하게 계속 대화하는 통신

연결

통신 원리

• HTTP를 벗어나 “전용 통신 상태”로 들어감
• 통신 과정
  1. HTTP로 HandShake 요청
  2. Protocol Upgrade → WebSocket 전환
  3. 연결 유지
  4. 양쪽에서 자유롭게 메시지 송 수신
  5. 명시적 Close 까지 지속
• 대화형 온라인 통신

연결 주체에 따른 비교

구분 프론트엔드 백엔드

연결 시작	⭕ (브라우저에서 new WebSocket)	⭕ (서버↔서버, 클라이언트 역할)
연결 대상	서버	다른 서버 / 외부 소켓 서버
주 용도	사용자 실시간 데이터 수신	중계, 집계, 브로드캐스트
UI 직접 반영	⭕	❌

일반적인 구조

[브라우저(프론트)]
    ↓ WebSocket
[웹 서버 / 실시간 서버]

역할 설명

프론트엔드	WebSocket 클라이언트 역할
백엔드	WebSocket 서버 역할

백엔드에서 WebSocket을 연결하는 경우

• 백엔드는 WebSocket “클라이언트”가 됨

[외부 실시간 소스] ← WebSocket → [백엔드] → (가공) → 프론트

상황 설명

외부 시세 수신	거래소/증권소켓에서 실시간 수신
중앙 집계	여러 소스를 하나로 통합
보안	프론트에 직접 노출 금지

프론트 엔드에서 직접 연결하지 않는 이유

• 백엔드에서 웹소켓 연결해서 프론트에 웹소켓을 하는 방식이 금융권에서는 흔함

[외부 실시간 소켓]
        ↓
     [백엔드]
        ↓ (SSE / WS / API)
     [프론트]

이유 설명

보안	인증 토큰 노출 위험
프로토콜 복잡	바이너리/암호화/서명
트래픽 제어	수천 클라이언트 직접 연결 부담
제어	구독/권한 관리 중앙화

송수신 데이터

• text : JSON, 문자열
• Binary : protobuf, 압축 데이터
• Control : ping/pong/close
• 고빈도 대용량 양방향에 적합

WebSocket 메시지 구조

{
  "type": "subscribe",
  "channel": "trade",
  "symbol": "AAPL"
}

{
  "type": "trade",
  "symbol": "AAPL",
  "price": 182.31,
  "volume": 100,
  "time": 1710000000000
}

필드 의미

type	메시지 종류
channel	구독 대상
payload	데이터 본문

예시 코드

백엔드 예시

• 기본 WebSocket 서버포인트 의미

  connection	클라이언트 접속
  message	메시지 수신 이벤트
  send	서버 → 클라이언트 전송
  close	연결 종료

  import WebSocket, { WebSocketServer } from 'ws';
  
  const wss = new WebSocketServer({ port: 8080 });
  
  wss.on('connection', (ws, req) => {
    console.log('Client connected');
  
    // 클라이언트 → 서버
    ws.on('message', (message) => {
      console.log('Received:', message.toString());
  
      // 서버 → 클라이언트 (응답)
      ws.send(
        JSON.stringify({
          type: 'echo',
          data: message.toString(),
          time: Date.now(),
        })
      );
    });
  
    // 연결 종료
    ws.on('close', () => {
      console.log('Client disconnected');
    });
  
    // 에러
    ws.on('error', (err) => {
      console.error('WebSocket error', err);
    });
  });
  
  console.log('WebSocket server running on ws://localhost:8080');
  ​

프론트 엔드 예시 (브라우저)

본 webSocket 연결

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

ws.onopen = () => {
  console.log('WebSocket OPEN');

  // 서버로 메시지 전송
  ws.send(
    JSON.stringify({
      type: 'hello',
      payload: 'frontend connected',
    })
  );
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('MESSAGE', data);
};

ws.onerror = (error) => {
  console.error('WebSocket ERROR', error);
};

ws.onclose = (event) => {
  console.log('WebSocket CLOSE', event.code, event.reason);
};
​

 

WebSocket 의 특징이 코드에서 드러나는 부분

• 양방향 : send / onmessage
• 연결 유지 : onopen ~ onclose
• 이벤트 기반 : message / close / error

devTool

항목	모습
Network	websocket 항목
Status	101 Switching Protocols
Messages	Frames 송·수신 기록
Opcode	text / binary