Socket.io를 사용하여 실시간 사진 공유 앱 구현하기

Socket.io는 실시간 웹 애플리케이션을 개발할 때 자주 사용되는 라이브러리입니다. 이 라이브러리를 사용하면 실시간 데이터 전송, 이벤트 기반 통신 등을 쉽게 구현할 수 있습니다. 이번에는 Socket.io를 사용하여 실시간 사진 공유 앱을 구현하는 방법에 대해 알아보겠습니다.

1. 프로젝트 설정

먼저, 프로젝트를 설정해야 합니다. 다음 명령을 사용하여 필요한 패키지를 설치합니다.

npm install express socket.io

그리고 서버 파일(server.js)과 클라이언트 파일(index.html)을 생성합니다.

2. 서버 구현

서버를 구현하기 위해 server.js 파일을 열고 다음 코드를 작성합니다.

const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const path = require('path');

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('새로운 클라이언트가 연결되었습니다.');

  socket.on('send photo', (data) => {
    console.log('새로운 사진이 전송되었습니다.');
    // 전송된 사진을 다른 클라이언트에게 전송
    socket.broadcast.emit('receive photo', data);
  });

  socket.on('disconnect', () => {
    console.log('클라이언트가 연결을 해제했습니다.');
  });
});

server.listen(3000, () => {
  console.log('서버가 실행되었습니다. http://localhost:3000');
});

3. 클라이언트 구현

클라이언트를 구현하기 위해 index.html 파일을 열고 다음 코드를 작성합니다.

<!DOCTYPE html>
<html>
<head>
  <title>실시간 사진 공유 앱</title>
</head>
<body>
  <input type="file" id="photo" />
  
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const photoInput = document.getElementById('photo');
    
    photoInput.addEventListener('change', (e) => {
      const file = e.target.files[0];
      const reader = new FileReader();
      
      reader.onload = (event) => {
        const data = event.target.result;

        // 사진을 서버로 전송
        socket.emit('send photo', data);
      };
      
      reader.readAsDataURL(file);
    });

    // 다른 클라이언트로부터 사진을 받았을 때 처리
    socket.on('receive photo', (data) => {
      const imgElement = document.createElement('img');
      imgElement.src = data;
      
      document.body.appendChild(imgElement);
    });
  </script>
</body>
</html>

4. 앱 실행

터미널에서 node server.js 명령을 사용하여 서버를 실행합니다. 그리고 웹 브라우저에서 http://localhost:3000에 접속하면 사진 공유 앱이 실행됩니다.

클라이언트는 사진을 선택하고 서버로 전송할 수 있으며, 다른 클라이언트가 사진을 전송하면 즉시 해당 사진을 받아 볼 수 있습니다.

이상으로 Socket.io를 사용하여 실시간 사진 공유 앱을 구현하는 방법에 대해 알아보았습니다. Socket.io는 웹 소켓을 쉽게 사용할 수 있도록 도와주는 강력한 도구이므로 다양한 실시간 애플리케이션을 구현하는 데 유용하게 활용할 수 있습니다.