ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [2019.04.24] 실시간 통신 API - webSocket
    개발 블로깅/Server&DataBase 개념 2019. 4. 24. 23:55

     

    웹소켓이라는 통신 모듈을 사용하면, 꼭 클라이언트가 요청을 하지 않아도 서버 내에서 특정 데이터 변경이나 외부에서 이벤트를 발생하면, 클라이언트에게 신호를 보내는 방식이 있다.

     

    이 방식을 통해, 기존에 서버에게 주기적으로 요청을 보내서 받아왔던 실시간 데이터를, 소켓을 이용하여 서버에게 응답을 받으면 된다.

     

    소켓 모듈 설치

    npm i -D socket.io // 서버 전용 소켓
    npm i -D socket.io-client // 클라이언트 전용

     

    서버 전용과 클라이언트 전용 소켓 모듈이 따로 있다.

     

    # websocket 특징

    • get, post등과 같은 http method를 가지지 않는다.

    • 특정 통신을 위한 키를 가진다.

    • 데이터를 전달할 때, stringify 등의 데이터 처리를 안해줘도 된다.

    • , contens type등과 같은 통신 headers를 지정하지 않아도 된다.

     

    우선 소켓은 기본적으로 두가지 함수를 가지고 있다. 클라이언트, 서버 둘 다 포함된다.

    • socket.on(); : 데이터를 받는 함수
    • socket.emit(); : 데이터를 보내는 함수

     

    서버쪽 소켓 기본 틀

    const http = require('http'); // node에 내장된 http 모듈
    
    const server = http.createServer(); // 서버 생성
    
    const io = require('socket.io')(server);
    
    io.sockets.on('connection', function(socket){
      console.log('유저 접속 됨');
    
      socket.on('send', function(data){
        console.log('전달된 메시지:', data.msg)
        socket.emit('getMessage', {sendMSG: {aa:1}});
      })
      socket.on('disconnect', function(){
        console.log('접속 종료')
      })
    })
    
    server.listen(3000); // 서버 접속경로 설정

     

    다른 부분은 다 신경끄고, const io를 선언한 부분부터....

    우선 소켓모듈을 가져온다. 그리고 connection으로 열어줘서 통신에서 이루어질 함수들의 범위를 정해준다. 

      socket.on('send', function(data){
        console.log('전달된 메시지:', data.msg)
        socket.emit('getMessage', {sendMSG: {aa:1}});
      })

    중간에 이 부분이 클라이언트에게서 'send'라는 키로 데이터를 전달받는다.

    그리고 콘솔을 찍은 다음 socket.emit()함수를 이용해서 'getMessage'키로 클라이언트에게 데이터를 전달한다.

     

    클라이언트 소켓 기본 틀

    var socket = io('http://localhost:3000');
      
    
    socket.on('getMessage', function(data){
      console.log(data.sendMSG);
    });
    
    function click_btn(){
      var input = document.getElementById('inputText').value;
    
      socket.emit('send', {msg: input});
    
    }
    
    socket.on('connect', function(data){
    
    });

    첫번째 줄에 서버를 연결해준다.

    그리고 중간에 click_btn()함수는 브라우저에서 버튼을 클릭하면 실행되는 이벤트 함수이다. 함수가 실행되면, input값을 받아와서 socket.emit('send')으로 서버에게 데이터를 전달한다. (아까 서버 쪽 코드를 참조바람!)

    그리고 서버에서 받는 응답은 세번째 줄 socket.on('getMessage')에서 전달 받는다.

     

    매우 간단하다!

    그런데 사실 이 방식으로만 서버 클라이언트 통신을 하기에는 너무 보안이 취약한 점이 있다.

    내 생각에는 http 혹은 express로 API 통신을 하고, socket은 알림(메세지, 어플 알람) 용도로 쓰는게 맞는 것 같다.

    반응형

    댓글

Designed by Tistory.