lunare.kr
- 2011/04/23 20:16
- lunare.egloos.com/4027041
- 덧글수 : 0
ruby on rails comet juggernaut 채팅 서버 구축
orbited보다 performance면에서 떨어지는 것 같다. 또한 flash를 이용하기 때문에 모바일 환경에서 안된다.
공식 사이트는
여기고
comet, 폴링과 비교해서 장점을 적어두는데 폴링보다 뛰어난건 확실한 것 같지만 comet보단 잘 모르겠다. flash라는게 너무 크다.
사용한 머신환경 및 버전
centOS 5
ruby 1.8.7
rails 2.3.11
gem 1.6.1
1) 필요한 gem들을 설치하자
gem install json
gem install eventmachine
gem install juggernaut
gem install maccman-juggernaut 도 해주어야 한다
2) 플러그인 설치
ruby script/plugin install git://github.com/maccman/juggernaut_plugin.git
git이 없으면 깔아야한다(git쳐보자)
3) 스크립트추가
<%= javascript_include_tag 'prototype', :juggernaut %>
jquery를 사용하려면
<%= javascript_include_tag 'json', 'juggernaut/juggernaut', 'juggernaut/jquerynaut', 'juggernaut/swfobject' %>
json 이라는 파일은 vendor/plugin/juggernaut폴더/media에 있으니까 복사
<%= juggernaut %>를 해서 초기화하자
이 코드는 vendor/plugin/juggernaut폴더/helper/juggernaut_helper.rb에 있다 적절히 수정해서 사용하자
이 코드를 넣으면 자동으로 연결이 시작된다.
4) 서버 설정
juggernaut -g juggernaut.yml 로 config파일을 만들고
config/juggernaut_hosts.yml 파일을 수정해서 서버 설정하고
juggernaut -c juggernaut.yml 로 시작한다. -d옵션을 주면 데몬으로 실행한다 기타 여러 옵션이 있으니까 찾아보자
5) 컨트롤러에서
Juggernaut.send_to_all("코드")하면 간다.
ajax로 글 쓰고 저걸로 뿌려주면 된다. 채널을 사용하는 방법은 플러그인 폴더에 README파일을 참고하자.
6) 한글
한글 설정 때문에 삽질했다. 꼭 인코딩해서 보내자.
7) 결론
완전 대충설명했다. 반응도 빠르고 리소스 잡아먹는것도 훨씬 덜하긴 하다. 근데 처음에 서버에 접속하는게 엄청 느리다.
한 5초는 걸리는 것 같다. 아직 무슨이유인지 못찾았는데.. 그리고 아이폰에서 안되는게 너무 싫다...
8) 소켓을쓰자!
- 2011/02/11 12:14
- lunare.egloos.com/3969993
- 덧글수 : 0
배포전
1. 뷰 캐싱
2. 자바스크립트, css 최적화
3. db 인덱스
4. 로깅
5. 예외 테스트
- 2011/01/27 13:28
- lunare.egloos.com/3957730
- 덧글수 : 0
rails로 프로젝트를 만들고 내가 설정하는 것들을 모아보았다. (rails 2.3.8기준)
항상 설정하기 귀찮은 부분이다.
1. jquery플러그인 설치
script/plugin install http://ennerchi.googlecode.com/svn/trunk/plugins/jrails
2. public/javascript폴더의 prototype관련 js삭제
rm -rf prototype.js dragdrop.js 등등..
3. 뷰, 컨트롤러, 모델, 자바스크립트, 스타일시트로 바로가기 만들기
각각 이름을 lv lc lm lj ls로 하는 편이다
ln -s app/views lv
ln -s public/stylesheets ls
..반복
4. 컨트롤러 만들기
모델이나 컨트롤은 서버가 구동되고있으면 새로 만들어도 적용이 되지 않기때문에 서버를 재시작해야한다. 귀찮아서 미리 다 만들어두는 편이다.
script/generate controller main index foo bar
이때 컨트롤러 이름뒤에 액션 이름을 나열하면 기본 뷰까지 만들어줘서 편하다. (모델도 뒤에 프로퍼티를 나열할 수 있는데 잘 안쓰는 편이다.)
5. 라우팅 설정 추가
main이 되는 컨트롤러에 기본 라우팅 설정을 추가한다. 다양하지만
map.root :controller => "main" #맨 위에 초기페이지 설정
map.connect ':nothing', :controller => "main" #맨 아래에 없는 주소로 들어올때 초기페이지로 연결
정도는 꼭 하는편이다
6. config파일 설정
사용할 gem을 로드하고. (페이지네이션 같은..)
타임존을 설정하고
마이그레이션에 타임스탬프를 뗀다. 나중에 경과를 볼때 편하긴 하지만 20110124이런것 치는건 언제나 힘들다
config.active_record.timestamped_migrations = false
7. database.yml설정
8. 모델만들기
9. 데이터베이스 마이그레이션
10. 서버 실행
써놓고 보니 별것 없군..
- 2011/01/25 04:17
- lunare.egloos.com/3955792
- 덧글수 : 0
오래간만의 포스팅이다. (POST요청이란 말은 참 잘만들었다)
jQuery UI의 위젯중에서 아코디언이라는 훌륭한 위젯이 있다.
예제에는 정적인 컨텐츠만 아코디언으로 만드는 것만 나와있고 잘 적용된다.
하지만 실제로 이런경우는 거의 없으며 동적으로 컨텐츠를 가져와야 할 때가 많다.
컨텐츠 요소에 ajax로 받아온 데이터만 넣어주면 알아서 잘 되었으면 좋겠지만 그렇지 않다.
먼저, 아코디언 위젯을 적용시키기 위한 기본적인 html코드를 만들자. (이글루스에 코드입력하는 게 없군 ㅡㅡ)
<div id="acc">
<h3 aid="주소">제목1</h3>
<div>컨텐츠 1이 들어갈 곳</div>
<h3 aid="주소">제목2</h3>
<div>컨텐츠 2가 들어갈 곳</div>
..반복
</div>
그리고 acc에 아코디언 위젯을 적용한다
$("#acc").accordion();
여기서 몇가지 파라미터를 줘야한다. 난 다음과 같은 파라미터를 줬다.
active : false (처음 로드될 때 첫번째 탭이 열린채로 로드되는데 모두 닫힌채로 로드되게 한다)
collapsible : false (아코디언이 모두 닫음 상태가 가능하게 한다)
clearStyle : true (동적인 컨텐츠가 담길때 자동 길이조절)
그러면 아코디언의 헤더가 눌려졌을때 그에 해당하는 컨텐츠를 가져오는 함수를 작성하자
헤더가 눌러졌을때 발생되는 이벤트는 changestart이다
ui객체에는 ui.newContent, ui.newHeader, ui.oldHeader, ui.oldContent가 있는데 뭐 이름 그대로다
changestart: function(event,ui){
$.ajax({
url : "ajax주소",
data : "id="+ui.newHeader.attr('aid')+"&ajax=true", //이 부분은 헤더에 ajax parameter가 있다고 가정했다. 원하는대로 하면된다.
dataType : "html",
beforeSend : function(){ //ajax 로드 이미지를 보이게한다.
newContent.html('<div class="Loading"><img src="/images/ajax-loader.gif" alt="ajax-load" class="AjaxLoad" /></div>');
},
success : function(data){
ui.newContent.html(data).fadeIn();
}
});
}
지금 가지고 있는 소스를 대충 수정한거라 문법 잘못된 부분이 있을수도 있다.
이러면 일단 헤더를 누르면 컨텐츠를 잘 가져오는것처럼 보인다.
짧은 컨텐츠는 그럭저럭 잘 가져오지만 길이가 긴 컨텐츠를 가져올때 애니메이션이 튀는 문제가 발생한다.
즉, 헤더가 눌러졌을때 ajax로드 이미지의 높이까지 잘 슬라이드 되다가 (ajax요청을 보내고 결과를 받고) 컨텐츠 영역에 ajax 결과값을 넣는 순간 갑자기 컨텐츠 영역의 크기가 크게 튀어버린다. (대부분의 사람이 예상한 문제일거라고 생각한다.)
다행히 해결방법이 있다.
ajax로딩 이미지 (혹은 빈 영역이라도 상관없음, 높이를 가지는 영역)의 높이를 적당히 잡아주는 방법이다.
헤더를 눌렀을때 컨텐츠 영역이 원래 컨텐츠 안에 있는 영역의 높이만큼은 늘어나기 때문에 이를 적당히 잡아주면 조금 튀더라도 거의 식별하기 힘들다. IE는 느려서 제대로 작동하는 소스도 튀는것 처럼 보이더라;
이 방법은 ajax로 가져오는 컨텐츠의 높이가 거의 비슷할때 쓸수 있는 방법이다.
나의 경우에 짧은 컨텐츠는 3줄정도이고 긴 컨텐츠는 한페이지가 넘는 것도 있어서 이 방법으로 해결하지 못했다.
두번째 방법
clearStyle을 true로 주던걸 false로 줘버리고. 우리가 직접 슬라이드 하자.
$("#acc").accordion(
{
active : false,
collapsible : true,
/* clearStyle : true, */
changestart: function(event,ui){
$.ajax({
url : "/article/view",
data : "id="+ui.newHeader.attr('aid')+"&ajax=true",
dataType : "html",
beforeSend : function(){
newContent.html('<div class="Loading"><img src="/images/ajax-loader.gif" alt="ajax-load" class="AjaxLoad" /></div>');
ui.newContent.css('height','180px');
},
success : function(data){
var nh=$("#dummy").html(data).height()+40;
$("#dummy").ready(function(){
ui.newContent.animate({'height' : nh+'px'}).children().first().hide().html(data).fadeIn();
});
}
});
}
}
}).
소스에서 필요없는 부분을 지운것이라 잘못되었을수도 있다. 참고만 하자
기본적인 아이디어는 이렇다
1) ajax로딩 이미지가 보일때 높이를 지정해서 스크롤하자
2) ajax의 결과를 받았을때, 이를 임의의 dummy 영역에 넣어서 높이를 잰다음 (넣기전엔 못재니까, 40은 여백이다) 컨텐츠 영역의 높이를 animate함수로 직접 슬라이드한다. 나머지 체인들은 페이드 효과를 주기 위함이다. 컨텐츠 영역에 바로 hide효과를 주면 높이가 0이 되어버리기 때문에 슬라이드가 제대로 되지 않는다. 그래서 컨텐츠 영역 안에 새로운 영역을 만들어서 거기에 결과를 넣고 페이드 효과를 줬다.
chrome, IE 78에서 잘 작동 한다.
ajax이미지를 보여주기 위해 슬라이드하고(이전방법에서도 이까진 된다) ajax결과가 도착했을때 그 높이만큼 슬라이드하며 컨텐츠가 나타난다(ajax이미지보다 작으면 위로, 크면 아래로)
더 생각해볼 것들
잘 작동하는데 가끔 dummy 영역에서 높이를 잘못 재는 경우가 있다. data에 큰 이미지가 포함된 경우 로드되기 전에 높이를 재어버리는 것 같다.
컨텐츠가 길어지면 위로 올려서 다시 닫기 귀찮다. (물론 아래걸 누르면 자동으로 닫히긴 하지만) 아래쪽에 최소화시키는 버튼을 구현하자.
최근 덧글