socket.io에는 room 기능이 있습니다. 말그대로 그 방에 들어가면 그 방에 있는 사람들끼리만 메세지를 주고 받을 수 있는 기능입니다.
https://github.com/LearnBoost/socket.io/wiki/Rooms
처음에 이런 기능이 있는 줄 모르고 구현했었는데, wiki를 찾아보니 있네요.
사용법은 간단해요. 해당 socket 객체에 join, leave함수가 존재해요. join하고 방이름을 string으로 적으면 방에 입장하는 것이고, leave하면 방에서 나가는 것이에요.
그리고 방에 있는 사용자들에게 메세지를 보내려면
io.sockets.in('room').emit('event_name', data);
이렇게 하면 돼요.
그래서 이걸 이용해서 손쉽게 랜덤채팅을 만들 수 있어요. 사용자가 접속하면 자기 id로 방을 만들고, 다른 사용자가 들어왔을 때 1명이 있는 방이 있으면 입장시키면 돼요. 그럼 두명이서만 대화를 할 수 있어요. 나중에 disconnect할 때에는 그 사용자가 어디에 접속해있는지 socketRoom객체에 저장해두었다가 그 방을 폭파시키고 로비로 보내버리면 돼요.
※여기서 좀 주의할 점이 방을 만들면 io.sockets.manager.rooms에 방 목록을 볼 수 있는데, 여기에 방키값 앞에 "/"가 붙습니다. 그래서 다른 사용자들을 그 키로 입장 시킬 때 그 값을 제거하고 넣어야 하더라구요.
app.js
var app = require('http').createServer(handler),
io = require('socket.io').listen(app),
fs = require('fs');
app.listen(process.env.PORT || 9000);
function handler(req, res){
fs.readFile(__dirname + '/index.html',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
data = data.toString('utf-8').replace('<%=host%>', req.headers.host);
res.end(data);
}
);
};
// socket.io 셋팅
io.configure(function(){
io.set('transports', ['xhr-polling']);
io.set('polling duration', 10);
io.set('log level', 2);
});
var socketRoom = {};
io.sockets.on('connection', function(socket){
// 접속완료를 알림.
socket.emit('connected');
// chat요청을 할 시
socket.on('requestRandomChat', function(data){
// 빈방이 있는지 확인
console.log('requestRandomChat');
var rooms = io.sockets.manager.rooms;
for (var key in rooms){
if (key == ''){
continue;
}
// 혼자있으면 입장
if (rooms[key].length == 1){
var roomKey = key.replace('/', '');
socket.join(roomKey);
io.sockets.in(roomKey).emit('completeMatch', {});
socketRoom[socket.id] = roomKey;
return;
}
}
// 빈방이 없으면 혼자 방만들고 기다림.
socket.join(socket.id);
socketRoom[socket.id] = socket.id;
});
// 요청 취소 시
socket.on('cancelRequest', function(data){
socket.leave(socketRoom[socket.id]);
});
// client -> server Message전송 시
socket.on('sendMessage', function(data){
console.log('sendMessage!');
io.sockets.in(socketRoom[socket.id]).emit('receiveMessage', data);
});
// disconnect
socket.on('disconnect', function(data){
var key = socketRoom[socket.id];
socket.leave(key);
io.sockets.in(key).emit('disconnect');
var clients = io.sockets.clients(key);
for (var i = 0; i < clients.length; i++){
clients[i].leave(key);
}
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>socketio redis store</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect('http://<%=host%>');
$(document).ready(function(){
socket.on('connected', function(){
console.log('connected');
});
// 매칭완료되었을 때
socket.on('completeMatch', function(data){
console.log('completeMatch!');
$('.lobby').hide();
$('.wait').hide();
$('.chat').show();
});
// 대화를 받았을 때
socket.on('receiveMessage', function(data){
$('.chatResult').append('<li>' + data.message + '</li>');
});
// 상대방이 나갔을 때 나도 같이 로비로 나감.
socket.on('disconnect', function(data){
console.log('disconnect');
$('.lobby').show();
$('.chat').hide();
});
// 랜덤요청 시
$('#btnRequestRandomChat').click(function(){
$('.lobby').hide();
$('.wait').show();
socket.emit('requestRandomChat');
});
// 요청 취소 시
$('#btnCancelRequest').click(function(){
$('.lobby').show();
$('.wait').hide();
$('.chat').hide();
socket.emit('cancelRequest');
});
// 엔터입력 시
$('#inputMessage').keyup(function(e){
if (e.keyCode == 13){
send();
}
});
// 채팅 내용 전송 시
$('#btnChat').click(function(){
send();
});
});
function send(){
var message = $('#inputMessage').val();
if (message.length < 1){
alert('내용을 입력하세요.');
return;
}
socket.emit('sendMessage', {message:message});
$('#inputMessage').val('');
}
</script>
</head>
<body>
<div class="lobby container">
<button id="btnRequestRandomChat" class="btn">채팅입장</button>
</div>
<div class="wait container" style="display:none">
<div>상대방을 기다리는 중...</div>
<button id="btnCancelRequest" class="btn">취소</button>
</div>
<div class="chat container" style="display:none">
<input type="text" id="inputMessage" class="input-medium search-query" />
<button type="submit" id="btnChat" class="btn">전송</button>
<ul class="chatResult">
</ul>
</div>
</body>
</html>
이상입니다.
heroku에도 올려봤어요.
http://random-chat.herokuapp.com/
소스는 github에.....
https://github.com/mudchobo/nodejs-random_chat
