rails comet juggernaut

Posted by wxianfeng Tue, 24 Nov 2009 03:34:00 GMT
环境 : ruby 1.8.7 + rails 2.1.0 + ubuntu 8.10 desktop

comet 是 server push 技术,说白了就是 服务器端直接 推送数据到客户端,据说 是 未来能取代ajax的一门技术,comet要求客户端 和 server 要建立一个长连接,无论是http 方式 还是 socket 方式,ajax是单用户的异步请求,comet是多用户异步请求,这个技术 已经应用的很广了,特别对于一些 交互性 和 实时性 要求比较高的 系统,例如 股票 实时刷新,web聊天(web qq,gtalk,meebo.com等等),实时提醒(xiaonei.com) 等功能,

那么 在rails中 有这样的comet现成东西吗? 答案是有,juggernaut 插件,juggernaut 原理是什么呢,官网是这样 说的:

1,客户端A 和 comet server 建立一个 socket 连接 (注意这里的server 是 juggernaut的 server)

2,客户端B 向 rails server 发送一个 异步 ajax 请求 (例如这里的rails server 开发环境下为 webrick)

3,rails server 发送数据 给comet server

4,comet server 广播数据到 客户端 (客户端用户可以指定)

plugin 依赖的 库 :

* Rails 2.0.2 or edge

* json gem (gem install json)

* EventMachine gem (gem install eventmachine)

* juggernaut gem (gem install juggernaut)

demo: 实时聊天室

基于 prototype || jQuery

1,新建 rails project

2,安装插件

script/plugin install http://juggernaut.rubyforge.org/svn/trunk/juggernaut


安装完后 会在 config 下看到 juggernaut 的 host 文件

3,配置 host 文件

:hosts:
  - :port: 5001 # 默认就是5001
    :host: 192.168.1.3 # 你电脑的ip
    :public_host: 192.168.1.3
    :public_port: 5001


4,cd 到 config 目录下,生成 juggernaut 的 配置文件

juggernaut -g juggernaut.yml


会在 config下 看到 juggernaut.yml 文件

4,配置 juggernaut.yml

     :allowed_ips: 
                  - 127.0.0.1
                  - 192.168.1.3 # 添加你电脑的ip


5,开启 juggernaut

juggernaut -c juggernaut.yml


显示成 Starting Juggernaut server 0.5.8 on port: 5001... 这样就已经开启了,不要以为还在 start 当中

6,controller

class ChatController < ApplicationController
  
  def index
  end

  def chat_prototype    
  end

  def chat_jquery    
  end

  # prototype
  def send_data_p
    render :juggernaut do |page|
      page.insert_html :top, 'chat_data', "<li>#{h params[:chat_input]}</li>"
    end
    render :nothing => true
  end

  # jQuery
  def send_data_j
    render :juggernaut do |page|
      page["#chat_data"].prepend "<li>#{h params[:chat_input]}</li>"
      # page["#titl"].Text = "wang"
      page["#updatetitle"].click()
    end
    render :nothing => true
  end  
end


7,View

chat_prototype.html.erb (基于 prototype )

<html>
<head>
  <title>测试</title>
  <%= javascript_include_tag :defaults, :juggernaut %>
  <%= juggernaut(:debug => false) %>
</head>
<body>
  <%= form_remote_tag(
    :url => { :action => :send_data_p },
    :complete => "$('chat_input').value = ''" ) %>
  <%= text_field_tag( 'chat_input', '', { :size => 20, :id => 'chat_input'} ) %>
  <%= submit_tag "Add" %>
  </form>
  <ul id="chat_data" style="list-style:none">
  </ul>
</body>
</html>


上面的 <%= juggernaut(:debug => false) %> 就是 和 comet server 建立连接的,还有很多参数可以添加,详细到 juggernaut helper 文件中查看,例如我上面加了 :debug => false 就是 不输出 调试

chat_jquery.html.erb (基于jQuery,这个我给它加了动态改变title 的做法,原先想在action中改的,可是没成功,后来就在action中click页面button,然后button 触发js 修改title 成功)

<html>
  <head>
    <title id="titl" runat="server">测试</title>
    <%= javascript_include_tag 'jquery', 'json','juggernaut/juggernaut', 'juggernaut/jquerynaut', 'juggernaut/swfobject'  %>
    <%= juggernaut(:debug => false) %>
  </head>
  <body>
    <form action="" method="get">
      <div style="margin:0;padding:0">
      <input id="chat_input" name="chat_input" size="20" type="text" value="" />
      <input name="commit" type="submit" value="Add" />
    </form>
    
    <script>
      $(document).ready(function(){

        $('form').submit(function(){
          $.get('/chat/send_data_j', { chat_input: $('#chat_input').val() } )
          return false;
        })
      })

      function settitle() {
        var b = "新提醒";
        var c = ":^:";
        var t = new Date();
        s = t.getSeconds();
        if(s%2 == 0){
          document.title = b;
        }else{
          document.title = c;
        }
        setTimeout("settitle()", 1000);
      }

    </script>

    <div style="display:none">
      <input type='button' id="updatetitle" onclick='settitle();' value='Change Title'/>
    </div>

    <ul id="chat_data" style="list-style:none"></ul>

  </body>
