실시간 대화: Web Sockets

핵심 개념

전화기처럼 서버와 실시간으로 데이터를 주고받아요. 채팅이나 실시간 게임을 만들 때 꼭 필요해요.

코드 분석

HTML5📋 코드 (12줄)

<button onclick='testSocket()'>에코 테스트</button>
<div id='result'>결과가 여기에 표시됩니다.</div>
<script>
  function testSocket() {
    const res = document.getElementById('result');
    res.innerHTML = '연결 시도 중 (wss://echo.websocket.org)...';
    // 실제 서버가 없을 경우를 대비한 가상 시뮬레이션
    setTimeout(() => {
      res.innerHTML = '에러: WebSocket 서버에 연결할 수 없습니다. (데모 환경 제약)';
    }, 2000);
  }
</script>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 WebSocket 클라이언트 코드의 재연결, 인증, 메시지 큐잉 처리를
프로덕션 수준으로 강화해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

WebSocket으로 실시간 채팅, 알림 푸시, 라이브 주식 시세를
실전 코드 3개로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 WebSocket 구현을 분석해서
연결 안정성, 메시지 순서 보장, 백프레셔,
방화벽 우회를 종합 점검해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년 실시간 통신에서
WebSocket vs Server-Sent Events vs WebRTC가
각각 언제 쓰이는지 현실 사례와 함께 알려줘.

⭐ 이것만 기억하세요

실시간 대화: Web Sockets는 이 3가지만 확실히 잡으세요

1.HTTP 폴링으로 실시간 데이터를 받으면 불필요한 요청이 반복돼서 서버 부하와 지연이 발생합니다

2.WebSocket은 한 번 연결하면 서버와 클라이언트가 양방향으로 자유롭게 메시지를 주고받습니다

3.다음 챕터에서 대용량 구조화 데이터를 브라우저에 저장하는 IndexedDB를 배웁니다

💬 이 챕터 질문 보기

HTML5 · CH.25 — 질문하거나 답변을 확인하세요

→

진행도 25 / 33

← 커리큘럼으로 ← 목록으로 (HTML5)