Socket.io를 사용하여 실시간 음악 스트리밍 서비스 구현하기
음악 스트리밍 서비스를 구현하기 위해서는 실시간 통신과 파일 전송이 필요합니다. 이를 위해 Socket.io를 사용하면 브라우저와 서버 간 양방향 통신을 손쉽게 구현할 수 있습니다. 이제 Socket.io를 사용하여 실시간 음악 스트리밍 서비스를 구현하는 방법을 알아보겠습니다.
1. 프로젝트 설정
먼저 프로젝트를 초기화하고 Socket.io를 설치해야 합니다. 다음 명령을 터미널에서 실행하여 프로젝트를 설정하세요.
$ npm init -y
$ npm install socket.io
2. 서버 구현
음악 파일을 전송하고 클라이언트와 실시간 통신을 담당할 서버를 구현합니다. server.js 파일을 생성하고 다음과 같이 코드를 작성하세요.
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
// 클라이언트가 연결되었을 때 실행되는 이벤트 핸들러
io.on('connection', (socket) => {
console.log('클라이언트가 연결되었습니다.');
// 음악 파일을 클라이언트로 전송하는 함수
function sendMusic() {
// 음악 파일을 읽어온 후 클라이언트로 전송
// ...
// 예시로 음악 파일을 전송하는 코드 작성
const music = 'music.mp3';
const file = fs.readFileSync(music);
socket.emit('music', file);
}
// 클라이언트가 음악 재생을 요청했을 때 실행되는 이벤트 핸들러
socket.on('play', () => {
console.log('음악 재생 요청을 받았습니다.');
sendMusic();
});
// 클라이언트와의 연결이 끊어졌을 때 실행되는 이벤트 핸들러
socket.on('disconnect', () => {
console.log('클라이언트가 연결을 끊었습니다.');
});
});
// 서버를 실행
http.listen(3000, () => {
console.log('서버가 실행되었습니다.');
});
3. 클라이언트 구현
이제 클라이언트 측에서 서버와 통신하고 음악을 재생하는 기능을 구현합니다. index.html 파일을 생성하고 다음과 같이 코드를 작성하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>음악 스트리밍 서비스</title>
</head>
<body>
<button id="playButton">재생</button>
<audio id="audioElement" controls></audio>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
// 서버에서 음악 파일을 받았을 때 실행되는 이벤트 핸들러
socket.on('music', (file) => {
const audioElement = document.getElementById('audioElement');
const fileBlob = new Blob([file], { type: 'audio/mp3' });
const fileUrl = URL.createObjectURL(fileBlob);
audioElement.src = fileUrl;
});
const playButton = document.getElementById('playButton');
playButton.addEventListener('click', () => {
socket.emit('play');
});
</script>
</body>
</html>
위 코드에서는 클라이언트가 재생 버튼을 클릭하면 play 이벤트를 서버로 전송하고, 서버는 이벤트를 받아 해당 클라이언트에게 음악 파일을 전송합니다. 받은 음악 파일은 audio 요소를 통해 재생됩니다.
4. 실행하기
모든 준비가 끝났으면 서버를 실행하여 음악 스트리밍 서비스를 테스트해보세요.
$ node server.js
웹 브라우저에서 http://localhost:3000에 접속하고 재생 버튼을 클릭하면 음악이 재생됩니다. 클라이언트 수가 증가하면 Socket.io를 통해 모든 클라이언트에게 음악이 전송되므로 실시간 음악 스트리밍 서비스를 구현할 수 있습니다.
결론
Socket.io를 사용하여 실시간 음악 스트리밍 서비스를 구현하는 방법을 알아보았습니다. Socket.io를 활용하면 실시간 통신 기능을 쉽게 구현할 수 있으며, 증가하고 있는 사용자 수에도 대응할 수 있습니다. 음악 뿐만 아니라 영상, 채팅 등 다양한 실시간 기능을 구현할 때 Socket.io를 사용해보세요.