</html>


注意jquery 加载的资源文件,和 prototype 的 不一样,所有资源在下载的 插件media中 可以找到

8,开启webrick

9,打开网址开始聊天

http://192.168.1.3:3000/chat/chat_jquery

多个用户 打开上面的网址就可以实时聊天了.......

ref:

http://juggernaut.rubyforge.org/

http://ajaxian.com/archives/juggernaut-comet-for-rails

http://macrochen.javaeye.com/blog/28020


SNS :renren.com 的盈利模式

Posted by wxianfeng Fri, 13 Nov 2009 17:14:00 GMT


renren.com 是目前属于国内一个大型的社区网站之一了,背后有着众多的大学生群体,包括已经毕业了,走上社会的大学生。

renren.com 原先 是 xiaonei.com 个人还是喜欢 xiaonei.com 校内网。。名字好听,而且调查xiaonei的用户后,发现大多数人仍然喜欢输入xiaonei.com打开校内网,而不是renren.com. 从xiaonei刚出来的时候,我就用了,一直用到现在,可以说是看着xiaonei一步一步成长起来的,和xiaonei同时出来的还有 zhanzuo.com (占座网),估计05~07界的学生都知道当时学校 贴的海报 宣传的 xiaonei 和 zhanzuo。

记得在08年的时候日本软银 收购 xiaonei 40%的股权,给予 4.5 亿美元的融资,当时在学生中还引起不小的轰动,好多人都注销了xiaonei,以抵抗 小日本 SNS盈利模式一直被人质疑,今天闲来无事,想看下校内的盈利模式,于是就 瞅 了一下,发现xiaonei赚钱的地方还真不少。

赚钱一:广告

目前xiaonei的主要收入来源估计还是广告,打开xiaonei 可以发现 有好多 大的企业在上面投放 广告,例如我现在打开xiaonei首页,有 仁和药业 集团, 凡客诚品 等

赚钱二:增值服务

什么是增值服务,增值服务就是有超过了自己网站的范畴,额外的服务的意思在里面,例如xiaonei推出的 web game : 猫游记,通过这个 web game ,可以在里面植入广告,虚拟物品购买,交易等

赚钱三 : 开放平台

xiaonei 后来学习了facebook,推出了 开放平台,xiaonei 为了鼓励人们开发xiaonei的app,给予这样的奖励措施,app没邀请一个星级用户,可以得到2元的奖励,还有和 google adsense 合作,按照流量进行广告分成。

这样有了开放平台后,就会 开发出很多的 第三方app 了,不清如此,最重要的是和成熟的第三方应用合作,例如 很火的开心农场,这样通过开心农场收入的钱,由两家公司分成,另外xiaonei 也可以在 开心农场中植入自己的广告,来赚钱

赚钱四:虚拟礼品

虚拟物品在别的社区网站可能没有生存的价值,可还在xiaonei网还是生机勃勃的,因为xiaonei是一个真实资料的社区,一般都是自己同校的,或者以前的同学,甚至是情侣,所以喜欢送礼物的人 大有人在,每送一个礼品,消耗一个 校内豆 , 一个xiaonei豆 是 一元

赚钱五 : 星级用户

星级用户即付费用户,xiaonei里叫紫豆会员,就像qq会员一样,有一些特殊的权限,例如有很多好的皮肤给你选择,发言没有限制,不是星级用户会出现验证码等等

赚钱六:google adsnse广告

流量有了,相信google adsnse 也会带来不小的收入的。。。。

更多的盈利模式,还需要 发现的眼睛。。。


simple jQuery date-picker plugin 中文版

Posted by wxianfeng Mon, 02 Nov 2009 17:01:00 GMT

效果:

汉化了一个 jquery calendar plugin , 效果还符合 中国人的使用习惯。。。
使用步骤:
1, 加载需要的js 和 样式

<link href="calendar.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cal.js"></script>

2,使用

jQuery(document).ready(function () {        
        $('input.one').simpleDatepicker(); // 最基本的
        $('input.two').simpleDatepicker({ startdate: 2008, enddate: 2012 }); // 定义年的范围,一般用这个
        $('input.three').simpleDatepicker({ chosendate: '9/9/2010', startdate: '6/10/2008', enddate: '7/20/2011' }); //定义当前选择的日期
        $('input.four').simpleDatepicker({ x: 45, y: 3 }); //定义日历基于input的显示位置
});
</script>
<p><input class="one" name="date" value="" type="text">
<input class="two" name="date" value="" type="text">
<input class="three" name="date" value="" type="text">
<input class="four" name="date" value="" type="text">
</p>

DEMO:
http://wxianfeng.com/demos/calendar

source:
http://www.uushare.com/filedownload?user=fl1429&id=2183466

ref:
http://teddevito.com/demos/calendar.php
http://www.aspxhome.com/javascript/skills/20099/1008917.htm