2017. 12. 7. 17:13ㆍBackend
백엔드 언어로 Node.JS언어를 사용하고 있는 상황에서 쪽지, 채팅 구현을 위해 Socket.IO를 적용해보았다.
이 과정을 통해 웹소켓, Socket.IO가 무엇인지 알아보도록 하자.
참고로 모바일 프로젝트를 진행 중이기 때문에, 클라이언트 웹을 따로 만들지 않았다.
웹소켓(WebSocket)
브라우저와 웹 서버 사이의 자유로운 양방향 메시지 송수신 방법으로 HTML5 표준 기술
그렇다면 웹소켓이 등장하게 된 배경은 무엇일까?
기존 클라이언트와 서버가 실시간으로 상호 작용하는 서비스를 만들고자 할 때 Polling, Long Polling, Stream등을 사용했다. 하지만 이 방식들은 모두 브라우저가 요청을 보낸 후 서버가 응답을 보내는 단방향의 메시지 교환 방식을 취하고 있다.
- Polling : 클라이언트가 서버에게 주기적으로 요청하여 서버에서 이를 처리해 넘겨주는 방식
원하는 요청 정보가 없을 경우 서버는 부정적인 응답을 반환, 클라이언트는 연결 끊음 - Long Polling : 클라이언트가 서버에 정보를 요청을 할 경우 원하는 정보를 찾거나 지정한 시간이 지날 때 까지 요청을 열어둔다.
즉, 원하는 답이 있거나 시간이 지난 경우에만 서버에서 응답이 간다. - Stream : 클라이언트에서 한번 요청하면 해당 정보에 대해 계속적인 응답을 주는 것.
클라이언트는 다시 요청하지 않아도 해당 정보에 대한 내용을 서버로 부터 계속 받게 된다.
따라서, 이러한 불편함과 사용자가 긴밀히 상호작용하는 서비스를 더 쉽게 만들고자 하는 요구로 웹소켓이 생겨났다.
아래 그림을 보면 WebSocket과 Stream의 차이를 잘 모를 수도 있을 것 같은데, WebSocket은 양방향 통신이 가능하다는 장점이 있어서 클라이언트에서 서버로도 쉽게 메시지 전송이 가능하다.
Socket.IO
거의 모든 웹 브라우저와 모바일 장치를 지원하는 실시간 웹 애플리케이션 지원 라이브러리로
자바스크립트를 이용하여 브라우저에 상관없이 실시간 웹을 구현할 수 있도록 한 기술이다.
Node.js의 모듈로 제공되고 있다.
설치
이미 만들어놓은 api서버가 있어서 --save를 사용해서 바로 package.json에 추가해주었습니다.
1.$ npm install socket.io --save
구현
express를 사용하고 있어 express와 연동하여 사용하였으며, Socket.IO 관련 코드만 작성하였습니다
클라이언트와 웹 서버가 연결되면 서버는 sessionid, timeout 정보를 보내고 클라이언트로부터 웹소켓 지원여부와 크로스 도메인 설정 정보 등을 주고받은 후 적합한 실시간 웹 방식을 선택한다.
연결된 서버와 클라이언트는 .emit으로 메시지를 전달할 수 있고, .on으로 해당 메시지를 받아 어떤 작업을 수행할지 기술할 수 있다.
그리고 자신을 제외한 클라이언트 다수에게 같은 메시지를 보내고자 할 때는 .emit 대신 .broadcase.emit을 사용하면 된다.
1.// app.js
2.var app = require('express')();
3.
4.app.set('port', process.env.PORT || 3000);
5.
6.var server = require('http').createServer(app);
7.var io = require('socket.io').listen(server);
8.
9.server.listen(3000, function() {
10. console.log('서버 돌아가는 중 ~~');
11.});
12.
13.io.sockets.on('connection', function(socket) {
14. socket.emit('news', { hello: 'world' });
15. socket.on('my other event', function(data) {
16. console.log(data);
17. });
18.});
위의 코드에서 ‘connection’, ‘news’, ‘my other event’는 이벤트 이름이고 이것을 통해 .on, .emit으로 메시지를 주고 받는다.
이제 $ node app.js로 서버를 돌려 클라이언트와 연결되면
‘connection’으로 연결되었다는 사실을 알 수 있고 연결되자마자
emit을 사용해 클라이언트에게 key가 hello고 value가 world인 ‘news’를 보내게 된다.
또한, ‘my other event’라는 이벤트를 클라이언트로부터 받게 되면 클라이언트에서 보낸 데이터를 콘솔 창에 출력한다.
위의 예제는 단순히 테스트용을 위한 것이므로 이를 활용한 채팅서버 개발 코드와 위의 테스트 코드와 연동되는 iOS 코드는 추후 작성할 예정