Real time web实时信息流推送
Upcoming SlideShare
Loading in...5
×
 

Real time web实时信息流推送

on

  • 1,677 views

 

Statistics

Views

Total Views
1,677
Views on SlideShare
1,677
Embed Views
0

Actions

Likes
5
Downloads
36
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Socket.IO and Binary Messages InfoQ: WebSockets 与 Bayeux/CometD
  • Java Applets 已经被淘汰
  • 可参考资料: Servlet 3.0 笔记之异步请求 Comet 推送长轮询 (long polling) 篇 http://www.blogjava.net/yongboy/archive/2011/02/17/346198.html Servlet 3.0 笔记之异步请求 Comet 推送长轮询 (long polling) 篇补遗 http://www.blogjava.net/yongboy/archive/2011/02/19/346197.html 长轮循是客户端发起的,间隔一定的时间向服务器请求事件, AJAX 前端实现方式。 优点 : 就是不需要保持和服务器一直联系 , 资源占用会少一些 缺点 : 可能会产生比较多的请求 , 或请求失败造成的数据混乱。 长连接服务器和客户端会保持一个长久的联系。 优点:数据更新即时性好,体验流畅。 缺点:对服务器的资源会有一个占用,所以相对占用资源比较大,另外 HTTP 长连接有时效性,不是可靠连接。
  • 基于 jQuery
  • Comet (long polling) for all browsers using ScriptCommunicator http://amix.dk/blog/post/19489#Comet-long-polling-for-all-browsers-ScriptCommunicator
  • 可参考: Servlet 3.0 笔记之异步请求重新梳理 Comet 的几种形式 http://www.blogjava.net/yongboy/archive/2011/02/27/346195.html Servlet 3.0 笔记之异步请求 Comet 流推送 (Streaming) 实现小结 http://www.blogjava.net/yongboy/archive/2011/01/14/346204.html Servlet 3.0 笔记之异步请求 Comet 推送 iFrame 示范 http://www.blogjava.net/yongboy/archive/2011/01/10/346206.html Servlet 3.0 笔记之异步请求 Comet 推送 XMLHttpRequest 示范 http://www.blogjava.net/yongboy/archive/2011/01/13/346205.html
  • 可参考: Servlet 3.0 笔记之异步请求重新梳理 Comet 的几种形式 http://www.blogjava.net/yongboy/archive/2011/02/27/346195.html Servlet 3.0 笔记之异步请求 Comet 流推送 (Streaming) 实现小结 http://www.blogjava.net/yongboy/archive/2011/01/14/346204.html Servlet 3.0 笔记之异步请求 Comet 推送 iFrame 示范 http://www.blogjava.net/yongboy/archive/2011/01/10/346206.html Servlet 3.0 笔记之异步请求 Comet 推送 XMLHttpRequest 示范 http://www.blogjava.net/yongboy/archive/2011/01/13/346205.html
  • 借助于: web-socket-js
  • 可考虑: https://github.com/rwldrn/jquery.eventsource https://github.com/Yaffle/EventSource/blob/master/eventsource.js
  • 若采用 Phonegap 构建跨浏览器应用,可以采用 Websocket 协议
  • http://help.adobe.com/en_US/ColdFusion/10.0/Developing/WSe61e35da8d318518767eb3aa135858633ee-7fea.html web-socket-js ,跨浏览器透明使用 WebSocket https://github.com/gimite/web-socket-js <!-- Import JavaScript Libraries. -->
  • eg : 消息队列 JAX-RS 也是增强
  • Servlet 3.0 推出时间
  • JBoss AS 7: https://community.jboss.org/wiki/WebsocketSupportInAS7
  • Atmosphere The Asynchronous WebSocket/Comet Framework 是一个 Java 技术框架,其提供了通用的 API 来使用许多 web 服务器的 Comet 和 WebSocket ,这些 web 服务器包括了 Tomcat 、 Jetty 、 GlassFish 、 Weblogic 、 Grizzly 、 JBossWeb 、 JBoss 和 Resin ,其还支持任何支持 Servlet 3.0 规范的 web 服务器。 客户端支持不是那么强大
  • http://www.google.com/trends/?q=socket.io&ctab=0&geo=all&date=all http://www.google.com/trends/?q=cometd
  • 构建于 HTTP/Websocket 协议之上
  • http://socket.io/#browser-support
  • 目前服务器端支持最新协议的 socket.io 开源实现,就只剩下本人的 socketio-netty 了
  • 为什么不基于 Jetty/Tomcat 构建原因在于: 1.Websocket 尚未成为规范 2. 使用高性能 Netty 实现 HTTP 堆栈相比 Tomcat/Jetty 少了很多层次的数据流转,只专注核心业务等 3. 缺少资助 / 动力
  • 此处 Firefox + Firebug 进行演示 服务器授权可能会返回: 401 Unauthorized 503 Service Unavailable 等信息 没有自身注册,直接进入下一关,不会成功
  • 展望,若做一个平台,如何去做,来源于: http://www.blogjava.net/yongboy/archive/2012/06/11/380508.html
  • 来源: http://en.wikipedia.org/wiki/Real-time_web 实时 Web ,一组技术和实践的组合,保证用户可以最快速度接收发布者发布的信息,而不是需要周期性检测发布者的更新。
  • SOURCE: http://zh.wikipedia.org/wiki/%E5%8F%91%E5%B8%83/%E8%AE%A2%E9%98%85 更具体的
  • XHR = XMLHttpRequest
  • http://zh.wikipedia.org/wiki/Scala
  • 国外有关实时 Web 实时信息流发展远超国内,已经出现相关之力于此的公司和专业产品。 本人也想致力于更加产业化的进一步,但没有相应的工作环境
  • [ 教程 ] 如何使用 PubSubHubbub 协议 http://www.kangye.org/getting-started-with-pubsubhubbub/ PubSubHubbub 工作原理及使用入门 http://www.kangye.org/pubsubhubbub-tutorial 对康爷 PubSubHubbub 教程的一些补充 http://www.cnblogs.com/zhengyun_ustc/archive/2009/09/24/pubsub.html
  • 图片来自(略有修改): http://timyang.net/web/pubsubhubbub/
  • http://zh.wikipedia.org/zh/WebRTC http://www.netsapiens.com/2012/02/24/webrtc-demo-apps-wow/ http://www.nojitter.com/post/232901217/webrtc-video-conferencing-in-what-browser Microsoft's WebRTC http://gigaom.com/2012/08/06/microsoft-webrtc-w3c
  • http://zh.wikipedia.org/zh/SPDY 据说性能是 HTTP 的两倍
  • 进阶阅读: http://www.slideshare.net/fabianlange/the-spdy-protocol SPDY 是什么?如何部署 SPDY ? http://www.geekpark.net/read/view/158198 Tomcat 8 Support Spdy http://svn.apache.org/viewvc/tomcat/trunk/java/org/apache/coyote/spdy/?pathrev=133764
  • 打开图片,看在线版演示
  • 简单提及,若深入,需要申请另外一场有偿培训,哈哈 ~ 默认情况下所在 HTTP1.1 中所有连接都被保持,在输出内容和长度无法一次性确定情况下,还是需要标明,需要客户端支持 启用 Keep-Alive 模式可避免了建立 / 释放连接的一些开销 Cache-Control: 指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置 Cache-Control 并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括 no- cache 、 no-store 、 max-age 、 max-stale 、 min-fresh 、 only-if-cached ,响应消息中的指令包括 public 、 private 、 no-cache 、 no-store 、 no-transform 、 must-revalidate 、 proxy- revalidate 、 max-age 。各个消息中的指令含义如下: Public 指示响应可被任何缓存区缓存。 Private 指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效。 no-cache 指示请求或响应消息不能缓存 no-store 用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。 max-age 指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应。 min-fresh 指示客户机可以接收响应时间小于当前时间加上指定时间的响应。 max- stale 指示客户机可以接收超出超时期间的响应消息。如果指定 max-stale 消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。
  • PubSubHubbu/WebHooks: 专注于服务器端主动推送给客户端,但要求客户端具有可访问的地址 ( 相对于服务器端 ) 客户端不需要主动建立连接,等待被呼叫即可 广义的发布 / 订阅模型 MQ Server, 消息队列服务器 , 和 socket.io 结合会更加有利于消息传递等 Message Queue Server: ActiveMQ Redis RabbitMQ ZeroMQ http://www.aqee.net/message-queue-shootout/
  • 哈,能够听完真个演讲,需要很大的耐心。

