NodeJS

03. ECMA6 로 해보기 ( chatServer (기본채팅) ) [Node.js]

민돌이 2016. 11. 15. 17:20
반응형

채팅 서버 ( chatServer )


chatServer.js


const http = require('http');

const fs = require('fs');

const socket = require('socket.io');


const server = http.createServer( (request, response) => {


  fs.readFile('view/chatClient.html', 'UTF-8', (error, data) => {

      response.writeHead( 200, {'Content-Type' : 'text/html'} );

      response.end(data);

  });

}).listen(8000);


// Socket Server 생성 및 시작

const io = socket.listen(server);


let client = [];


// 브라우저가 Socket 서버로 연결을 했을 때...

io.sockets.on('connection', (socket) => {


  client.push(socket);


  socket.emit('append',

        {'name' : socket.id, 'msg' : socket.id + '님이 접속 했습니다'});

  // 브라우저가 서버로 데이터를 전송했을 때

  socket.on('receipt', (data) => {

    console.log(data);


    // 파이프로 연결될 모든 클라이언트들에게

    // 클라이언트의 append 이벤트를 실행시킨다.

    for ( let i in client ){

      client[i].emit('append', data);

    }

    // socket.emit('append', data);

  });

});


chatClient.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chat Client</title>
    <script type="text/javascript"
            src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">
      $().ready(function() {
          var socket = io.connect();
          $("#send").click(function () {
              // 서버의 receipt 이벤트를 실행 시켜야 함.
              var message = {
                name : $("#name").val(),
                msg : $("#message").val()
              };
              socket.emit('receipt', message);
          });
          socket.on('append', function(data) {
              $("#cathHistory").append('<p>&nbsp;<span>' + data.name +
                '</span><span>' + data.msg + '</span></p>');
          });
      });

    </script>
  </head>
  <body>
    <h1>Chatting</h1>
    <hr/>
    <input type='text' id='name' />
    <input type='text' id='message' />
    <input type='button' id='send' value='전송' />
    <hr/>

    <div id='cathHistory'> </div>

  </body>
</html>


반응형