Socket.io Room 채팅 구현하기

node.js 모듈인 socket.io의 room 기능을 이용한 채팅방 예제

node.js의 인기모듈인 socket.io의 room 기능을 이용하여 간단한 채팅방 기능을 만들어보자. 두개의 채팅방에 각각 메시지를 전송하는 간단한 예제이기 때문에 express기본 템플릿엔진인 jade를 사용했다.

소스코드: https://github.com/jeongwooklee/socket.io-room-example

1. express 프로젝트 생성

$ express chat
$ cd chat && npm install

2. socket.io 모듈 설치

$ npm install socket.io —save

3. app.js에 socket.io 추가

var app = express();
var server = http.createServer(app);
var io = require(‘socket.io’).listen(server);
.
.
.
server.listen(app.get('port'), function(){
  console.log(...)
});

4. script 추가 (layout.jade)

script(src='http://code.jquery.com/jquery-1.10.1.min.js')
script(src='/socket.io/socket.io.js')
script(src='/javascripts/chat.js')

5. html 틀 작성 (index.jade)

extends layout
block content
  #joinButtonWrap
    button(data-id='1') Room1
    button(data-id='2') Room2
  #chat(style='display:none’)
    h1
    #log
    input(type='text' id='message')
    button(type='button' id='submit') Submit

6. client 코드 작성 (chat.js)

$(function() {
  // Socket.io connection
  var socket = io.connect('http://localhost'),
      roomId = '';
  // Join to room
  $('#joinButtonWrap').on('click', 'button', function() {
    roomId = $(this).data('id');
    $('#chat')
      .show()
      .find('h1').html('room' + roomId).end()
      .find('#log').html('');
    socket.emit('join:room', {roomId: roomId});
  });
  // Send a message
  $('#submit').on('click', function() {
    var msg = $('#message').val();
    if(!msg) return;
    socket.emit('send:message', {
      roomId: roomId,
      message: msg
    });
  });
  // Receive a message
  socket.on('send:message', function(data) {
    $('#chat').find('#log').append('<p>' + data + '</p>');
  });
});

7. server 코드 작성 (app.js)

// Socket.io
io.sockets.on('connection', function(socket) {
  // Join Room
  socket.on('join:room', function(data) {
    socket.join('room' + data.roomId);
  });
  // Broadcast to room
  socket.on('send:message', function(data) {
    io.sockets.in('room' + data.roomId).emit('send:message', data.message);
  });
});