Colin's Blog
[javascript] Socket.io를 사용하여 실시간 음성 채팅을 어떻게 구현할 수 있나요?

먼저, Node.js 환경에서 소켓 서버를 설정해야 합니다. 다음은 server.js 파일에 해당하는 예제 코드입니다.

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

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

io.on('connection', (socket) => {
  console.log('새로운 사용자가 접속했습니다.');

  socket.on('voice message', (msg) => {
    console.log('음성 메시지가 도착했습니다: ' + msg);
    // 여기에서 음성 메시지를 다른 사용자에게 브로드캐스팅하도록 구현합니다.
    io.emit('voice message', msg);
  });

  socket.on('disconnect', () => {
    console.log('사용자가 연결이 끊어졌습니다.');
  });
});

http.listen(3000, () => {
  console.log('서버가 시작되었습니다. 포트: 3000');
});

위 코드에서는 Express와 Socket.io를 사용하여 Node.js 서버를 설정하고, / 경로로 들어오는 요청에 대해 index.html 파일을 반환하도록 합니다. 그리고 connection 이벤트에서 새로운 클라이언트가 접속했을 때의 처리, voice message 이벤트에서 음성 메시지를 처리하고 브로드캐스팅하는 로직, 그리고 disconnect 이벤트에서 사용자 연결이 끊어졌을 때의 처리를 구현합니다.

다음으로, WebRTC를 사용하여 웹 브라우저에서 음성을 녹음하고 서버로 전송하는 코드를 작성해야 합니다. index.html 파일에 해당하는 예제 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
  <title>실시간 음성 채팅</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <h1>실시간 음성 채팅</h1>
  <button id="recordButton">녹음 시작</button>
  <button id="stopButton">정지</button>

  <script>
    const recordButton = document.getElementById('recordButton');
    const stopButton = document.getElementById('stopButton');

    // 녹음 버튼 클릭 시
    recordButton.addEventListener('click', () => {
      navigator.mediaDevices.getUserMedia({ audio: true })
        .then((stream) => {
          const mediaRecorder = new MediaRecorder(stream);
          mediaRecorder.start();

          // 음성 데이터를 서버로 전송
          mediaRecorder.addEventListener('dataavailable', (event) => {
            const audioData = event.data;
            socket.emit('voice message', audioData);
          });

          // 정지 버튼 클릭 시
          stopButton.addEventListener('click', () => {
            mediaRecorder.stop();
          });
        })
        .catch((error) => {
          console.error('녹음을 시작할 수 없습니다:', error);
        });
    });

    const socket = io();
    socket.on('voice message', (msg) => {
      // 서버로부터 음성 메시지를 받아와 처리하는 로직을 구현합니다.
      console.log('음성 메시지가 도착했습니다: ' + msg);
    });
  </script>
</body>
</html>

위 코드에서는 recordButton에 이벤트 리스너를 추가하여 녹음을 시작하고, 해당 이벤트에서 사용자 브라우저의 오디오 스트림을 얻어 미디어 레코더를 생성합니다. 그리고 dataavailable 이벤트를 사용하여 음성 데이터가 사용 가능해질 때마다 서버로 전송합니다. 또한, stopButton에 이벤트 리스너를 추가하여 정지 버튼이 클릭되면 녹음을 중지합니다.

서버 측에서는 클라이언트로부터 오는 음성 메시지를 받아와 다른 클라이언트에게 브로드캐스팅하고, 클라이언트 측에서는 서버로부터 오는 음성 메시지를 받아와 처리합니다.

위 코드를 실행하면 브라우저에서 음성 메시지를 녹음하고 서버로 전송하며, 다른 사용자는 해당 음성 메시지를 실시간으로 수신하여 처리할 수 있게 됩니다.

이 방법을 활용하여 실시간 음성 채팅을 구현할 수 있습니다. Socket.io와 WebRTC를 조합하여 음성 데이터를 전송하고, 클라이언트에서 해당 데이터를 처리하여 실시간으로 음성 채팅을 구현할 수 있습니다.

© 2018 Colin. All rights reserved.