본문으로 바로가기



 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/


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

    저작자 표시 비영리 변경 금지
    신고
    크리에이티브 커먼즈 라이선스
    Creative Commons License

    댓글을 달아 주세요

    튜토리얼북
    블로그 이미지 눈싹 님의 블로그
    VISITOR 오늘450 / 전체536,600