Socket.io를 사용하여 실시간 화상 회의 시스템 구현하기

소개

실시간 화상 회의 시스템은 다수의 사용자가 동시에 비디오 및 오디오 통화를 할 수 있는 시스템입니다. 이를 구현하기 위해 Socket.io를 사용하면 클라이언트 사이에서 실시간으로 데이터를 주고받을 수 있습니다.

필요한 패키지 설치

먼저 프로젝트 디렉토리에서 다음 명령어를 사용하여 Socket.io 패키지를 설치합니다.

npm install socket.io

서버 구현

서버 측에서는 Socket.io를 사용하여 클라이언트와 통신합니다. 다음은 간단한 서버의 예입니다.

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

// Socket.io 설정
const io = require('socket.io')(http);

// 클라이언트가 연결되었을 때 실행되는 이벤트 핸들러
io.on('connection', (socket) => {
  console.log('a user connected');

  // 클라이언트가 메시지를 보냈을 때 실행되는 이벤트 핸들러
  socket.on('message', (message) => {
    console.log('message: ' + message);
    
    // 다른 클라이언트에게 메시지 전송
    io.emit('message', message);
  });

  // 클라이언트가 연결을 해제했을 때 실행되는 이벤트 핸들러
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

// 서버 시작
const port = 3000;
http.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

클라이언트 구현

클라이언트 측에서는 Socket.io 클라이언트를 사용하여 서버와 통신합니다. 다음은 간단한 HTML 파일의 예입니다.

<!DOCTYPE html>
<html>
<head>
  <title>Real-time Video Conference</title>
  <script src="https://cdn.socket.io/socket.io-4.2.1.min.js"></script>
</head>
<body>
  <video id="localVideo" autoplay></video>
  <video id="remoteVideo" autoplay></video>

  <script>
    const socket = io();

    // GetUserMedia를 사용하여 카메라에 접근하여 로컬 비디오 보여줌
    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
      .then((stream) => {
        const localVideo = document.getElementById('localVideo');
        localVideo.srcObject = stream;
      })
      .catch((error) => {
        console.error('Error accessing media devices:', error);
      });

    // 메시지를 보내고 받는 기능 구현
    const messageInput = document.getElementById('messageInput');
    const messageList = document.getElementById('messageList');

    socket.on('message', (message) => {
      const listItem = document.createElement('li');
      listItem.textContent = message;
      messageList.appendChild(listItem);
    });

    messageInput.addEventListener('keydown', (event) => {
      if (event.key === 'Enter') {
        const message = messageInput.value;
        socket.emit('message', message);
        messageInput.value = '';
      }
    });
  </script>
</body>
</html>

실행하기

서버를 실행하기 위해 터미널에서 node server.js 명령어를 실행합니다.
웹 브라우저에서 http://localhost:3000에 접속하여 화상 회의를 시작합니다.

결론

이제 Socket.io를 사용하여 실시간 화상 회의 시스템을 구현하는 방법에 대해 알아보았습니다. Socket.io를 활용하면 쉽게 다수의 사용자 간에 실시간으로 비디오 및 오디오를 전송할 수 있습니다.

참고 자료

Socket.io 공식 문서