[Node.js] socket.io 활용 실시간 덧글 업데이트 구현 예제

2014-05-27 08:18:05에 작성됨 | 자바,JS,JSP, 프로그래밍

어느날 GSL을 보다가 아랫쪽의 덧글을 봤는데 덧글에 ‘아 이거 덧글 자동으로 새로고침 안 되나’라는 덧글이 올라왔었다. 그거 보고 대충 만들었다. 너무 간단해서 금새 완성

적용 예제 : http://test.jhp.io/push

* 내가 직접 운영하는 서버라서 가끔 접속 안 될수도 있음(특히 주말엔 점검 목적으로 꺼놓는 경우가 많음.)
* HTML5로 작성되어서 IE8 이하의 브라우저에선 똑바로 안 보여짐.
* Connexion Refusee가 뜨는 건 외부 링크나 주소창에 집적 쳐서 접속해서 그런 것임. 반드시 위 링크를 통해 접속
* 보통 스트리밍 콘텐츠를 제공하는 사이트 대다수가 덧글을 통한 커뮤니케이션 기능을 구현하는 경우가 많다. 위 예제도 그것과 비슷하게 만들었다. (스트리밍이 자동 재생된다. 볼륨주의!)
node.js 설치하고 첨부파일 받은 후 서버에 업로드하고 (html파일은 웹서버나 WAS에, sio.js는 node.js에) html의 ‘도메인’이라고 적힌 부분을 해당서버의 주소로 바꾸고, 명령 프롬프트에서 node sio.js 명령으로 sio.js 실행하고(물론 그전에 npm install socket.io 명령을 통해 socket.io 모듈을 설치해야 한다.) http://서버주소/index.html 로 접속하면 예제가 동작되는 것을 확인 할 수 있다.

node.js를 이용해서 만드는 것 때문에 MEAN(MongoDB, Expressjs, AngularJS, Node.js)기반 사이트에서 주로 구현하고 php나 Legacy 언어 계열의 사이트에서 이런식의 푸시 기능을 구현을 잘 하지 않는 경우가 많다. 예제파일을 보면 알겠지만 80이 아닌 다른 포트번호로 통신하도록 했는데 이는 IIS나 Apache등 Legacy 웹 사이트에서도 그대로 쓸 수 있도록 하게 하기 위함으로, 이런 방법으로 쉽게 push 기능을 구현할 수 있다. 물론 응용하여 알림(Notification)이나 채팅도 구현 가능하다.

다운로드 : sio_public_html

 

Leave a Reply

Your email address will not be published. Required fields are marked *