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
.jpg)
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 也会带来不小的收入的。。。。
更多的盈利模式,还需要 发现的眼睛。。。
效果:
汉化了一个 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://blog.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