2025.03.16 | 조회 : 61
윈도우 및 우분투에서 랜덤 화상채팅(WebRTC) 구축하기
1. 개요
랜덤 화상채팅(WebRTC)을 구축하려면 **PHP(CodeIgniter)와 Node.js(Socket.io)**를 함께 사용해야 합니다. 이 글에서는 윈도우와 우분투 환경에서 Socket.io를 설치하고 WebRTC를 설정하는 방법을 단계별로 설명합니다.
2. Node.js 및 Socket.io 설치 (윈도우)
1) Node.js 설치 여부 확인
먼저, 윈도우에 Node.js가 설치되어 있는지 확인합니다.
node -v
npm -v
버전이 출력되면 설치된 상태입니다. 설치되지 않았다면 Node.js 공식 사이트에서 LTS 버전을 다운로드하여 설치합니다.
2) 프로젝트 폴더 생성 및 Socket.io 설치
프로젝트 폴더를 만들고 이동합니다.
mkdir randomchat_server
cd randomchat_server
다음 명령어로 Node.js 프로젝트를 초기화하고 필요한 패키지를 설치합니다.
npm init -y
npm install express socket.io cors
3) WebSocket 서버 생성 (server.js)
프로젝트 폴더에 server.js 파일을 만들고 아래 내용을 추가합니다.
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
const http = require('http').createServer(app);
const io = require('socket.io')(http, {
cors: {
origin: "*",
methods: ["GET", "POST"]
}
});
io.on('connection', (socket) => {
console.log('사용자 접속:', socket.id);
socket.on('offer', (data) => {
socket.to(data.to).emit('offer', { from: socket.id, offer: data.offer });
});
socket.on('answer', (data) => {
socket.to(data.to).emit('answer', { from: socket.id, answer: data.answer });
});
socket.on('ice-candidate', (data) => {
socket.to(data.to).emit('ice-candidate', { from: socket.id, candidate: data.candidate });
});
socket.on('disconnect', () => {
console.log('사용자 연결 해제:', socket.id);
});
});
http.listen(3000, () => {
console.log('Socket.io 서버가 포트 3000에서 실행 중입니다.');
});
4) 서버 실행
node server.js
정상적으로 실행되면 콘솔에 다음과 같은 메시지가 출력됩니다.
Socket.io 서버가 포트 3000에서 실행 중
3. WebRTC 클라이언트 설정
1) HTML 코드 (화면 구성)
<video id="localVideo" autoplay playsinline muted></video>
<video id="remoteVideo" autoplay playsinline></video>
<button id="startMatch">매칭 시작</button>
2) JavaScript 코드 (WebRTC 설정)
let socket = io.connect('ws://localhost:3000');
let localStream;
let peerConnection;
let configuration = {
iceServers: [
{ urls: 'stun:stun.l.google.com:19302' }
]
};
async function getLocalMedia() {
try {
localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
document.getElementById('localVideo').srcObject = localStream;
} catch (error) {
console.error('미디어 장치 접근 오류:', error);
}
}
document.getElementById('startMatch').addEventListener('click', async () => {
peerConnection = new RTCPeerConnection(configuration);
localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
peerConnection.ontrack = event => {
document.getElementById('remoteVideo').srcObject = event.streams[0];
};
let offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
socket.emit('offer', { offer: offer });
});
socket.on('offer', async (data) => {
await peerConnection.setRemoteDescription(new RTCSessionDescription(data.offer));
let answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);
socket.emit('answer', { answer: answer });
});
socket.on('answer', async (data) => {
await peerConnection.setRemoteDescription(new RTCSessionDescription(data.answer));
});
4. 우분투에서 Node.js 및 Socket.io 설치
1) Node.js 설치
sudo apt update
sudo apt install nodejs npm
설치 후 버전 확인:
node -v
npm -v
2) 프로젝트 폴더 이동 및 Socket.io 설치
윈도우에서 만든 프로젝트를 우분투 서버로 업로드한 뒤 다음 명령어 실행:
cd randomchat_server
npm install
3) 방화벽 설정 (3000 포트 개방)
sudo ufw allow 3000/tcp
4) 서버 실행
node server.js
백그라운드 실행을 원하면:
npm install pm2 -g
pm2 start server.js
pm2 save
pm2 startup
5. 테스트 방법
1) 한 대의 PC에서 Chrome과 Edge로 테스트
- Chrome:
http://localhost/randomchat - Edge:
http://localhost/randomchat
각 브라우저에서 startMatch 버튼을 눌러 서로 연결됩니다.
2) 스마트폰을 사용한 테스트
스마트폰에서 PC의 로컬 IP 주소로 접속하여 테스트합니다.
ip a | grep inet
출력된 IP 예시: 192.168.0.100
스마트폰에서 http://192.168.0.100/randomchat으로 접속하면 됩니다.
6. 결론
이제 윈도우와 우분투에서 WebRTC와 Socket.io를 활용한 랜덤 화상채팅 서버를 구축하고 테스트할 수 있습니다.
추가적인 문제가 발생하면 콘솔 로그를 확인하고 수정하세요.
