[javascript] Socket.io를 사용하여 실시간 파일 공유 서비스를 어떻게 구현할 수 있나요?
Socket.io를 사용하여 실시간 파일 공유 서비스를 구현하는 방법에 대해 알아보겠습니다.
- 프로젝트 설정
- 먼저, 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번 포트에서 구동 중입니다.'); });
- 먼저, Node.js 및 Socket.io를 설치해야 합니다. 이를 위해 프로젝트 폴더에서 다음 명령어를 실행합니다:
- 클라이언트 구현
- 클라이언트 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>
- 클라이언트 HTML 파일을 생성하고 다음 코드를 추가합니다:
- 테스트하기
- 터미널에서 서버 파일(server.js)을 실행합니다:
node server.js
- 웹 브라우저에서 클라이언트 HTML 파일을 열고 파일을 선택하여 전송합니다.
- 다른 웹 브라우저 창을 열어 동일한 클라이언트 HTML 파일을 실행하고 파일을 전송해보면 파일이 실시간으로 공유되는 것을 확인할 수 있습니다.
- 터미널에서 서버 파일(server.js)을 실행합니다:
위의 방법을 따라하면 Socket.io를 사용하여 실시간 파일 공유 서비스를 구현할 수 있습니다. Socket.io는 WebSocket을 기반으로 동작하기 때문에 실시간 데이터 전송을 쉽게 처리할 수 있습니다. 자세한 내용은 Socket.io 공식 문서를 참조하시기 바랍니다.
참고자료:
- Socket.io 공식 문서: https://socket.io/docs/