블로그 이미지
JEEN

서울에 사는 꽃청년의 IT찌질모험기

Rss feed Tistory
IT/Perl 2010.05.21 16:57

[ Pusher/WebSockets ] 아얄씨로그에의 Pusher 적용에 대해

2010/05/21 - [IT/Perl] - [ Perl/Catalyst ] 새로 태어난(?) 아얄씨 로그뷰어

 앞의 엔트리에서 가볍게 Pusher 를 다뤘는데, 그거에 대한 자세한 얘기를 해보겠습니다. 

 요즘 어딜봐도 웹 이슈는 HTML5 이고, 애플은 특히 Flash 죽이기에 앞장서며 HTML5 를 강조하고 있습니다.
 그 HTML5 의 기능적인 면 중에서 짚어볼 만한게 바로 WebSockets 입니다. 여러 HTML5 를 소개한 페이지에서 WebSockets 를 다루고 있으니 자세한 내용은 그쪽을 참고하시기 바랍니다.



 Pusher 에 가입하면 app_id 등등의 인증정보를 얻을 수 있습니다. 이게 바로 Pusher 에 리퀘스트를 보낼 때 꼭 필요한 값들입니다.  Pusher 에 로그인해서 대쉬보드로 가면 기본적인 테스트를 해볼 수 있습니다. 
 그리고 WebSockets 를 지원하는 브라우저는 한정되어 있죠. 아마 WebKit 기반의 브라우저에서만 현재 지원되는 것으로 알고 있고 FF 도 차기버젼에서 지원예정인 걸로 알고 있습니다. 고로 Chrome 등을 쓰는 사람에 한정되서 사용할 수 있다는 것인데요. 하지만 Pusher 의 경우는 이를 대비해서 플래쉬로 구현된 WebSockets 을 준비해뒀습니다. (고로 Pusher 를 사용하는 한 IE 에서도 Websockets 을 쓰는 데 문제가 없는 것으로 알고 있습니다) 

  자 그럼, 저 아얄씨 로그뷰어에서 Pusher 를 사용한 것을 보자면...
 IRC 채널에 들어간 '봇'이 있고.
 IRC 채널에서 대화한 내용을 표시해주는 웹이 있고,
 그 둘을 이어주는 Pusher 가 있다고 생각하면 됩니다. (이게 WebSockets 서버)

 시나리오를 보면 @y0ngbin 이 "OS뭐에요? zzzZZZ" 라고 했을 때, IRC 봇은 그 내용을 잡습니다. 
 그리고 누가,무슨 내용을 말했는가 하는 정보를 Pusher 로 POST 해줍니다.

 아, 이때 IRC 대화내용을 표시해주는 웹에 접속해있다고 가정합니다. 이 페이지에서의 소스는 아래와 같죠. 

  
 위의 소스대로 Pusher 와 WebSockets 으로 연결됩니다. 지정한 채널과 이벤트이름에 따른(위의 봇에서 Pusher 로 POST 해준 정보) 값이 해당 이벤트로 바인드되고, 여기에서 값이 넘어오면 이런저런 처리를 해주면 됩니다.

 여러가지 WebSockets 서버 구현을 보고(Web::Hippie나.. 기타등등) 띄워보려고 했는데.. 서버 자원도 없고 해서 때려치웠습니다 =3=3

  특이사항은 처음에 Pusher 의 문서를 보고 리퀘스트 날리는 거 만들다가... 나중에 CPAN 을 보니까 WWW::Pusher 가 있어서 뻘짓했구나 라고 느꼈습니다. ..

  아무튼 리얼타임웹은 눈앞에 있고, 웹개발자들은 더욱 바빠질 것이고, 이것이 새로운 사업아이템으로 연결이... 등등등... 앞으로 많은 공부가 필요한 시점입니다. ;ㅁ;

  위의 아얄씨 로그는 github 상에 있으니.. 필요하신 분은 참고하세요.

신고
IT/Perl 2010.05.21 13:24

[ Perl/Catalyst ] 새로 태어난(?) 아얄씨 로그뷰어


   이것저것 갖다붙여서 새롭게 만들어버렸습니다.
  우선 변경사항 정리 

1. 소속감 고취를 위한 프로필 이미지 표시

#perl-kr 소속감 고취를 위한 프로필 이미지 박아넣기 90% 완료. // 한명만 트위터 아이디 몰라서 실패 =3==3 '필마나'Thu May 20 14:05:53 via Echofon

  위의 캡쳐화면을 보시면 알 수 있듯이 지난 일주일간의 로그를 뒤져서 각 유저별 메타정보(지금은 이미지 밖에) 뽑아냈고.. 이걸 Template 에서 매치시켜서 표시하고 있습니다. 이걸로 소속감 90% 향상 =3==3

2. Pusher 를 이용한 WebSockets 적용 

 HTML5 설레발을 추가했습니다. 구성은 아주 심플합니다.
 단지 Pusher 의 API 를 사용해서 그곳으로 리퀘스트를 날려주면 Pusher 에서 브라우저랑 통신하는 것 뿐입니다. 
 이걸 IRC 의 대화내용을 거의 리얼타임(이런저런 latency를 생각하면 1초 정도 늦지만)으로 웹 브라우저에서 모 채널의 대화내용을 그대로 볼 수 있다는 것입니다.

3. 시간대별 대화목록 전환 등등등 
 예전에 만든 IRC 로그 뷰어에서는 있었는데... 지난번에 서버 옮기면서 지워버리고 새로 만들면 되지 뭐... 하면서 그냥 방치했었는데.. 이번에 버튼 이미지를 추가해서 맹글었습니다. 그냥 뭐 jQuery 로 시간대별 클래스 추가하고 그걸 이래저래 전환해주는 것 뿐.. =3=3
 버튼 이미지는 그냥 이걸로 만들어 봤습니다. (순수 CSS)


4. 이런저런 js 라이브러리 사용 
 - jQuery
 - Pusher
 - pretty.js

  뭐 대부분 jQuery 로 그냥 샥샥 하면 되는 수준이라서.. 특별한 의미는 없습니다. 리얼타임으로 푸쉬되는 대화내용들의 표시에.. 이게 몇분전 대화내용인가 하는 표시형식을 취하기 위해서 pretty.js 를 사용했습니다. 
  그리고 대화내용중의 url 이나 이메일에 대해서는 자동으로 링크를 설정하거나...
  그리고 @Anywhere 를 붙이거나, CPAN 모듈이름만으로 자동으로 링크를 설정해주거나... 하는 걸 생각하고 있습니다.


// 이상... 사실 뭐 없는 비공개 서비스의 변경내용입니다. :-D 
 Pusher 에 대해서는 다음기회에 한번 다뤄보도록 하겠습니다.
신고
TOTAL 488,144 TODAY 13

티스토리 툴바