[2019.04.24] 실시간 통신 API - webSocket

 

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

 

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

 

소켓 모듈 설치

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은 알림(메세지, 어플 알람) 용도로 쓰는게 맞는 것 같다.