dev web wxianfeng | Archives for November 2009

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

Read full article no comments

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 也会带来不小的收入的。。。。

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

Read full article 4 comments

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>