블로그 이미지
JEEN

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

Rss feed Tistory
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 466,823 TODAY 71

티스토리 툴바