Frontend Academy · 강의

WebSocket API: 열기, 메시지, 닫기, 오류

WebSocket 연결을 만들고, message 이벤트 처리기에서 메시지를 주고받으며, 연결 오류와 정상적인 연결 종료를 처리합니다.

WebSocket API: 열기, 메시지, 닫기, 오류은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

왜 WebSockets인가요?

HTTP는 요청/응답 방식입니다. 실시간 앱(채팅, 멀티플레이어 게임, 실시간 업데이트)에는 지속적인 양방향 통신이 필요합니다. WebSockets는 하나의 TCP 연결을 계속 열어 두고 양쪽에서 언제든 메시지를 보낼 수 있게 합니다.

WebSocket 만들기

ws:// 또는 wss:// URL로 WebSocket을 생성합니다. 브라우저가 업그레이드 핸드셰이크를 처리합니다.

const ws = new WebSocket('wss://api.example.com/realtime');

// Always use wss:// (secure) in production

네 가지 이벤트

WebSocket에는 네 가지 이벤트 유형이 있습니다. open(연결됨), message(데이터 수신), close(연결 종료), error(문제)입니다.

ws.addEventListener('open', () => {
  console.log('Connected');
  ws.send(JSON.stringify({ type: 'subscribe', channel: 'updates' }));
});

ws.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
  console.log('Received:', data);
});

ws.addEventListener('close', (event) => {
  console.log('Closed:', event.code, event.reason);
});

ws.addEventListener('error', (event) => {
  console.error('Error:', event);
});

메시지 보내기

ws.send()를 사용합니다. 문자열, ArrayBuffers, Blob 또는 ArrayBufferView를 받을 수 있습니다. 구조화된 데이터는 먼저 JSON.stringify를 사용합니다.

ws.send('hello');
ws.send(JSON.stringify({ type: 'chat', text: 'Hi' }));

// Binary:
const buffer = new ArrayBuffer(8);
ws.send(buffer);

메시지 받기

event.data를 확인합니다. 이 값의 유형은 서버가 보낸 데이터와 일치합니다. 객체 페이로드에는 JSON.parse를 사용합니다.

ws.addEventListener('message', (event) => {
  // typeof event.data: string | ArrayBuffer | Blob
  if (typeof event.data === 'string') {
    const msg = JSON.parse(event.data);
    handleMessage(msg);
  }
});

연결 상태 (readyState)

ws.readyState를 확인합니다. CONNECTING=0, OPEN=1, CLOSING=2, CLOSED=3입니다. OPEN 상태가 되기 전에는 보내지 마세요.

if (ws.readyState === WebSocket.OPEN) {
  ws.send(message);
} else {
  console.warn('Not connected yet');
}

깔끔하게 연결 종료하기

ws.close(code, reason)을 호출합니다. 표준 연결 종료 코드는 1000(정상), 1001(연결을 떠남), 1008(정책 위반), 1011(서버 오류)입니다.

ws.close(1000, 'User logged out');

재연결 전략

네트워크가 변경되거나 서버가 재시작되는 등의 상황에서 WebSockets 연결이 끊어집니다. 지수 백오프를 사용해 재연결을 구현하세요.

let reconnectDelay = 1000;

function connect() {
  const ws = new WebSocket('wss://api/realtime');
  ws.addEventListener('open', () => { reconnectDelay = 1000; });
  ws.addEventListener('close', () => {
    setTimeout(connect, reconnectDelay);
    reconnectDelay = Math.min(reconnectDelay * 2, 30000);
  });
  return ws;
}

하트비트 / 연결 유지

유휴 상태의 WebSockets는 프록시와 로드 밸런서에 의해 약 60초 후 종료될 수 있습니다. 연결을 유지하려면 25~30초마다 핑을 보내세요.

let pingInterval;
ws.addEventListener('open', () => {
  pingInterval = setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify({ type: 'ping' }));
    }
  }, 25000);
});
ws.addEventListener('close', () => clearInterval(pingInterval));

인증

WebSockets는 사용자 지정 헤더를 지원하지 않습니다. 방법은 다음과 같습니다. 1) WS URL의 쿼리 문자열 토큰(?token=jwt)으로 인증합니다. 2) open 이벤트 후 인증 메시지를 보냅니다. 3) 쿠키를 사용합니다(동일 출처에서는 자동으로 작동합니다).

// Query string:
const ws = new WebSocket(`wss://api/realtime?token=${jwt}`);

// Auth message:
ws.addEventListener('open', () => {
  ws.send(JSON.stringify({ type: 'auth', token: jwt }));
});

WebSockets용 React 훅

연결이 누수되지 않도록 사용자 지정 훅에 WS 수명 주기를 캡슐화합니다.

function useWebSocket(url) {
  const [messages, setMessages] = useState([]);
  const wsRef = useRef(null);

  useEffect(() => {
    const ws = new WebSocket(url);
    wsRef.current = ws;
    ws.addEventListener('message', (e) => {
      setMessages(m => [...m, JSON.parse(e.data)]);
    });
    return () => ws.close();
  }, [url]);

  return { messages, send: (msg) => wsRef.current?.send(JSON.stringify(msg)) };
}

WebSocket, HTTP/2, SSE 비교

WebSocket: 전이중 통신으로 양쪽에서 모두 보낼 수 있습니다. HTTP/2 서버 푸시: 더 이상 사용되지 않습니다. Server-Sent Events: 서버에서 클라이언트로만 전송하며 더 단순하고 자동 재연결을 지원합니다. 클라이언트도 보내야 하는 채팅에는 WS를, 단방향 알림에는 SSE를 선택하세요.

빠른 확인

정상적이고 의도적인 연결 종료(예: 사용자가 로그아웃함)에 사용하는 표준 WebSocket 연결 종료 코드는 무엇인가요?

복습: WebSocket API

new WebSocket('wss://...')으로 연결을 엽니다. 네 가지 이벤트는 open, message, close, error입니다. send()는 문자열/ArrayBuffer/Blob을 받으며, 객체에는 JSON.stringify를 사용합니다. 보내기 전에 readyState를 확인합니다. 깔끔한 연결 종료에는 close(1000)을 사용합니다. 지수 백오프로 재연결합니다. 연결 유지를 위해 25초마다 하트비트를 보냅니다. 쿼리 문자열 또는 인증 메시지로 인증합니다. React에서는 수명 주기를 훅으로 감쌉니다.

자주 묻는 질문

“WebSocket API: 열기, 메시지, 닫기, 오류” 강의는 무료인가요?

네 — “WebSocket API: 열기, 메시지, 닫기, 오류” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“WebSocket API: 열기, 메시지, 닫기, 오류”에서 뭘 배우나요?

WebSocket 연결을 만들고, message 이벤트 처리기에서 메시지를 주고받으며, 연결 오류와 정상적인 연결 종료를 처리합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“WebSocket API: 열기, 메시지, 닫기, 오류” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기