상세 컨텐츠

본문 제목

[node.js] 실시간 멀티채팅 구현하기!

프로그래밍/서버관련

by jin* 2014. 5. 18. 17:55

본문







웹에서 실시간처리

학부생활중 실시간처리 관련으로 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.jssocket.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에 의해서 사용자가 해당방에 접속하여 글작성시 서버는 같은방에 있는 타접속자에게 해당메세지를 브로드캐스트해주는 역할을 합니다.

만약 대화한 내용들을 저장하고 싶다면 데이터가 넘어오는 시점에서 원하는 DBConnection하여 기록하면 됩니다 : ) 저는 여기서 요즘 유행한다는 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>

음… 졸면서 클라이언트 소스를 작성하기는 했는데, 잘 돌아가는지 테스트는 못해봤네요 ㅠㅠ 참고하시면서 작성하시면 잘될겁니다 : )

멀티채팅. 어려울 것 같았지만 저희는 너무나도 좋은 세상에 살고 있습니다.

대부분 라이브러리, 프레임워크 형태로 구현되어 있고, 잘 가져다가 사용하면 됩니다. 과거였다면 으~~~ 생각만해도 끔찍합니다.

하지만 저희는 이렇게 편리하게 구현되어있는 것들을 가지고 엄청난것을 만들어야 합니다.

카카오톡, 라인, 와츠앱을 넘어 더 좋은 채팅을 많이 많이 개발해보아요 : )

지금까지 읽어주셔서 감사합니다.

위에 기술한 내용은 조만간 잘 정리하여 GitHub에 오픈소스로 공개할 예정입니다.

등록하면 이곳에 주소 적어놓겠습니다. 감사합니다.


Github에 등록하였습니다 : https://github.com/devjin0617/nodejs-socket.io-chat-example


관련글 더보기

댓글 영역