[NodeJs-채팅만들기-1] Soket.IO

Node.js의 기본 내장 모듈만을 사용하여 WebSocket 프로토콜을 활용한 서버 및 클라이언트 모듈을 직접 구현하는 것은 WebSocket API를 모두 직접 만드는 것이며 많은 공수가 듭니다. 하지만, WebSocket 역시 여러 사람들에 의해 3rd-party모듈로 쉽게 구현할 수 있습니다.

구 중에 가장 많이 사용하고 있는 모듈이 바로 Socket.IO입니다.

Socket.IO의 공식홈페이지 http://socket.io/#how-to-use에서 어떻게 Socket.IO를 사용할 수 있는지, 예제와 함께 제공하고 있습니다.

먼저 npm으로 Socket.IO를 설치합니다.

npm install socket.io

Socket.IO는 모든 브라우저 및 모바일 장치의 서로 다른 전송 메커니즘 사이에서도 사용이 가능한 실시간 어플리케이션을 만드는 것이 목적입니다.

Socket.IO는 의심할 여지없이 100% 순수 자바스크립트로 작성되었습니다. 공식 홈페이지는 http://socket.io/입니다.

백엔드 소스를 살펴보면

var io = require('socket.io').listen(80); io.socket.on('connection', function(socket){ socket.emit('news', {hello:'world'}); socket.on('event', function(){ console.log(data); }); });

첫번째 줄에서 Socket.IO를 활용하여 서버를 구동하는 방식을 보여주고 있습니다. 그 다음에는 서버를 구동한 후 반환된 값 'io'변수를 활용하여 커넥션이 생성되었을 때의 이벤트에 대한 동작 방식을 구현하였습니다.

커넥션이 생성되면 socket을 넘겨받아 socket.emit() 함수를 통하여 메시지를 전달하고 있습니다. 첫 번째 인자값의 'news'는 일종의 키 값입니다. 클라이언트에서 이 값을 통해, 서버에서 전송되는 메시지를 구분할 수 있습니다. 물론, 클라이언트 쪽에서도 같은 방식으로 구분합니다.

그 다음 줄에는 socket.on 함수를 통하여 클라이언트에서 데이터가 올라왔을 때의 이벤트에 대해 명시하고 있습니다. 콘솔에 해당 데이터를 출력하고 있습니다. 그런데 이번에는 클라이언트 쪽의 소스를 보겠습니다.

<script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect('http://localhost'); socket.on('news', function(data){ console.log(data); socket.emit('event', {my:'data'}); }); </script>

위의 소스는 HTML에 삽입되는 자바스크립트 형식입니다. 첫 번째 줄에서 socket.io.js파일을 바인딩하고 있습니다. 그 다음에 기술할 내용에 대한 레퍼런스 입니다.

다음 태그에서는 io.connect 함수에 서버 주소를 넣어 커넥션을 생성하여 소켓을 획득합니다. 이후에 소켓에 대한 이벤트를 명시하였습니다. 첫 번째 인자값에 'news'가 보입니다. 조금 전에 서버 소스에서 살펴본 emit 함수의 첫 번째 인자값과 동일합니다. 이는 emit이 상대방에게 이벤트를 발생하는 녀석임을 알 수 있습니다. 동작 방식은 단순합니다. 콘솔 로그에 데이터를 출력 후 다시 서버로 emit함수를 수행합니다.

서버와 클라이언트의 소스를 살펴 본 바와 같이 서버를 생성하거나 접속하는 코드를 제외한 부분은 서버나 클라이언트나 동일한 것을 알 수 있습니다. 서버와 클라이언트 모두 자바스크립트로 구현이 가능한 Node.js와 서버와 클라이언트 모두 데이터를 보내고 받는 메커니즘이 동일한 WebSocket 그리고 같은 구현 부분을 제공하는 Socket.IO... 짧은 메시지를 채팅에 참여한 모든 클라이언트에게 보내고 받아야 하는 채팅 형식의 웹 어플리케이션에는 그야말로 금상첨화 입니다.