-
[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은 알림(메세지, 어플 알람) 용도로 쓰는게 맞는 것 같다.
반응형'개발 블로깅 > Server&DataBase 개념' 카테고리의 다른 글
[2019.04.29] Mysql 설치방법(맥북 환경) 및 node.js 연동 (0) 2019.04.29 [2019.04.27] Promise 꿀팁 - util 모듈 promisify() (0) 2019.04.27 [2019.04.24] API 통신 방식 -express (0) 2019.04.24 [2019.04.23] API 서버를 만들어보자 - http 방식 (2) 2019.04.23 [2019.04.23] RESTful API 개념 (0) 2019.04.23 -