WebRTC, WebSocket, Socket.io 비교(feat. Next.js)

WebRTC

 

실시간 통신은 현대 웹 애플리케이션에서 중요한 요소입니다.

비디오 컨퍼런싱, 실시간 채팅, 온라인 게임 등 다양한 분야에서 사용되고 있습니다.

이러한 기능을 구현하기 위해서는 적절한 기술 선택이 필요합니다.

이번 글에서는 WebRTC, WebSocket, Socket.io의 차이점을 비교하고, Next.js에서 WebRTC를 구현하는 방법을 알아보겠습니다.

1. WebRTC, WebSocket, Socket.io란

1. WebRTC

WebRTC(Web Real-Time Communication)는 브라우저 간에 직접 실시간 미디어 스트림(오디오, 비디오)과 데이터 전송을 가능하게 하는 표준입니다.

별도의 플러그인 없이 P2P(peer-to-peer) 통신을 지원하여 지연 시간을 최소화합니다.

2. WebSocket

WebSocket은 TCP 기반의 양방향 통신 프로토콜로, 클라이언트와 서버 간의 지속적인 연결을 유지합니다.

HTTP 요청 없이도 서버에서 클라이언트로 데이터를 푸시할 수 있어 실시간 애플리케이션에 적합합니다.

3. Socket.io

Socket.io는 WebSocket을 기반으로 한 자바스크립트 라이브러리로, 브라우저와 서버 간의 실시간 양방향 통신을 쉽게 구현할 수 있도록 도와줍니다.

자동 재연결, 룸 기반 통신 등의 추가 기능을 제공합니다.

2. 기술 비교

1. 사용 목적

• WebRTC: 브라우저 간의 P2P 실시간 미디어 스트리밍과 데이터 전송.
• WebSocket: 클라이언트-서버 간의 실시간 데이터 통신.
• Socket.io: WebSocket을 활용한 실시간 애플리케이션 개발을 위한 고급 기능 제공.

2. 프로토콜 및 통신 방식

• WebRTC: UDP 기반의 P2P 통신을 사용하며, NAT 트래버설을 위한 STUN/TURN 서버를 사용.
• WebSocket: TCP 기반의 클라이언트-서버 통신 프로토콜.
• Socket.io: WebSocket을 포함한 다양한 전송 방법을 사용하여 브라우저 호환성을 높임.

3. 성능 및 확장성

• WebRTC: P2P 통신으로 서버 부하가 적지만, 다수의 참가자가 있을 경우 복잡도가 증가.
• WebSocket: 서버를 거치므로 서버 부하가 증가할 수 있음.
• Socket.io: 추가 기능으로 인해 약간의 오버헤드가 있지만, 개발 생산성을 높임.

3. Next.js에서 WebRTC 구현하기

Next.js에서 WebRTC를 구현하는 방법을 단계별로 알아보겠습니다.

1. 프로젝트 설정

먼저 Next.js 프로젝트를 생성하고 필요한 의존성을 설치합니다.

npx create-next-app webrtc-nextjs
cd webrtc-nextjs
npm install simple-peer

2. WebRTC 컴포넌트 생성
components/WebRTC.js 파일을 생성하고 다음 코드를 작성합니다.

// components/WebRTC.js
import { useEffect, useRef, useState } from 'react';
import Peer from 'simple-peer';

