Socket.io를 사용하여 실시간 파일 공유 서비스를 구현하는 방법에 대해 알아보겠습니다.

1. 프로젝트 설정
   • 먼저, Node.js 및 Socket.io를 설치해야 합니다. 이를 위해 프로젝트 폴더에서 다음 명령어를 실행합니다:

     npm init
     npm install socket.io --save
     

   • 서버 파일(server.js)을 생성하고 다음 코드를 추가합니다:

     const express = require('express');
     const app = express();
     const server = require('http').createServer(app);
     const io = require('socket.io')(server);
     
     // 클라이언트 연결 시 호출되는 이벤트 핸들러
     io.on('connect', (socket) => {
       console.log('새로운 클라이언트 연결');
     
       // 파일 전송 이벤트 핸들러
       socket.on('sendFile', (data) => {
         // 파일을 받아 처리하는 로직을 작성합니다.
         console.log(`${data.fileName}을(를) 받았습니다.`);
         // 파일을 다른 클라이언트에게 전송
         socket.broadcast.emit('receivedFile', data);
       });
     
       // 클라이언트 연결 해제시 호출되는 이벤트 핸들러
       socket.on('disconnect', () => {
         console.log('클라이언트 연결 해제');
       });
     });
     
     // 서버 구동
     server.listen(3000, () => {
       console.log('서버가 3000번 포트에서 구동 중입니다.');
     });
     

2. 클라이언트 구현
   • 클라이언트 HTML 파일을 생성하고 다음 코드를 추가합니다:

     <input type="file" id="fileInput">
     
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
     <script>
       const socket = io();
     
       // 파일 선택 시 호출되는 함수
       function handleFileSelect(event) {
         const file = event.target.files[0];
     
         // FileReader 객체를 사용하여 파일을 읽습니다.
         const reader = new FileReader();
         reader.onload = function(e) {
           const fileData = { 
             fileName: file.name, 
             dataURL: e.target.result 
           };
           // 파일을 서버로 전송합니다.
           socket.emit('sendFile', fileData);
         };
         reader.readAsDataURL(file);
       }
     
       // 파일 선택 이벤트 리스너 등록
       document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
     
       // 서버로부터 파일을 받았을 때 호출되는 이벤트 핸들러
       socket.on('receivedFile', (data) => {
         // 파일을 받아 처리하는 로직을 작성합니다.
         console.log(`${data.fileName}을(를) 받았습니다.`);
       });
     </script>
     

3. 테스트하기
   • 터미널에서 서버 파일(server.js)을 실행합니다:

     node server.js
     

   • 웹 브라우저에서 클라이언트 HTML 파일을 열고 파일을 선택하여 전송합니다.
   • 다른 웹 브라우저 창을 열어 동일한 클라이언트 HTML 파일을 실행하고 파일을 전송해보면 파일이 실시간으로 공유되는 것을 확인할 수 있습니다.

위의 방법을 따라하면 Socket.io를 사용하여 실시간 파일 공유 서비스를 구현할 수 있습니다. Socket.io는 WebSocket을 기반으로 동작하기 때문에 실시간 데이터 전송을 쉽게 처리할 수 있습니다. 자세한 내용은 Socket.io 공식 문서를 참조하시기 바랍니다.

참고자료:

• Socket.io 공식 문서: https://socket.io/docs/