socket.io를 이용하여 간단한 chatting 애플리케이션을 만들어 보자
* 참조 : socket.io이용하여 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를 사용한다
