Buttercoco

[MAIN] project_root = /home/python_user/project/api_server/ db_host = 127.0.0.1 db_port = 3306 db_user = test_user db_passwd = test_passwd db_name = test_db temp_path =/home/python_user/temp/ image_path =/home/python_user/image/

실시간으로 뉴스를 크롤링하여 뉴스 검색엔진 API 만들기 (1)	2018.08.07
Python sounddevice를 이용한 소리 탐지 (0)	2018.04.23
Django 에서의 간단한 마이그레이션 과정 (0)	2018.02.16
Flask socketIO simple usage and code (0)	2018.02.14
python multiprocessing 사용하기 (1)	2018.02.12

실시간으로 뉴스를 크롤링하여 뉴스 검색엔진 API 만들기 (1)

2018.08.07

Python sounddevice를 이용한 소리 탐지 (0)

2018.04.23

Django 에서의 간단한 마이그레이션 과정 (0)

2018.02.16

Flask socketIO simple usage and code (0)

2018.02.14

python multiprocessing 사용하기 (1)

2018.02.12

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

바로 갑니다앙~!

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>

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