실시간 멀티채팅 구현하기! - node.js
실시간 멀티채팅 구현하기!
웹에서 실시간처리
학부생활중 실시간처리 관련으로 TCP/IP를 배우면서 TCP/IP를 이용한 1:1 채팅을 구현해보셨을것이라 생각합니다. 하지만 실무에서는 전~~~~혀 쓸모가 없는 것 같습니다;; 수업중 책에 나와있는 소스대로 따라한다면 1:1채팅은 잘 되지만 멀티채팅구현은 머리를 굴리고 굴려야 간신히 구현할 수 있을 겁니다. 그러나 역시 실제서비스에 적용은 무리라고 생각됩니다.
그럼, 쉽게 프로그래밍을 짜면서 실제서비스에서 적용할 수 있는 방법이 무엇이 있을까요?
멀티채팅관련으로 알아보면서 괜찮은 것을 하나 찾았습니다 : )
요즘 젊은층(?)에서 많이 사용하고 있는 node.js + socket.io 입니다. 이걸 언어라고 설명을 해야할지 프레임워크라고 설명을 해야할지 애매합니다. node.js자체가 javascript를 기반으로 만들어진것으로 알고있습니다.
Wiki(node.js위키링크)를 참고하면 Node.js는 확장성 있는 네트워크 어플리케이션(특히 Server-side) 개발에 사용되는 소프트웨어 플랫폼이라고 정의되어 있습니다.
음. 저는 일단 프레임워크로 구분하겠습니다. 서버프로그램구현에 있어서 javascript언어를 이용하면서 특화되었다고 생각하시면 될 것 같습니다.
저는 javascript언어가 그렇게 익숙치않아서 가끔씩 문법을 확인하면서 작성하는데 언어가 익숙하신 분들은 정말 쉽게 작성하면서 놀랠 것 같네요. 후후
node.js + socket.io
node.js + socket.io? 이게 무엇일가요?
일단 node.js는 서버프로그램이라는 것은 알겠지만 socket.io 확장자부터 참 이상합니다. 간단하게 설명드리면 소켓통신을 쉽게 구현할 수 있도록 도와주는 아이라고 말씀드릴 수 있습니다.
node.js와 socket.io가 만나면 아까 위에서 힘들게 구현하던 멀티채팅을 순식간에 짧고 굵게 구현할 수 있습니다!
성능이 의심스러우신가요? 저는 테스트해보지 않았지만 다른분들께서 테스트한 내용들을 보게되면 실.시.간 접속 몇천명까지는 무리없이 처리해준다고 합니다! 엄청큰 서비스를 하지않는다면 몇천명이 정확하게 동시에 접속할일이 많을까요? 제 개인적으로는 그런걱정을 하고있다면, 그 서비스는 이미 성공했기 때문에 능력있는 개발자를 자신있게 영입하면 됩니다 :D 하하하하하하
이렇게 말만 주저리주저리해봤자 머리만 더 복잡해질 것 같네요. 직접 실습을 통해서 얼마나 위대한지 같이 확인해도록 합시다 : )
채팅 Server
node.js - node.js 링크
socket.io - Socket.IO 링크
본격적인 적용을 위해 위에 있는 두 웹사이트를 들어가서 설치를 해주세요. node.js를 설치하신 뒤 socket.io를 준비해주시면 됩니다 : )
기본적인 SOCKET통신을 활용하는 방법이 socket.io 웹사이트에 설명되어 있네요.
/* Server Source */
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});
/* Client Source */
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
</script>
이렇게 서버쪽과 클라이언트에 위 예제소스를 적용하시면 실시간으로 통신할 수 있는 페이지가 완성됩니다 : ) 하지만 “위에 있는 소스가지고 채팅을 어떻게 만들어?” 하시는 분이 있을지도 모르겠습니다.
/* 실제 적용한 Server Source */
var io = require('socket.io').listen(50000);
io.sockets.on('connection', function(socket) {
socket.emit('connection', {
type : 'connected'
});
socket.on('connection', function(data) {
if(data.type == 'join') {
socket.join(data.room);
socket.set('room', data.room);
socket.emit('system', {
message : '채팅방에 오신 것을 환영합니다.'
});
socket.broadcast.to(data.room).emit('system', {
message : data.name + '님이 접속하셨습니다.'
});
}
});
socket.on('user', function(data) {
socket.get('room', function(error, room) {
socket.broadcast.to(room).emit('message', data);
});
});
});
위에는 제가 이것저것 수집하면서 제대로 작동하도록 만들어본 서버소스입니다 : )
각 사용자들이 원하는 채팅방에 접속하여 서로 실시간으로 채팅할 수 있도록 지원해주는 서버입니다.
socket.io에 의해서 사용자가 해당방에 접속하여 글작성시 서버는 같은방에 있는 타접속자에게 해당메세지를 브로드캐스트해주는 역할을 합니다.
만약 대화한 내용들을 저장하고 싶다면 데이터가 넘어오는 시점에서 원하는 DB에 Connection하여 기록하면 됩니다 : ) 저는 여기서 요즘 유행한다는 MongoDB(몽고DB)를 이용해보았고, 실험결과! 만족스러웠습니다.
그럼 다음은 Client에서는 어떻게 같은 방에 접속하며, 메세지를 주고받을 수 있는지 살펴보도록 하겠습니다!
채팅 Client
바로 위에서 아주아주아주 간단하게 Client소스를 보셨지만, 감이 잘 안오실 것 같네요. 그래서 나름 샘플소스를 준비해보았습니다. 아주 기본적으로 대화할 수 있도록 만들어보았습니다 : )
참고하셔서 클라이언트와 서버 모두 직접 구현해보아요 : )
<!DOCTYPE html>
<html>
<head>
<style>
.footer {
width: 100%;
height: 50px;
position: fixed;
bottom: 0;
}
</style>
</head>
<body>
<div class='j-message'>
</div>
<div class='j-footer'>
<table>
<tr>
<td width='100%'>
<input id='message-input' type='text'>
</td>
<td width='20%'>
<button id='message-button' type='submit'> 전송 </button>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="http://chat.socket.io/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
var serverURL = 'localhost:50000';
var name = 'jin';
var room = '100';
$(document).ready(function() {
var socket = io.connect(serverURL);
socket.on('connection', function(data) {
if(data.type == 'connected') {
socket.emit('connection', {
type : 'join',
name : name,
room : 100
});
}
});
socket.on('system', function(data) {
writeMessage('system', 'system', data.message);
});
socket.on('message', function(data) {
writeMessage('other', data.name, data.message);
});
$('#message-button').click(function() {
var msg = $('#message-input').val();
socket.emit('user', {
name : name,
message : msg
});
writeMessage('me', name, msg);
});
function writeMessage(type, name, message) {
var html = '<div>{MESSAGE}</div>';
var printName = '';
if(type == 'me') {
printName = name + ' : ';
}
html = html.replace('{MESSAGE}', printName + message);
$(html).appendTo('.j-message');
}
});
</script>
</body>
</html>
음… 졸면서 클라이언트 소스를 작성하기는 했는데, 잘 돌아가는지 테스트는 못해봤네요 ㅠㅠ 참고하시면서 작성하시면 잘될겁니다 : )
멀티채팅. 어려울 것 같았지만 저희는 너무나도 좋은 세상에 살고 있습니다.
대부분 라이브러리, 프레임워크 형태로 구현되어 있고, 잘 가져다가 사용하면 됩니다. 과거였다면 으~~~ 생각만해도 끔찍합니다.
하지만 저희는 이렇게 편리하게 구현되어있는 것들을 가지고 엄청난것을 만들어야 합니다.