이번에는 지인과 함께 간단한 앱을 만들면서 생성하게 된 채팅서버를 공개해 봅니다.

바로 갑니다앙~!

var app = require('http').createServer(handler);
var fs = require('fs');
var io = require('socket.io').listen(app);

우선 http와 나중에 사용할 fs, 그리고 필수 라이브러리인 socket.io를 import 합니다.

if (process.argv.length < 3){
    console.log('app <port>');
    process.exit(1);
}
app.listen(process.argv[2]);
console.log(process.argv[2] +' Started!! ');

function handler(req, res) {
    fs.readFile(__dirname + '/index.html',
        function (err, data) {
            if (err) {
                res.writeHead(500);
                return res.end('Error loading index.html');
            }
            res.writeHead(200);
            data = data.toString('utf-8').replace('<%=host%>', req.headers.host);
            res.end(data);
        });
}

그리고 렌더링할 index.html 파일 경로를 설정해주고, 렌더링 코드를 입력해 줍니다.

process.argv로는 매개변수로 포트를 설정할 수 있도록 합니다.

그 다음으로 socket.io 코드를 작성합니다.

io.sockets.on('connection', function (socket) {
    fs.readFile( __dirname + "/../data/chat.json", "utf8", function (err, data) {
        prev_data = JSON.parse(data);
        socket.emit('init', prev_data);
        console.log(prev_data);
    });
    socket.on('message', function(data){
        var split_cnt = prev_data.length;
        if(split_cnt > 10){   // 저장될 채팅메시지의 갯수
            prev_data.splice(0,1);
        }
        prev_data.push(data);
        fs.writeFile( __dirname + "/../data/chat.json", JSON.stringify(prev_data), function(err) {
            // throws an error, you could also catch it here
            if (err) throw err;
            // success case, the file was saved
        });
        socket.broadcast.emit('message', data);
    });
});

chat.json은 서버상에 저장될 채팅 메시지를 json 파일로 저장하는 역할을 합니다.

경로는 여러분이 원하는 곳에 놔두셔도 됩니다.

그리고 중간에 저장될 채팅메시지 갯수를 지정할 수 있는데요. 배열 길이와 일치하도록 했습니다.

이것 또한 여러분이 커스터마이징 하시면 됩니다.

요 위까지 서버측 코드입니다.

——————————————————————————————-

이제 아래로 클라이언트 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>socket io redis store</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script type="text/javascript" src="/socket.io/socket.io.js"></script>
  <script>
      var socket = io.connect('http://<%=host%>');

      $(document).ready(function(){
          socket.on('init',function(data){
              for(var i=0; i<data.length; i++){
                  console.log(data[i]);
                  $('#chat').append('<li>' + data[i] + '</li>');
              }
          });
          socket.on('message',function(data){
              $('#chat').append('<li>' + data + '</li>');
          });
          $('#btnSend').click(function(){
              send();
          });
          $('#inputT').keyup(function(e){
              if(e.keyCode == 13)
                  send();
          });
      });
      function send() {
          var message = $('#inputT').val();
          if (message.length < 1) return;
          socket.emit('message', message);
          $('#chat').append('<li>'+message+'</li>');
          $('#inputT').val('');
      }
  </script>
</head>
<body>
<input type="text" id="inputT" />
<button id="btnSend">보내기</button>
<ul id="chat"></ul>
</body>
</html>

코드 작성을 완료하였으면 실행을 해줍니다.

node index.js 3000

저는 3000번 포트로 실행시켰습니다.

끝~