웹소켓

웹소켓 프로그래밍

1. HTTP 및 TCP/IP

1.1 TCP와 IP의 역할

• IP (Internet Protocol): 데이터를 목적지까지 전달하는 역할.

• TCP는 IP 위에서 작동하며, 데이터를 패킷으로 나누어 전송한 후 수신 측에서 이를 재조립.

• TCP (Transmission Control Protocol): 데이터 전송의 신뢰성을 보장.

1.2 HTTP 통신의 특징

• HTTP (Hypertext Transfer Protocol): 요청-응답 기반의 단방향 통신 프로토콜.

• 클라이언트가 요청을 보내면 서버가 응답하는 구조로, 정적 콘텐츠 로드, 폼 데이터 전송, API 호출 등 일회성 요청에 적합.

• 요청-응답 구조: 클라이언트가 요청을 보내고 서버가 응답하는 방식으로, 요청마다 새 연결을 설정하고 데이터를 주고받음.

• 무상태성: HTTP는 기본적으로 각 요청이 독립적. 상태를 유지하려면 세션이나 쿠키와 같은 추가 작업이 필요.

---

2. 웹소켓

2.1 웹소켓의 특징

• 실시간 통신의 필요성이 커지면서 2011년에 WebSocket이 표준화.

• WebSocket은 이 TCP를 기반으로 작동하며, 데이터가 순서대로 전송되도록 하고 오류가 발생할 경우 자동으로 복구.

  • HTTP 핸드셰이크로 연결을 시작하고, 이후 TCP 소켓을 통해 연결을 지속하며 양방향 데이터 전송.

• 실시간 데이터 교환이 중요한 애플리케이션에 적합.

2.2 적절한 사용 예시?

• 실시간 채팅 애플리케이션

• 실시간 게임

• 실시간 협업 도구 (예: 공동 문서 편집)

• 실시간 데이터 스트리밍 (예: 라이브 스포츠 중계)

2.3 장단점

• 장점

  • 낮은 지연 시간, 실시간 데이터 교환에 최적화됨

  • 효율적인 데이터 전송, 헤더 오버헤드 감소

  • 클라이언트와 서버가 동시에 데이터를 주고받을 수 있음

• 단점

  • 지속적인 연결로 인한 서버 자원 소모

  • 구현 복잡성 증가

  • 일부 방화벽이나 프록시에서 차단될 수 있음

2.4 브라우저 소켓 초기화

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

2.5 서버로 데이터 전송하기

      form.addEventListener('submit', function (e) {
        e.preventDefault();
        if (input.value) {
          const message = {
            clientId: clientId,
            message: input.value
          }
          socket.send(JSON.stringify(message));
          input.value = '';
        }
      });

2.6 네트워크 들여다보기

핸드쉐이크 과정

• 클라이언트가 서버로 요청 전송

  • Sec-WebSocket-Key와 함께 WebSocket 연결 요청을 보냄.

• 서버가 Sec-WebSocket-Accept 생성 후 응답

  • 서버는 클라이언트가 보낸 키를 이용해 Sec-WebSocket-Accept 헤더 값을 생성하고 응답

• 클라이언트의 검증: 클라이언트는 서버의 응답 값을 확인하고 일치하면 WebSocket 연결이 성립

참고. Request URL <socket.io 라이브러리 사용시>

• EIO=4: Socket.IO 프로토콜 버전( 4.x 프로토콜 사용)

• transport=websocket: 현재 전송 방식을 지정.

• sid=1kbDBngrZ9P44RmsAAAl: 세션 ID로, 서버에서 각 클라이언트를 식별하기 위해 부여하는 고유 ID

2.7 서버로부터 데이터 수신

      socket.onmessage = function (event) {
        const item = document.createElement('li');

        event.data.text().then((text) => {
          let {clientId, message}= JSON.parse(text)

          if(clientId === myId) {
            item.classList.add('mine');
          } else {
            message = `${clientId}: ${message}`;
          }

          item.textContent = message;
          messages.appendChild(item);
          window.scrollTo(0, document.body.scrollHeight);
        });

      };

2.8 서버 코드 예시

const WebSocket = require('ws');
const express = require('express');
const app = express();
const server = require('http').createServer(app);

const wsServer = new WebSocket.Server({ server });

wsServer.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    // 받은 메시지를 모든 클라이언트에게 전송
    console.log('received: %s', message);
    wsServer.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