Real time web实时信息流推送 Real time web实时信息流推送 Presentation Transcript

  • Realtime Web 实时信息流 推送 聂永 yong.boy@gmail.com http://www.blogjava.net/yongboy/
  • 提纲• 推送实现技术/历程• 客户端如何选择• Java支持现状• socket.io• Realtime Web
  • Java AppletsJava Applets 客户端脚本 – java.net.socket 建立 Socket 连接 – 要求本地安装 JRE ,不够轻量 – 微软和 Sun 公司不作为,已淡出人们视野
  • 轮询 (Polling)• 简单易用,容易实现• 所有浏览器都支持• 短连接• 每次请求,立刻返回• JSONP Polling 可跨域• Script tag Polling 可跨域缺点:• 建立大量连接• 服务器端并发压力大• 很少被使用到
  • 示范代码var polling = function() { $.get("getServerTime", function(data) { $("#result").html("<strong>" + data + "</strong>"); }, "text");}setInterval(polling, 10000);// 每 10 秒请求 一次
  • 轮询 - 工作机制
  • 长轮询 (Long Polling)• Http 1.1 Connection:keep-alive 长连接 协议• 服务器端数据就绪可立即返回• 服务器若未就绪,连接不断开,等待一段 时间• 表现形式: XMLHttpRequest Script tag Long Polling JSONP
  • 流程图1.服务器端阻塞 / 挂起请求直到数据到达或超时,然后返回2.客户端处理服务器返回消息,再次发起请求3.在客户端建立连接所消耗期间,服务器端新数据需要暂时缓存
  • XMLHttpRequest Long Polling• 形式自由简单,采用较多• 错误处理、超时管理可控性强• 默认无法跨域• 采用跨域资源共享 CORS 可部分实现跨域• 浏览器支持 CROS 情况 http://caniuse.com/cors• head("Access-Control-Allow-Origin", "*")
  • 示范代码function initGet() {$.get("getNextTimeAsync").success(function( resp) { log(resp); }).error(function() { log("ERROR!"); }).done(initGet); // 重新发起新的请求}// 执行请求initGet();
  • Script tag Long Polling• 表现形式 : <script src=http://xxx.domain.com/js/yourCometPro vider.js type=text/javascript></script>• 可跨域• 风险 : 无法控制因跨域产生返回函数的执行 ( 一个站点系无此担忧 )• 一般应用于同一级域名,不同二级域名搭配使用• 可使用 JSONP 规避此 javascript 风险• 很棒的入门资料 : Comet (long polling) for all browsers using ScriptCommunicator
  • 示范代码客户端:<script type="text/javascript"> var url = scriptTagDemo?time= + new Date().getTime(); var on_success = function(){ doRequst(); // 执行成功后 , 重新发起请求 }; var on_error = function(){ alert("Something went wrong!"); }; var doRequst = function(){ ScriptCommunicator.sourceJavaScript(url, on_success, on_error); }; doRequst();</script>服务器端返回: ScriptCommunicator.callback_called = true;$(#div).html(Now Time : 2012-08- 22 09:58:04 078);
  • 轮询 VS 长轮询• 短轮询一般定时请求• 长轮询一般在上一次轮询完成之后,发起 下一个新的请求• AJAX 长轮询时,最好标注超时时间• 服务器端处理方式有所不同
  • 流推送 (Streaming)• 客户端一次连接,服务器数据可多次推送• 低延迟通信相对经济的单向通道选择• 实现方案: Hidden iFrame(iframe + htmlfile) XMLHttpRequest Streaming• 浏览器Streaming兼容性测试
  • 请求流程Hidden iFrame + XMLHttpRequest Streaming 类似,但输出稍有差别
  • Hidden iFrame• 隐藏 iframe + htmlfile 组成• 服务器发送 chunked 编码数据块• 每个数据块即一段 javascript 代码• 通过 javascript 渲染页面数据• 各个浏览器都支持 iframe• 在 IE 、 Firefox 下面效果最好• 不可跨域• 缺点: 错误处理可控性不强
  • 客户端响应
  • XMLHttpRequest Streaming• XMLHttpRequest 以流的形式输出• 浏览器需要支持的 multi-part 标志• 跨域资源共享 (Cross-Origin Resource Sharing) 简称 CROPS 可实现 Ajax 跨域• 支持浏览器不多• 进阶阅读 : Servlet 3.0笔记之异步请求Comet推送XMLHttp
  • CROS 支持情况• http://caniuse.com/#feat=cors
  • CometComet is a web application model in which a long-held HTTP request allows a web server to push data to a browser, without the browser explicitly requesting it. -WikiPedia基于 HTTP 长连接的“服务器推”技术,是一 种新的 Web 应用架构。基于这种架构开 发的应用中,服务器端会主动以异步的方 式向客户端程序推送数据,而不需要客户 端显式的发出请求。 - 百度 百科
  • Comet 解读• 一种编程模型 , 若干实现技术组合• 低延迟通信,较长的存活期• 也称反转 Ajax(Reverse Ajax)• 强调从服务器主动推送数据到客户端• 实现形式:流( streaming )和长轮询 ( long polling )• JSONP Long Polling 可跨域• CROS可跨域
  • Comet 浏览器支持情况来源地址: http://www.blogjava.net/yongboy/archive/2011/02/27/346195.html
  • Websocket• HTML5• 长连接• WebSocket 规范的目标是在浏览器中实 现和服务器端双向通信 .• 缺点• 需要现代化浏览器支持
  • 示范代码var socket = new WebSocket("ws://localhost:8000/websocket/tomcatWebsocke t");socket.onmessage = function(event) { var ta = document.getElementById(responseText); ta.value = ta.value + n + event.data};socket.onopen = function(event) { var ta = document.getElementById(responseText); ta.value = "Web Socket opened!";};socket.onclose = function(event) { var ta = document.getElementById(responseText); ta.value = ta.value + "Web Socket closed";};
  • 浏览器支持情况来源: http://caniuse.com/#search=websocketAndroid <=4.0 和 Opera Mini 依然不支持 WebSocket
  • Flash Socket• WebSocket 的替代品 , 浏览器不支持可回退• 客户端 JavaScript 与 Flash 交互调用: JS 调用 Flash Socket 接口发送数据 Flash Socket 与服务器端 Socket 服务器通信 Flash Socket 接收到数据调用注册的 JS 函数 JS 渲染数据• 优点:实现 TCP/IP 即时双向通信,真的很实时• 缺点: 客户端须安装 Flash 插件 非 HTTP 协议 防火墙、代理服务器也可能对非 HTTP 通道端口 进行限制
  • 示范代码<script type="text/javascript" src="../js/swfobject.js"></script><script type="text/javascript" src="../js/web_socket.js"></script><script type="text/javascript"> // Set URL of your WebSocketMain.swf here: WEB_SOCKET_SWF_LOCATION = "../js/WebSocketMain.swf"; var socket = new WebSocket("ws://localhost:8000/websocket/tomcatWebsocket"); socket.onmessage = function(event) { var ta = document.getElementById(responseText); ta.value = ta.value + n + event.data }; socket.onopen = function(event) { var ta = document.getElementById(responseText); ta.value = "Web Socket opened!"; }; socket.onclose = function(event) { var ta = document.getElementById(responseText); ta.value = ta.value + "Web Socket closed"; };</script>
  • 注意事项• Flash Player 10 默认支持 Websocket• 策略文件 policy file, 默认 843 端口• 像 Websocket 一样使用 : https://github.com/gimite/web-socket-js• 最新 Flash 安装地址 http://www.adobe.com/support/flashplayer/down• 移动端 Flash Lite 已经停止开发 (Android 、 Blackberry 、 Symbian) ,专注于 PC 端• 但可以继续使用 Air 3.x ,性能达到原生 80%
  • Server-Sent Events• HTML5 API ,专注 Server PUSH 通知• 客户端开启一个 HTTP 连接 , 以 DOM 事件 形式接收收服务器端发来通知• 该 API 目的在于它能够被扩展,使其能和 其他 push 通知机制协作• Server-Client 单通道事件流 (Event Stream) ,客户端无法通过此通道交互• 类似于长轮询机制• 发送头部 Content-Type:text/event- stream
  • 示范代码var source = new EventSource(eventsourceDemo);source.addEventListener(message, function(e) { trace(e.data);}, false);source.addEventListener(open, function(e) { // trace("Connection was opened.");}, false);source.addEventListener(error, function(e) { if (e.readyState == EventSource.CLOSED) { trace("Connection was closed."); }}, false);// 用户自定义事件 (User Customer Event)source.addEventListener(userlogon, function(e) { var data = JSON.parse(e.data); trace(User login: + data.username);}, false);
  • 浏览器支持情况HTML5 草案阶段Firefox/Chrome/Safari/Opera 支持最好不支持 EventSource 的浏览器,可采用 XHR Long Pollinghttp://caniuse.com/#search=eventsource
  • 抉择!桌面端浏览器较为容易选择 FlashSocket ( IE6+ , Javascript 可包装为 Websocket ) WebSocket 服务器端可单独配置 WebSocket 服务器移动端 WebSocket 长轮询 ( 对不适合 Websocket 的浏览器 )
  • Flash Socket & WebSocket
  • Ping-Pong• 客户端 / 服务器状态连接检查机制• 心跳机制确定客户端 / 服务器端数据通信• 连接超时处理• 超时重新连接处理• 连接状态的持久化处理• 未及时发送数据缓存处理等
  • Poll VS Push• Poll 适合小数据量,服务器消耗可无视• Push 适合快速、较为实时环境• 短连接频繁,可考虑较为高效的长连接• 长连接耗费连接资源,在不传输数据时• 长连接是一把双刃剑,需要慎重使用• 注意服务器对并发 HTTP 连接的数量限制等• 数据量大,服务器端可考虑合并数据• 推送频繁客户端需要及时清理缓存,避免崩溃• 某些环境两者结合 (Poll 大数据 Push 小数据 ) 比如新浪某个人好友过多,超过 1W ,此时推送 数据量特别巨大,使用 Pull 较为合适
  • Java Support规范支持不足,总是落后业界一步Current:• NIO(New Unblocked I/O)• Servlet 3.0 Async• JUC(java.util.concurrent)• ...Future:• Servlet 3.1 Asynchronous Enhancement & Websocket• JAVA 7 AIO(Asynchronous I/O), 也称为 NIO2• JUC Plus• JAVA EE 7 Cloud Focused Upgrades
  • Servlet 3.0• 异步特性: – 异步请求 Servlet – 异步过滤器 Filter• 可挂起请求,而不是阻塞• Tomcat 7 Support• Jetty 8 Support• Resin 4.0 Support• Servlet 3.0 是一种进步,但还不够
  • Servlet Container & Comet• Jetty 6+ Jetty Continuation 高性能• Tomcat 6+ Advanced I/O• Grizzly API 内嵌于 Glassfish
  • Servlet Container & WebSocket• 暂无规范 API ,各自实现• Jetty 7+ 早已支持 WebSocket( 受众多 )• Tomcat 7.0.27 开始支持• Resin 4.0.2+• 混乱!
  • Java Server Support
  • 开源支持• SOCKET.IO http://socket.io 客户端 + 服务器端,完整成熟的解决方案• Cometd http://cometdproject.dojotoolkit.org/Bayeux 协议• DWR http://directwebremoting.org/dwr/index.html 严格意义上不算 Realtime Web 的代表• Atmosphere https://github.com/Atmosphere/atmosphere/ 服务器端异步 Websocket/Comet 框架,兼容各种现有 Comet 、 Servlet 3.0 接口• ......• NIO Framework Backend Support: Netty Grizzly Mina XWorkweb NIO ...
  • Choose ?使用者人数选择socket.io 特别火: (cometd 无此数据 ) 完整的解决方案推荐: cometd socket.io
  • socket.io• http://socket.io• 客户端 + 服务器端完整解决方案• 跨桌面端 + 移动端浏览器平台• 通信信道集大成者,自动适应最佳协议• 完善的错误、超时、重连处理机制• Publish/Subscribe 模型完整实现• 协议规范: https://github.com/LearnBoost/socket.io-spec
  • 其它特性• 重连后 , 服务器端缓存支持确保数据不丢失• 支持一个连接,多个订阅• 构建于 HTTP/Websocket 协议之上• 连接状态丰富 disconnected, disconnecting, connected and connecting• 传输通道状态 closed, closing, open, and opening• 支持心跳检测 / 连接超时 heartbeat/close timeout• 社区活跃,参与者众多
  • 支持传输机制• WebSocket• Adobe® Flash® Socket• AJAX long polling• AJAX multipart streaming• Forever Iframe• JSONP Polling 保证所有浏览器自动适应,优先选择最优,跨越浏览器平台的解决方案
  • 支持浏览器• Desktop – Internet Explorer 5.5+ – Safari 3+ – Google Chrome 4+ – Firefox 3+ – Opera 10.61+• Mobile – iPhone Safari – iPad Safari – Android WebKit – WebOs WebKit
  • 客户端• https://github.com/learnboost/socket.io-client/• 浏览器自动适配最佳传输机制• 支持指定传输机制• 简化 WebSocket API, 统一各种通信接口• 天然支持跨域• 事件驱动架构的典范• 代码优雅,简单易读• API DOC & Client Usage Doc: https://github.com/LearnBoost/Socket.IO-client
  • 客户端示范 1var socket = io.connect(http://localhost);socket.on(news, function (data) { console.log(data); socket.emit(my other event, { my: data });});
  • 客户端示范 2• 支持多 namespace( 支持订阅多个消息通 道 Channels)<script> var chat = io.connect(http://localhost/chat) , news = io.connect(http://localhost/news); chat.on(connect, function () { chat.emit(hi!); }); news.on(news, function () { news.emit(woot); });</script>
  • 服务器端• 默认为 node.js 实现 https://github.com/learnboost/socket.io/• 开源社区提供若干语言实现 https://github.com/learnboost/socket.io/wiki• Java 社区的支持 – ibdknox/socket.io-netty ( 不兼容最新 1.0 协议 ) – Ovea/Socket.IO-Java ( 不兼容最新 1.0 协议 ) – Gottox/socket.io-java-client Socket.IO Client Implementation in Java – yongboy/socketio-netty (Currently compatible with 0.9+)
  • socketio-netty• 基于高性能 NIO Framework Netty 构建• 从无到有全新编写• 兼容最新 socket.io client 以及 1.0 规范协 议• 兼容目前所知 WebSocket 草案协议• 项目地址 http://code.google.com/p/socketio-netty/• 邮件组地址: https://groups.google.com/group/socketio-netty• 目前已被几家公司应用于实际产品 / 项目中
  • Example Live• 示范在线演示入口地址: http://socketio.yongboy.com/• 在线聊天示范 http://socketio.yongboy.com/chat.html• 在线画板示范 http://socketio.yongboy.com/whiteboard.html
  • 工作机制1. 客户端发起一次握手请求 (POST) ,进行注册: http://socketio.yongboy.com:8080/socket.io/1/?t=1345341146182. 服务器进行授权,然后签名,并返回: session id:heartbeat timeout:closing timeout:transports eg:4d4f3dae355se:60:60:websocket,flashsocket,xhr-polling,jsonp-polling3. 客户端根据返回的传输通道列表检测浏览器是否支持 , 发起传输 通道请求 , 并携带上 SESSION ID: http://socketio.yongboy.com:8080/socket.io/1/websocket/4409080 5-a14d-410f-8197-943380226da74. 双方开始通信 心跳检测,发送 / 接受数据5. 连接成功建立
  • 搭建一个 Realtime Web 平台• 基于 socketio-netty也做一个 Realtime Web 平 台• 初始化 IOHandler 接口接口,上传到服务器,初 始化应用实例,获得一个 API KEY• 客户端引用 JS : <script src="http://domain.com/yourfirebase.js"></script>• 使用 API KEY : var socket = yourbase.load("08235-sdxd-d23523s-d23d"); socket.on(news, function (data) { console.log(data); socket.emit(my other event, { my: data }); }); 进阶阅读 : http://www.blogjava.net/yongboy/archive/2012/0
  • 实时 Web(Realtime Web)The real-time web is a set of technologies and practices that enable users to receive information as soon as it is published by its authors, rather than requiring that they or their software check a source periodically for updates.新的名词 / 概念,对数据推送的重新包装 ---Wikipedia对数据推送的最合适的解读
  • Publish/Subscribe• 发布 / 订阅( Publish/subscribe 或 pub/sub )是一种 消息范式,消息的发送者(发布者)不是计划发送其消息 给特定的接收者(订阅者)。而是发布的消息分为不同的 类别,而不需要知道什么样的订阅者订阅。订阅者对一个 或多个类别表达兴趣,于是只接收感兴趣的消息,而不需 要知道什么样的发布者发布的消息。这种发布者和订阅者 的解耦解耦可以允许更好的可扩放性和更为动态的网络拓 扑.• 事件驱动编程模式• 编程语言 ( 包括 JAVA) 对应观察者模式• Comet/PUSH/Realtime Web ,更具体、广义的现实实 现• 客户端订阅特定主题 / 话题 / 通道,服务器在数据到达时 及时推送给对应订阅者
  • 概念演进路线• AJAX 异步请求 (XHR)• 轮询 (XHR)• 长轮询 (XHR/Script tag /JSONP)• 流推送 (Hidden iFrame/XHR Streaming)• Comet/Push• Html5/WebSocket/FlashSocket• Real-Time Web
  • 适用范围• 在线多人游戏• 实时数据统计• Web 实时交互• 聊天 /Whiteboard/Story Mall/Feeds Mall• 页面信息实时推送• 社交类网站信息流• 实时协作 (eg:Google docs)• 构建跨桌面 / 移动浏览器的应用
  • 商业公司的选择• Twitter Netty + Scala( 基于 JVM 函数式编程语 言)• Facebook Php + HipHop( 改写过的 PHP 虚拟机 )• FriendFeed Python + Tornado• Google Waver/Doc/Instant Search ...
  • Realtime Web Products• http://www.pubnub.com/• http://www.firebase.com/• http://pusher.com/• https://www.hydna.com/• http://www.frozenmountain.com/• http://aboutecho.com/• http://www.spire.io/• ......
  • Web-Hooks:PubSubHubbub• PubSubHubbub是 Google 推出的一个基 于 Web-hook 方式的解决方案,重用 HTTP 协议,在订阅者所订阅的主题发生变 化时进行实时通知 ( 通过一可回调公网地 址)• 一般应用于博客 / 文章订阅,发布者一旦有 更新内容,订阅者可以马上得到通知• 可避免订阅者大量轮询对服务器造成压力• 订阅者注册之后 , 等待回调即可 , 省去轮询• Web-Hooks(callback url) 是一种服务器 端数据推送模式
  • 流程图
  • WebRTC• WebRTC是一个支持网络浏览器进行实时语音对 话或视频对话的软件架构• 可基于 Javascript APIs 和 HTML5API 构建• W3C 草案阶段,初步• 新 , 重要 , 划时代 , 革新 , 欢迎! http://code.google.com/p/webrtc/• 但浏览器支持有限• Chrome 20.0 和 Opera Mobile 12 已支持• Firefox 计划支持• 开源支持: webrtc4all ( 已全面支持 Windows 系 统)
  • WebRTC Live• http://apprtc.appspot.com/ ( 可能需要翻 墙)• http://sipml5.org/call.htm?svn=6• 感兴趣可以体验一下 , 需安装最新版 Chrome
  • SPDY• SPDY 是 Google 开发的基于传输控制协议 (TCP) 的应用层协议• 类似于 HTTP ,但旨在缩短网页的加载时间和提 高安全性• 草案阶段,已开始推动 SPDY 成为正式标准• 通过优先级和多路复用, SPDY 使得只需要建立 一个 TCP 连接即可传送网页内容及图片等资源• 对用户透明 , 感觉不到,除加载速度快了一些• socketio-netty 支持 SPDY 不复杂
  • Support ListTomcat 8 已列入计划支持
  • SPDY Live• 浏览器请求 SSL 握手期间决定是否采用• 火狐 (about:config->spdy) 安装 SPDY indicator, 检测支持 会在地址栏显示绿色闪电图标• chrome://net-internals/#spdy ( gmail.com )】• Apache SPDY 加载图片演示
  • 走向和预测• 和云结合,涌现更多租赁式• 和更具体服务结合,诸如实时统计 / 搜索 / 市场营销• 越来越多网站采用订阅 / 发布模式强推实时 信息流• 基于 Web-Hooks 相关协议具有回调 callback 将大行其道 ( 站点簇 , 相互依赖 )• 构建于 SPDY 协议上的更为高效的实时推 送• WebRTC :如虎添翼,已进入人们视野• HTTP 2.0 draft
  • 影响速度的一些因素• 域名解析速度 – 每次请求域名解析速度,长轮询时明显 – 国内可考虑类似 dnspod.cn 服务• 数据未压缩 – 数据合并 – gzip 压缩等• 防火墙、代理服务器 – 可能的端口拦截 – 代理服务器配合和缓存 – 连接持久注意时长问题等
  • Server 编程注意事项• Pragma:no-cache ( 一般不需要缓存 )• Proxy-Connection:Keep-Alive 不是标准 , 但告诉代理服务器需要保持长连 接• 及时刷新缓冲 (out.flush()) 否则会发生缓冲区满才被发送到客户端 高延迟否则会造成送达延迟• NIO/AIO + JUC IO + Concurrency, 是构建的基础 , 需 要些功底
  • 客户端调试• 利用浏览器内置的开发者工具 IE8(F12), Chrome(F12)• 检测连接状态 调用 API 接口,利用 log 输出当前连接状态等• 客户端日志输出 ( 支持 IE) function trace(s) { if (console in self && log in console) console.log(s); else alert(s); }• 别忘记 Firefox + Firebug ,超强组合• 注意页面端无用数据及时清理,避免崩溃
  • 一些可能需要了解的• Google PubSubHubbub 推送协议• WebHooks 推送协议• 队列服务器 (Message Queue Server)• Cache( 适当缓存 )• ......
  • 示范代码• 演示项目地址 https://code.google.com/p/realtime- web-demo/• SVN 检出地址 : https://realtime-web- demo.googlecode.com/svn/trunk/• 需要 Tomcat 7.0.29 支持• 注意 843 、 9000 端口不要被占用• Enjoy it~
  • 谢谢!