[Socket.io] Chatting 구현하기

socket.io를 이용하여 간단한 chatting 애플리케이션을 만들어 보자 

* 참조 : socket.io이용하여 chat 구현하기

> Express를 통하여 chat 컨텍스트를 만든다 (참조)

express chat

> app.js 에 socket.io를 위한 /chat 네임스페이스를 설정하고(jade이용), socket.io에 대하여 설정한다

// declaration

var express = require('express');

var app = express()

    , http = require('http').createServer(app)

    , io = require('socket.io').listen(http)

    , routes = require('./routes')

    , user = require('./routes/user')

    , chat = require('./routes/chat')

    , path = require('path');

app.get('/chat', chat.list);

// http listen

http.listen(app.get('port'), function(){

    console.log("Express server listening on port " + app.get('port'));

});

// socket connection event on

var chat = io

    .of('/chat')

    .on('connection', function(socket) {  // /chat uri로 접속이 들어오는 이벤트 처리 

        console.log('>>> chat server connection');

        socket.on('msg', function(data) { // msg 이벤트 처리 

            console.log('>>> data : ' + data.name + ', ' + data.msg);

            chat.emit('new', data); // new 이벤트를 발행하여 data를 다시 클라이언트들에게 전송 

        });

})

> jade 관련 파일 : chat.js 와 chat.jade 

// /routes 디렉토리의 chat.js 파일

exports.list = function(req, res){

    res.render('chat', { title: 'Chatting Example' });

};

//  /views 디렉토리의 chat.jade 파일

doctype 5

html

  head

    title= title

    link(rel='stylesheet', href='/stylesheets/style.css')

    script(src='/socket.io/socket.io.js')

    script(src='http://code.jquery.com/jquery-1.8.3.min.js')

    script(src='chat_module.js')

  body

    h1= title

    div#wrapper

        div#messages  // chat 메세지가 찍힌다 

        div.nic

            input#name(name='name', type='text')  // 이름 입력 창

        div

        textarea#message  // 메세지 입력 창

        br

        input#send(type='submit', value='Send')

    // chat_module.js에서 Chat 오브젝트를 초기화 한다 

    script

        $(document).ready(function() {

            Chat.initialize('/chat');

        });

> chat_module.js 안에 로직을 담는다 : 해당 모듈은 express의 public 디렉토리 밑에 놓는다 (즉시 실행 함수로 만듦)

(function() {

    window.Chat = {

      socket : null,

     // 초기화 시에 /chat uri 네임스페이스를 넣어주었다 

      initialize : function(socketURL) {

          console.log('step1 socketURL : %s', socketURL);

          this.socket = io.connect(socketURL);

          console.log('step2 conneciton ok : %s ', this.socket);

   // send 버튼을 누를 경우 실행 

          $('#send').click(function() {

              Chat.send();

          });

    // textarea 메세지 입력하고 enter key 칠 경우 

          $('#message').keyup(function(evt) {

             if((evt.keyCode || evt.which) == 13) {

                 Chat.send();

                 return false;

             }

          });

          // 서버로 부터 new 이벤트가 오면 메세지를 추가하는 add 콜백 설정  

          this.socket.on('new', this.add);

      },

      // 서버로 부터 발행된 new 이벤트 처리하는 펑션

      add : function(data) {

          console.log('add message : %s', data.name +', '+ data.msg);

          var name = data.name || 'anonymous';

          var msg = $('<div class="msg"></div>')

              .append('<span class="name">' + name + '</span>: ')

              .append('<span class="text">' + data.msg + '</span>');

          console.log('add html : %s', msg);

          $('#messages').append(msg).animate({scrollTop: $('#messages').prop('scrollHeight')}, 0);

      },

      // 메세지 넣고 send 버튼을 클릭할 때 수행하는 펑션 

      send : function() {

          console.log('sending message : %s', $('#name').val() +', '+ $('#message').val());

          this.socket.emit('msg', {

              name: $('#name').val(),

              msg: $('#message').val()

          });

          $('#message').val('');

      }

    };

}());

> node app 명령으로 Node 서버를 실행시킨 후 브라우저로 호출한다 (http://localhost:3000/chat)

youngsik과 dowon 끼리 대화하는 것을 서버가 전송하고 있다 

* Express + Jade + Socket.io 프로젝트 파일 전체  

chat.zip

* js 파일이 변경될 때 마다 Node.js를 restart 하고 싶지 않다면 supervisor를 사용한다