NodeJS Express 와 Socket.io 를 이용하여 채팅 앱 만들기

 NodeJS , Express 그리고 Socket.io 을 이용하여 간단한 채팅 앱 ( 메시지 앱 ) 을 만드는 방법입니다. 기본적으로 Socket.io ( http://socket.io ) 에 들어가 보시면 기본적인 튜토리얼 ( http://socket.io/get-started/chat/ ) 이 있는대요. 여기서는 이전에 진행하던 NodeJS + Express 튜토리얼을 연장하여 간단하게 코드만 넣어 보겠습니다. 

 튜토리얼을 보시기전 NodeJS + Express generator 를 모르신다면 한번 보시기 바랍니다.

2015/10/01 - [Programming Language/NodeJS] - NodeJS 에서 Express 설치 및 시작하기

* 프로젝트의 기반은 Express generator 로 생성된 프로젝트를 기준으로 합니다.

생성된 프로젝트 내부로 들어가서 socket.io 를 추가해주도록합니다.

$ npm install socket.io -save

 정상적으로 추가 되었다면 코드들을 추가할 차례 입니다. 우선 라우터에 chat 페이지를 보여주기위한 chat 을 추가해주도록 합니다.

var routes = require('./routes/index');
var users = require('./routes/users');
var chat = require('./routes/chat'); // 추가됨

routes/ 폴더에 chat.js  파일을 생성 후 아래와 같은 코드를 추가합니다.

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
	res.render('chat', { title: 'chat tutorial' }); // View 에 chat.jade 를 추가해야됨

});

module.exports = router;

 views 에는 chat.jade 를 추가하고 아래의 코드를 넣어 주도록 합니다. express 는 기본적으로 jade 템플릿을 이용하기 때문에 jade 를 이용했습니다.

extends layout

block content
    ul#messages
    form(action='')
      input#m(autocomplete='off')
      button Send
    
    style.
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { padding:0px; font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }

      
    script(src='https://cdn.socket.io/socket.io-1.3.7.js')
    script(src='http://code.jquery.com/jquery-1.11.1.js')
    script.
      
      var socket = io();
      
      $('form').submit(function(){
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
      });
      
      socket.on('chat message', function(msg){
        $('#messages').append($('
').text(msg));
      });

이제 client 부분은 대충 끝낫습니다. 다시 app.js 로 돌아와서 아래와 같이 코드를 추가해주시기 바랍니다. // 추가 라고 되어 있는 부분들을 추가해주시면 됩니다.

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');
var chat = require('./routes/chat'); // 추가

var app = express();
var http = require('http').Server(app); // 추가
var io = require('socket.io')(http); // 추가

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
//app.use(logger('dev')); // 주석처리
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.set( "ipaddr", "127.0.0.1" ); // 추가
app.set( "port", 3000 ); // 추가


/*** Routing ***/
app.use('/', routes);
app.use('/users', users);
app.use('/chat', chat); // 추가

http.listen(app.get('port'), function(){
    console.log("Express server listening on port " + app.get('port'));
}); // 추가

/*** Socket.IO 추가 ***/
io.on('connection', function(socket){
	
	console.log('a user connected');
	
	socket.broadcast.emit('hi');
	
	socket.on('disconnect', function(){
		console.log('user disconnected');
	});
	
	socket.on('chat message', function(msg){
		console.log('message: ' + msg);
		io.emit('chat message', msg);
	});  

});	


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});


module.exports = app;

이제 node app.js 를 이용하여 서버를 실행하여 주시면 채팅앱이 정상적으로 실행 되는 것을 확인하실 수 있습니다.

 간단하게 한가지 더 팁을 드리다면 jade 템플릿이 어색하신분은 아래의 페이지를 참고해보시기 바랍니다. html 을 jade 로 변경해주는 페이지 입니다.

 html to jade : http://html2jade.org/

즐거운 하루 되시기 바랍니다.