export default function WebRTC() {
  const [localStream, setLocalStream] = useState(null);
  const [remoteStream, setRemoteStream] = useState(null);
  const [peer, setPeer] = useState(null);
  
  const localVideoRef = useRef();
  const remoteVideoRef = useRef();

  useEffect(() => {
    // 로컬 미디어 스트림 가져오기
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then(stream => {
        setLocalStream(stream);
        localVideoRef.current.srcObject = stream;

        const newPeer = new Peer({
          initiator: true,
          trickle: false,
          stream: stream,
        });

        newPeer.on('signal', data => {
          // 시그널링 서버로 데이터 전송 (여기서는 생략)
          console.log('Signal data:', data);
        });

        newPeer.on('stream', stream => {
          setRemoteStream(stream);
          remoteVideoRef.current.srcObject = stream;
        });

        setPeer(newPeer);
      });

    return () => {
      if (localStream) {
        localStream.getTracks().forEach(track => track.stop());
      }
    };
  }, []);

  return (
    <div>
      <video ref={localVideoRef} autoPlay muted playsInline />
      <video ref={remoteVideoRef} autoPlay playsInline />
    </div>
  );
  
// page/index.js
import WebRTC from '../components/WebRTC';

export default function Home() {
  return (
    <div>
      <h1>WebRTC in Next.js</h1>
      <WebRTC />
    </div>
  );
}

3. STUN/TURN 서버 설정

WebRTC에서 P2P 연결을 위해서는 각 피어의 공인 IP 주소와 포트를 알아야 합니다.

하지만 NAT로 인해 직접적인 연결이 어려워집니다.

이를 해결하기 위해 STUN과 TURN 서버가 필요합니다.

 

STUN (Session Traversal Utilities for NAT) 서버

• 기능: 클라이언트의 공인 IP 주소와 포트를 알려줍니다.
• 작동 방식
  • 클라이언트가 STUN 서버에 요청을 보냅니다.
  • STUN 서버는 클라이언트의 공인 IP 주소와 포트를 응답합니다.
  • 클라이언트는 이 정보를 사용하여 P2P 연결을 시도합니다.
• 장점: 대부분의 NAT 환경에서 효과적이며, 서버 부하가 적습니다.
• 한계: 일부 복잡한 NAT 환경에서는 작동하지 않을 수 있습니다.

TURN (Traversal Using Relays around NAT) 서버

• 기능: STUN이 실패할 경우, 중계 서버 역할을 합니다.
• 작동 방식
  • 직접적인 P2P 연결이 불가능할 때 사용됩니다.
  • 모든 통신이 TURN 서버를 경유하여 전달됩니다.
• 장점: 거의 모든 네트워크 환경에서 연결을 보장합니다.
• 단점: 서버 부하가 크고, 대역폭 사용량이 많아 비용이 발생할 수 있습니다.

WebRTC 컴포넌트에 다음과 같이 추가합니다.

// components/WebRTC
const configuration = {
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    {
      urls: 'turn:your-turn-server.com:3478',
      username: 'your-username',
      credential: 'your-password'
    }
  ]
};

const peer = new Peer({
  initiator: true,
  trickle: false,
  config: configuration
});

 

4. 시그널링 서버 구현

WebRTC는 P2P 연결을 위해 초기 연결 정보를 교환해야 합니다.

이 과정을 '시그널링'이라고 하며, 이를 위한 중개 서버가 필요합니다.

 

시그널링 서버의 주요 기능

• 세션 제어: 통신 시작, 종료, 오류 보고 등
• 네트워크 구성: IP 주소, 포트, 피어 정보 교환
• 미디어 기능 협상: 코덱, 해상도 등의 정보 교환

시그널링 서버 구현 방법

• WebSocket 사용
  • 양방향 실시간 통신이 가능합니다.
  • 직접 구현하거나 라이브러리를 사용할 수 있습니다.
• Socket.io 사용
  • WebSocket의 추상화 라이브러리로, 더 쉽게 구현할 수 있습니다.
  • 폴백 메커니즘을 제공하여 WebSocket을 지원하지 않는 환경에서도 작동합니다.

이제 Next.js에서 시그널링 서버 구현해 보겠습니다. (Socket.io 사용)

4.1 Express와 Socket.io 설치

npm install express socket.io

 

4.2 서버 코드 작성

server.js 파일을 생성하고 다음과 같이 작성합니다.

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

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

  socket.on('answer', (data) => {
    socket.broadcast.emit('answer', data);
  });

  socket.on('candidate', (data) => {
    socket.broadcast.emit('candidate', data);
  });
});

server.listen(3001, () => {
  console.log('Signal server is running on port 3001');
});

4.3 클라이언트 코드 작성

이제 WebRTC 컴포넌트에 다음과 같이 추가합니다.

import { useEffect, useState } from 'react';
import io from 'socket.io-client';
import Peer from 'simple-peer';