app.use(express.static('public'));

const PORT = process.env.PORT || 8080;
server.listen(PORT, () => console.log(`Server is running on http://localhost:${PORT}`));

2.9 클라이언트 코드 (React)

import React, { useEffect, useRef } from 'react';

const Canvas = () => {
  const canvasRef = useRef(null);
  const socketRef = useRef(null);

  useEffect(() => {
    socketRef.current = new WebSocket('ws://localhost:8080');
    socketRef.current.onmessage = (event) => {
      const { x, y } = JSON.parse(event.data);
      draw(x, y);
    };
    return () => socketRef.current.close();
  }, []);

  const draw = (x, y) => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'black';
    ctx.fillRect(x, y, 2, 2);
  };

  const handleMouseMove = (event) => {
    const x = event.clientX;
    const y = event.clientY;
    draw(x, y);
    socketRef.current.send(JSON.stringify({ x, y }));
  };

  return <canvas ref={canvasRef} width={800} height={600} onMouseMove={handleMouseMove} />;
};

export default Canvas;

---

3. 개발 팁

3.1 디버깅

• 네트워크 탭 활용: 브라우저 개발자 도구의 네트워크 탭에서 WebSocket 연결 상태와 전송되는 데이터를 실시간으로 모니터링할 수 있음.

• WebSocket 프레임(Frame) 탭에서 주고받는 메시지를 확인하여 데이터 흐름을 파악

• 콘솔 로그: 클라이언트와 서버의 소켓 연결, 송수신 이벤트를 콘솔에 출력해 통신이 정상적으로 이루어지는지 확인.

3.2 오류 - CORS

• WebSocket 통신에서도 CORS 오류가 발생할 수 있음.

• 특히 클라이언트와 서버가 다른 도메인에 있을 경우 브라우저에서 WebSocket 연결을 차단할 수 있음.

• socket.io에서는 서버에서 CORS 옵션을 추가하여 해결할 수 있음.

const io = require('socket.io')(3000, {
cors: {
  origin: "http://localhost:3001",
  methods: ["GET", "POST"]
}
});

3.3 WebSocket 보안을 위한 wss:// 설정

보안이 필요한 WebSocket 통신에서는 wss:// 프로토콜을 사용해 TLS 암호화를 적용할 수 있음.

• 애플리케이션 코드에서 TLS 설정: wss://를 지원하려면 애플리케이션 코드에서 HTTPS 서버를 설정하고 WebSocket 서버를 그 위에 구성.

const https = require('https');
const WebSocket = require('ws');
const server = https.createServer({
  cert: fs.readFileSync('path/to/cert.pem'),
  key: fs.readFileSync('path/to/key.pem')
});
const wss = new WebSocket.Server({ server });

• 프록시 서버 이용 (대안)

  • Nginx와 같은 웹 서버에서 TLS를 설정해 WebSocket을 wss://로 보호할 수도 있음.

3.4 JWT를 사용한 WebSocket 인증 과정

3.4.1 초기 연결 시 토큰 전송

• WebSocket은 HTTP 핸드셰이크를 통해 연결을 설정하므로, 이 과정에서 JWT 토큰을 함께 전송하여 서버가 클라이언트를 식별.

• WebSocket의 URL 쿼리 파라미터나 헤더에 JWT 토큰을 포함하여 전송.

3.4.2 서버에서 JWT 인증 및 식별

• 서버는 핸드셰이크 요청에 포함된 JWT 토큰을 확인하고, 유효한 경우 WebSocket 연결을 허용.

• 서버는 JWT 토큰을 검증하여 해당 사용자의 **식별 정보(예: user ID)**를 추출하고, 이후 클라이언트와의 통신에 사용.

예시 코드

const jwtToken = "your-jwt-token"; //대충 클라에서 저장중인 토큰

// WebSocket 연결 시 토큰을 쿼리 파라미터로 포함하여 전송
const socket = new WebSocket(`ws://localhost:8080/chat?token=${jwtToken}`);

• 클라이언트는 WebSocket 연결 시 JWT 토큰을 쿼리 파라미터로 전송.

• 서버는

  • WebSocket 핸드셰이크 요청에서 쿼리 파라미터로 전달된 JWT 토큰을 추출 & 검증

  • 토큰이 유효하면 해당 사용자 정보(userId)를 활용하여 메시지를 주고받을 수 있음.

3.5 연결 체크 & 재연결 방식

