socket.io 를 이용한 실시간 Vote 프로그램 작성
Node & Express 2014. 3. 10. 22:24 |회사에서 일하다 문득... 공부도 할겸 소켓을 이용해서 찬반투표 프로그램을 하나 만들어 보자라는 생각이 들었다....
일찍 퇴근해서 만들어 봤다 ... Node의 socket.io 를 이용해서 !! 조만간 비쥬얼과 기능을 업그레이드 한 프로그램
을 Sprint4.0 의 sock.js 를 이용해서 만들어봐야 겠다. 일단은 포스팅 시작 !
ExpressVote.zip <=== 완성작
Prepare
일단 현재 내 PC 환경은
Node 개발 환경이 구성되어 있으며, 이클립스에 node.js 플러그인이 깔려 있는 상태다.
Note & Express 개발환경 구성은 생략한다.
ExpressVote 라는 Express 프로젝트를 하나 생성했고,
package.json 의 내용은 다음과 같다. (npm install 명령어를 실행하면 의존성 걸려있는 모듈이 자동으로 설치된다.)
Preview
완성된 프로젝트 폴더 구조 설명
jquery-1.11.0.js : Html 엘리먼트에 이벤트를 설정하기 위해서 사용했다. 물론 기본 자바 스크립트를 활용해도 상관 없다.
vote.js : JQuery를 활용해서 버튼별 이벤트를 설정하고 , Client-Side의 Socket과 관련된 엑션을 정의한다.
vote.jade : 간단한 UI 를 Jade Template Engine을 활용하여 구성하였다. 화면 UI 껍데기라고 생각하면된다.
app.js : Node의 핵!! app.js !! 서버 Socket을 설정하고, vote를 하면 client 소캣으로 emit 을 해주는 역활을 한다. Server-side
package.json : 프로젝트와 관련된 모듈의 의존성 관리.
완성된 프로그램 화면
프로그램은 매우 간단하다. 사용자가 접속해서 Accept , Denied 버튼을 누르면 투표수가 올라간다.
투표는 한번씩만 할수 있도록 제한한다. UI는 일단 신경쓰지 않는다...ㅠㅠ
Server-Side
기본적인 Jade 사용 관련, 또는 Route 설정과 관련된 부분은 넘어가겠다.
먼저 , 서버측에서 사용할 Socket 을 선언하면서 소켓을 깐다(?). 나같은 경우는 3000번 포트로 소캣을 열었다.
그리고 서버측에서 관리할 변수들을 선언하였다. 전체 유저수, 찬성, 반대수 같은 경우에는 클라이언트는 Push 된 값
만 확인하고 서버에서 값들을 관리한다.
io.sockets.on('connection',function(){}); 의 의미는 'connection'을 하면 function 안의 내용들을 수행하겠다는 뜻입니다. 여기서 간단하게 설명하자면 , On 은 어떠한 이벤트에 반응하는 리스너라고 생각하면 되고 , Emit 함수는 그 이벤트를 발생시키는 주체 라고 이해하면 편하겠다.
위에서는 사용자가 접속을 하면 전체 사용자수를 늘리고, 현재 상태를 소캣클라이언트에게 전달한다. (Status 이벤트이용 / 클라이언트에서는 on('status'~~) 가 있겠죠? )
그다음에는 'vote'이벤트를 수신하면 사용자가 보낸 데이터에 따라서 찬성이나 반대수를 증가 시키고, 해당 내용을 다시 사용자들에게 푸시 합니다.
UI (Jade Template Engine)
화면은 Title, 버튼 (찬성,반대) , 결과를 나타낼 Label 로 구성되며, Socket 과 Jquery 를 사용할 라이브러리와 이벤트를 등록할 vote.js 를 포함 한다. (Jade도 나름 많이 쓰다 보니 편한거 같기도..)
Client-Side
클라이언트 사이드의 코드는 아래와 같다. 큰 이벤트는 없다. emit 과 on 만 이해한다면 쉬울듯 !
<= 서버 소켓에 접속한다.
<=status Event 를 받으면 화면의 Label 컴포넌트들을 업데이트 한다. (결과를 보여주는부분)
<=찬성과 반대 버튼을 눌렀을 경우 이벤트 핸들링
1. 전역변수로 _vote를 가지고 있고, 아직 투표 하지 않은 경우에는 서버에 vote 이벤트를 emit 한다. 결과는 json 형식으로 전달했다.
2. 투표를 이미 한경우에는 메시지를 표시하고 별도의 행동은 하지 않는다.
맺음말
소캣을 이용해서 실시간 프로그램을 쉽게 만들수 있었다... 비슷한 내용을 스프링으로 구성해보고 비교해 봐야겠다.
끄읕.