export default function WebRTC() {
  const [socket, setSocket] = useState(null);
  const [peer, setPeer] = useState(null);

  useEffect(() => {
    const newSocket = io();
    setSocket(newSocket);

    const newPeer = new Peer({
      initiator: true,
      trickle: false,
      config: {
        iceServers: [
          { urls: 'stun:stun.l.google.com:19302' },
          // TURN 서버 설정
        ]
      }
    });

    newPeer.on('signal', (data) => {
      newSocket.emit('offer', data);
    });

    newSocket.on('answer', (answer) => {
      newPeer.signal(answer);
    });

    newSocket.on('ice-candidate', (candidate) => {
      newPeer.addIceCandidate(candidate);
    });

    setPeer(newPeer);

    return () => {
      newSocket.close();
      newPeer.destroy();
    };
  }, []);

  // 나머지 WebRTC 로직...
}

5. 최종 코드

최종적으로 WebRTC 코드는 아래와 같습니다.

import { useEffect, useRef, useState } from 'react';
import Peer from 'simple-peer';
import io from 'socket.io-client';

export default function WebRTC() {
  const [localStream, setLocalStream] = useState(null);
  const [remoteStream, setRemoteStream] = useState(null);
  const [peer, setPeer] = useState(null);
  const [socket, setSocket] = useState(null);
  
  const localVideoRef = useRef();
  const remoteVideoRef = useRef();

  useEffect(() => {
    // Socket.io 연결 설정
    const newSocket = io();
    setSocket(newSocket);

    // 로컬 미디어 스트림 가져오기
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then(stream => {
        setLocalStream(stream);
        if (localVideoRef.current) {
          localVideoRef.current.srcObject = stream;
        }

        const configuration = {
          iceServers: [
            { urls: 'stun:stun.l.google.com:19302' },
            // TURN 서버 설정 (필요시)
            // {
            //   urls: 'turn:your-turn-server.com:3478',
            //   username: 'your-username',
            //   credential: 'your-password'
            // }
          ]
        };

        const newPeer = new Peer({
          initiator: true,
          trickle: false,
          stream: stream,
          config: configuration
        });

        newPeer.on('signal', data => {
          console.log('Signal data:', data);
          newSocket.emit('offer', data);
        });

        newPeer.on('stream', remoteStream => {
          setRemoteStream(remoteStream);
          if (remoteVideoRef.current) {
            remoteVideoRef.current.srcObject = remoteStream;
          }
        });

        newSocket.on('answer', answer => {
          newPeer.signal(answer);
        });

        newSocket.on('ice-candidate', candidate => {
          newPeer.addIceCandidate(candidate);
        });

        setPeer(newPeer);
      })
      .catch(err => {
        console.error("Error accessing media devices:", err);
      });

    return () => {
      if (localStream) {
        localStream.getTracks().forEach(track => track.stop());
      }
      if (socket) {
        socket.close();
      }
      if (peer) {
        peer.destroy();
      }
    };
  }, []);

  return (
    <div>
      <h2>Local Video</h2>
      <video ref={localVideoRef} autoPlay muted playsInline />
      <h2>Remote Video</h2>
      <video ref={remoteVideoRef} autoPlay playsInline />
    </div>
  );
}

 

이 예시에서는 Socket.io를 사용하여 시그널링 서버를 구현하고, 클라이언트에서 이를 활용하여 WebRTC 연결을 설정합니다.

실제 구현 시에는 보안, 에러 처리, 스케일링 등 추가적인 고려사항이 필요합니다.
STUN/TURN 서버와 시그널링 서버를 적절히 구성하면, NAT 환경에서도 안정적인 WebRTC 연결을 구축할 수 있습니다.

 

WebRTC, WebSocket, Socket.io는 모두 실시간 통신을 위한 강력한 도구입니다.

각 기술의 특성과 사용 목적을 이해하면 프로젝트에 적합한 솔루션을 선택할 수 있습니다.

Next.js에서 WebRTC를 구현함으로써 브라우저 간의 실시간 비디오 통신을 손쉽게 구축할 수 있습니다.