3.5.1 Ping/Pong 메시지를 통한 연결 상태 확인

WebSocket 프로토콜은 연결 상태를 유지하기 위해 Ping/Pong 프레임을 주고받기.

• Ping: 클라이언트나 서버에서 주기적으로 보내는 연결 체크 메시지

• Pong: Ping에 대한 응답으로, 연결이 여전히 유효하다는 것을 확인하는 데 사용.

• 사용 시점: Ping 메시지를 주기적으로 보내고, 일정 시간 내에 Pong 응답을 받지 못하면 연결이 끊어진 것으로 간주.

3.5.2 자동 재연결 방식

• WebSocket 연결이 끊어졌을 때, 클라이언트가 일정 시간 간격으로 자동으로 재연결을 시도하여 복구.

• 보통 재연결 간격을 점차 늘려가는 방식을 사용해 서버에 과도한 재연결 요청이 가지 않도록 구현

3.6 Web Workers를 활용한 소켓객체 공유

3.6.1 문제점

• 브라우저 여러개의 탭에서 서버와 통신하려고 할때는 여러개의 중복 소켓연결이 필요함.

• 단일 소켓통신 연결을 유지하는 방법은?

3.6.2 방식

• Web Workers의 Shared Worker를 사용해서 구현 가능.

  • Worker Thread에서 통신을 담당하고 브라우저 탭과 통신을 하면 데이터(메시지) 공유

참고 : https://pike96.com/posts/websocket-sharedworker-broadcastchannel/

3.6.3 예시

Shared Worker코드

const socket = new WebSocket('wss://example.com/socket');
const clients = []; //브라우저 탭들

// WebSocket 메시지 수신 시 연결된 모든 클라이언트에게 전송
socket.onmessage = (event) => {
  clients.forEach((port) => port.postMessage(event.data));
};

// 새 클라이언트(탭) 연결 시
onconnect = (event) => {
  const port = event.ports[0];
  clients.push(port);

  // 클라이언트로부터 메시지를 수신해 WebSocket으로 전송
  port.onmessage = (e) => {
    socket.send(e.data);
  };

  // 클라이언트 연결이 종료되면 배열에서 제거
  port.onclose = () => {
    clients.splice(clients.indexOf(port), 1);
  };
};

메인쓰레드(브라우저 탭)

// SharedWorker에 연결
const worker = new SharedWorker('sharedWorker.js');
worker.port.start(); // 포트 활성화

// SharedWorker로부터 메시지를 수신해 출력
worker.port.onmessage = (event) => {
  console.log('서버로부터 받은 메시지:', event.data);
};

// 메시지를 SharedWorker로 전송 (SharedWorker가 WebSocket을 통해 서버로 전달)
function sendMessage(message) {
  worker.port.postMessage(message);
}

3.6.4 주의사항

• 브라우저 호환성 이슈 대안 필요

• 통신 시간 측정 비교 필요

• 탭이 하나일때 는 일반 소켓연결, 탭이 여러개일때는 Shared Worker로 구현?

---

4. socket.io 사용 예시

• socket.io를 사용하면 바닐라 WebSocket 코드보다 간결하게 구현할 수 있음.

• 다음은 동일한 기능을 socket.io로 구현한 예.

4.1 서버 코드 (socket.io)

const io = require('socket.io')(3000, {
  cors: {
    origin: "http://localhost:3001",
    methods: ["GET", "POST"]
  }
});

io.on('connection', (socket) => {
  socket.on('draw', (data) => {
    socket.broadcast.emit('draw', data);
  });
});

4.2 클라이언트 코드 (React)

import React, { useEffect, useRef } from 'react';
import io from 'socket.io-client';

const Canvas = () => {
  const canvasRef = useRef(null);
  const socketRef = useRef(null);

  useEffect(() => {
    socketRef.current = io('http://localhost:3000');
    socketRef.current.on('draw', ({ x, y }) => {
      draw(x, y);
    });
    return () => socketRef.current.disconnect();
  }, []);

  const draw = (x, y) => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'black';
    ctx.fillRect(x, y, 2, 2);
  };

  const handleMouseMove = (event) => {
    const x = event.clientX;
    const y = event.clientY;
    draw(x, y);
    socketRef.current.emit('draw', { x, y });
  };

  return <canvas ref={canvasRef} width={800} height={600} onMouseMove={handleMouseMove} />;
};

export default Canvas;