1. 핵심 개념 복습

• HTTP 통신
  • 클라이언트(사용자)가 서버에 요청을 보내고, 서버는 요청받은 데이터를 응답으로 전송(비유: 문자 메시지).
  • 서버가 먼저 클라이언트에게 데이터를 보내는 것은 불가능(비유: 사용자가 먼저 문자를 보내야만 답장을 주는 소개팅녀).
  • 과거에는 충분했으나, 실시간 기능이 필요한 최근 웹 서비스에는 비효율적.
• 실시간 기능 구현의 필요성
  • 채팅, 실시간 게임, 주식 거래 등에서는 서버가 즉시 데이터를 푸시해야 함.
  • HTTP 방식으로 2초마다 폴링(polling)하는 것은 비효율(과도한 요청·부하 발생).
• 실시간 기능 구현 해결책
  1. Server-Sent Events (SSE)
     • 단방향 전송: HTTP 연결을 유지해 서버가 클라이언트에만 지속적으로 데이터 푸시(비유: 라디오―듣기만 가능).
     • 서버에서 클라이언트로 일방 전송만 필요할 때 적합(예: 실시간 주가 업데이트).
  2. 웹소켓 (WebSocket)
     • 양방향 전송: TCP 연결을 기반으로 서버와 클라이언트가 언제든지 서로 메시지를 주고받을 수 있음(비유: 전화).
     • 채팅, 실시간 게임처럼 양방향 교환이 필요할 때 적합.

2. 웹소켓 연결 과정

1. HTTP 업그레이드 요청
   • 클라이언트가 초기 HTTP 헤더에 Upgrade: websocket을 포함한 요청을 서버에 보냄.
   • 예: GET /chat HTTP/1.1 헤더에 Connection: Upgrade, Upgrade: websocket 등 포함.
2. 서버의 업그레이드 응답
   • 서버가 헤더를 확인 후 101 Switching Protocols 응답을 보내면서, 기존 HTTP 연결을 웹소켓 프로토콜로 전환.
3. 웹소켓 연결 성립
   • 업그레이드가 완료되면, TCP 연결 위에서 프레임 단위의 양방향 통신 시작.
   • 이후 클라이언트·서버 양쪽 모두 send() 및 onmessage 이벤트를 통해 자유롭게 메시지 교환 가능.

3. 구현 예시 (Node.js 환경)

• 서버 측

  1. Express

     • 기본 HTTP 서버를 쉽게 세팅하기 위한 프레임워크.
     • 예: const express = require('express'); const app = express();

  2. ws 또는 Socket.IO

     • ws: 순수 웹소켓 서버 구현용 라이브러리.
     • Socket.IO: 웹소켓 기능 외에도 자동 재연결, 네임스페이스, 룸(room) 등 고급 기능 제공.

  3. 간단한 ws 사용 예시

     const express = require('express');
     const http = require('http');
     const WebSocket = require('ws');
     
     const app = express();
     const server = http.createServer(app);
     const wss = new WebSocket.Server({ server });
     
     wss.on('connection', (ws) => {
       console.log('클라이언트가 연결되었습니다.');
     
       ws.on('message', (message) => {
         console.log(`수신 메시지: ${message}`);
         // 받은 메시지를 모든 클라이언트로 브로드캐스트
         wss.clients.forEach((client) => {
           if (client.readyState === WebSocket.OPEN) {
             client.send(`서버 응답: ${message}`);
           }
         });
       });
     
       ws.send('웹소켓 연결이 성공적으로 이루어졌습니다.');
     });
     
     server.listen(3000, () => {
       console.log('서버가 포트 3000에서 대기 중입니다.');
     });
     
     

• 클라이언트 측 (HTML/JavaScript)

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8" />
    <title>웹소켓 예제</title>
  </head>
  <body>
    <h1>웹소켓 채팅</h1>
    <input id="inputMsg" type="text" placeholder="메시지 입력" />
    <button id="sendBtn">전송</button>
    <ul id="messages"></ul>
  
    <script>
      const ws = new WebSocket('ws://localhost:3000');
  
      ws.onopen = () => {
        console.log('웹소켓 연결 성공');
      };
  
      ws.onmessage = (event) => {
        const li = document.createElement('li');
        li.textContent = event.data;
        document.getElementById('messages').appendChild(li);
      };
  
      document.getElementById('sendBtn').onclick = () => {
        const msg = document.getElementById('inputMsg').value;
        ws.send(msg);
        document.getElementById('inputMsg').value = '';
      };
    </script>
  </body>
  </html>
  
  

4. 퀴즈 (단답형)

1. HTTP 통신을 문자 메시지에 비유했을 때, 서버가 사용자에게 먼저 메시지를 보내는 것이 불가능하다는 특징은 무엇에 비유되었습니까?
2. 최신 웹 서비스에서 실시간 기능을 구현하기 위해 HTTP 통신 방식을 사용할 경우 발생하는 비효율성은 무엇입니까?
3. Server-Sent Events(SSE)를 라디오에 비유했을 때, 라디오의 특징이 SSE의 어떤 단점을 나타냅니까?
4. 웹소켓 통신을 전화에 비유했을 때, 전화의 특징이 웹소켓의 어떤 장점을 나타냅니까?