[Network] WebSocket 통신과 Soket.io

WebSocket이란 ?

WebSocket은 클라이언트와 서버 간에 지속적인 양방향 통신을 가능하게 하는 프로토콜
HTTP와 달리 연결이 한 번 수립되면 지속적으로 유지되어 실시간 데이터 교환이 가능

사용하는 이유

• 기존 HTTP는 요청-응답 방식으로만 통신 가능
• 서버에서 클라이언트로 먼저 데이터 전송 불가
• 매 요청마다 새로운 연결 생성으로 오버헤드 발생

Soket.io란 ?

Socket.IO는 WebSocket을 기반으로 한 JavaScript 라이브러리로, 실시간 양방향 통신을 더 쉽고 안정적으로 구현할 수 있도록 도와준다

주요 특징

• 자동 fallback 지원
• WebSocket이 지원되지 않는 환경에서 자동으로 다른 방식으로 전환
• Polling, Long-polling 등의 대안 기술 활용

추가 기능

• Room 기능으로 특정 그룹 내 통신 가능
• 네임스페이스로 논리적 연결 분리
• 자동 재연결 기능
• 브로드캐스팅 지원

---

차이점

1. 기술적 성격

   WebSocket: 브라우저 내장 표준 프로토콜
   Socket.IO: 외부 라이브러리 (설치 필요)

2. 브라우저 호환성 처리

// WebSocket - 직접 호환성 체크 필요
if (typeof WebSocket !== 'undefined') {
    const ws = new WebSocket('ws://localhost:3000');
} else {
    // 대안 방법 직접 구현해야 함
}

// Socket.IO - 자동 처리
const socket = io('http://localhost:3000'); // 알아서 최적 방법 선택

3. 연결 실패 시 대응

   WebSocket: 연결 끊어지면 수동으로 재연결 코드 작성
   Socket.IO: 자동 재연결 기능 내장

4. 구현 복잡성

// WebSocket - 모든 것을 직접 구현
const ws = new WebSocket('ws://localhost:3000');
ws.onopen = function() { /* 연결 처리 */ };
ws.onmessage = function(event) { /* 메시지 처리 */ };
ws.onerror = function() { /* 에러 처리 */ };
ws.onclose = function() { /* 재연결 로직 직접 구현 */ };

// Socket.IO - 간단한 API
const socket = io('http://localhost:3000');
socket.on('connect', () => { /* 연결 처리 */ });
socket.on('message', (data) => { /* 메시지 처리 */ });
// 에러, 재연결 등은 자동 처리

5. 성능과 용량

   WebSocket: 가볍고 빠름
   Socket.IO: 기능이 많아 상대적으로 무거움

---

사용 사례

• 간단한 실시간 통신: WebSocket
• 복잡한 실시간 애플리케이션: Socket.IO
• 최대 성능 필요: WebSocket
• 개발 편의성 우선: Socket.IO