ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 03. ECMA6 로 해보기 ( chatServer (기본채팅) ) [Node.js]
    NodeJS 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>


    반응형

    댓글

Designed by Tistory.