SlideShare a Scribd company logo

Real time web实时信息流推送

Y
yongboy
1 of 75
Download to read offline
Realtime Web 实时信息流
         推送
                 聂永
         yong.boy@gmail.com
  http://www.blogjava.net/yongboy/
提纲
• 推送实现技术/历程
• 客户端如何选择
• Java支持现状
• socket.io
• Realtime Web
Java Applets
Java 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 秒请求
  一次
轮询 - 工作机制
Ad

Recommended

Java API for WebSocket 實作介紹
Java API for WebSocket 實作介紹Java API for WebSocket 實作介紹
Java API for WebSocket 實作介紹My own sweet home!
 
20111018 zhouchen share
20111018 zhouchen share20111018 zhouchen share
20111018 zhouchen sharezcbug
 
PHP 應用之一 socket funion : 偽 WEB Server
PHP 應用之一 socket funion : 偽 WEB ServerPHP 應用之一 socket funion : 偽 WEB Server
PHP 應用之一 socket funion : 偽 WEB Server志賢 黃
 
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰Scourgen Hong
 
Http Headers 與 Cache 機制(2016)
Http Headers 與 Cache 機制(2016)Http Headers 與 Cache 機制(2016)
Http Headers 與 Cache 機制(2016)振揚 陳
 

More Related Content

What's hot

Make your web faster
Make your web fasterMake your web faster
Make your web faster德生 谭
 
Http cache 的優化
Http cache 的優化Http cache 的優化
Http cache 的優化振揚 陳
 
实时Web的前世今生未来
实时Web的前世今生未来实时Web的前世今生未来
实时Web的前世今生未来RolfZhang
 
淘宝开放产品前端实践
淘宝开放产品前端实践淘宝开放产品前端实践
淘宝开放产品前端实践taobao.com
 
Jetty服务器架构及调优.v2 2011-5
Jetty服务器架构及调优.v2 2011-5Jetty服务器架构及调优.v2 2011-5
Jetty服务器架构及调优.v2 2011-5lovingprince58
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染Ailsa126
 
非常靠谱 Html 5
非常靠谱 Html 5 非常靠谱 Html 5
非常靠谱 Html 5 Tony Deng
 
前端性能测试
前端性能测试前端性能测试
前端性能测试tbmallf2e
 
淺談RESTful API認證 Token機制使用經驗分享
淺談RESTful API認證 Token機制使用經驗分享淺談RESTful API認證 Token機制使用經驗分享
淺談RESTful API認證 Token機制使用經驗分享Tun-Yu Chang
 
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践Node.js在淘宝的应用实践
Node.js在淘宝的应用实践taobao.com
 
前端MVVM框架安全
前端MVVM框架安全前端MVVM框架安全
前端MVVM框架安全Borg Han
 
Node.js长连接开发实践
Node.js长连接开发实践Node.js长连接开发实践
Node.js长连接开发实践longhao
 
雲端環境的快取策略-Global Azure Bootcamp 2015 臺北場
雲端環境的快取策略-Global Azure Bootcamp 2015 臺北場雲端環境的快取策略-Global Azure Bootcamp 2015 臺北場
雲端環境的快取策略-Global Azure Bootcamp 2015 臺北場twMVC
 
台北市研習_LAMP_20140815
台北市研習_LAMP_20140815台北市研習_LAMP_20140815
台北市研習_LAMP_20140815fweng322
 
twMVC#42 Azure IoT Hub for Smart Factory
twMVC#42 Azure IoT Hub for Smart FactorytwMVC#42 Azure IoT Hub for Smart Factory
twMVC#42 Azure IoT Hub for Smart FactorytwMVC
 
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关jay li
 
D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践Jackson Tian
 
高性能网站最佳实践
高性能网站最佳实践高性能网站最佳实践
高性能网站最佳实践longhao
 
WebConf 2013「Best Practices - The Upload」
WebConf 2013「Best Practices - The Upload」WebConf 2013「Best Practices - The Upload」
WebConf 2013「Best Practices - The Upload」Orange Tsai
 
编辑器设计U editor
编辑器设计U editor编辑器设计U editor
编辑器设计U editortaobao.com
 

What's hot (20)

Make your web faster
Make your web fasterMake your web faster
Make your web faster
 
Http cache 的優化
Http cache 的優化Http cache 的優化
Http cache 的優化
 
实时Web的前世今生未来
实时Web的前世今生未来实时Web的前世今生未来
实时Web的前世今生未来
 
淘宝开放产品前端实践
淘宝开放产品前端实践淘宝开放产品前端实践
淘宝开放产品前端实践
 
Jetty服务器架构及调优.v2 2011-5
Jetty服务器架构及调优.v2 2011-5Jetty服务器架构及调优.v2 2011-5
Jetty服务器架构及调优.v2 2011-5
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染
 
非常靠谱 Html 5
非常靠谱 Html 5 非常靠谱 Html 5
非常靠谱 Html 5
 
前端性能测试
前端性能测试前端性能测试
前端性能测试
 
淺談RESTful API認證 Token機制使用經驗分享
淺談RESTful API認證 Token機制使用經驗分享淺談RESTful API認證 Token機制使用經驗分享
淺談RESTful API認證 Token機制使用經驗分享
 
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
 
前端MVVM框架安全
前端MVVM框架安全前端MVVM框架安全
前端MVVM框架安全
 
Node.js长连接开发实践
Node.js长连接开发实践Node.js长连接开发实践
Node.js长连接开发实践
 
雲端環境的快取策略-Global Azure Bootcamp 2015 臺北場
雲端環境的快取策略-Global Azure Bootcamp 2015 臺北場雲端環境的快取策略-Global Azure Bootcamp 2015 臺北場
雲端環境的快取策略-Global Azure Bootcamp 2015 臺北場
 
台北市研習_LAMP_20140815
台北市研習_LAMP_20140815台北市研習_LAMP_20140815
台北市研習_LAMP_20140815
 
twMVC#42 Azure IoT Hub for Smart Factory
twMVC#42 Azure IoT Hub for Smart FactorytwMVC#42 Azure IoT Hub for Smart Factory
twMVC#42 Azure IoT Hub for Smart Factory
 
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
 
D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践
 
高性能网站最佳实践
高性能网站最佳实践高性能网站最佳实践
高性能网站最佳实践
 
WebConf 2013「Best Practices - The Upload」
WebConf 2013「Best Practices - The Upload」WebConf 2013「Best Practices - The Upload」
WebConf 2013「Best Practices - The Upload」
 
编辑器设计U editor
编辑器设计U editor编辑器设计U editor
编辑器设计U editor
 

Similar to Real time web实时信息流推送

用戶端攻擊與防禦
用戶端攻擊與防禦用戶端攻擊與防禦
用戶端攻擊與防禦Taien Wang
 
real-time Web的運用
real-time Web的運用real-time Web的運用
real-time Web的運用Robin Su
 
移动端Web开发性能优化实践
移动端Web开发性能优化实践移动端Web开发性能优化实践
移动端Web开发性能优化实践Mingel Zhang
 
运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践Li JianYe
 
Node Web开发实战
Node Web开发实战Node Web开发实战
Node Web开发实战fengmk2
 
构建ActionScript游戏服务器,支持超过15000并发连接
构建ActionScript游戏服务器,支持超过15000并发连接 构建ActionScript游戏服务器,支持超过15000并发连接
构建ActionScript游戏服务器,支持超过15000并发连接 Renaun Erickson
 
Btrace intro(撒迦)
Btrace intro(撒迦)Btrace intro(撒迦)
Btrace intro(撒迦)ykdsg
 
Make your DVR playground using DevStack
Make your DVR playground using DevStackMake your DVR playground using DevStack
Make your DVR playground using DevStackJiang Jun
 
COSCUP 2010 - node.JS 於互動式網站之應用
COSCUP 2010 - node.JS 於互動式網站之應用COSCUP 2010 - node.JS 於互動式網站之應用
COSCUP 2010 - node.JS 於互動式網站之應用ericpi Bi
 
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.02011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0Anthony Chen
 
Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门Xiujun Ma
 
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具taobao.com
 
Yog Framework
Yog FrameworkYog Framework
Yog Frameworkfansekey
 
Node Web开发实战
Node Web开发实战Node Web开发实战
Node Web开发实战fengmk2
 
Android 4-app
Android 4-appAndroid 4-app
Android 4-applydiafly
 
HTML5概览
HTML5概览HTML5概览
HTML5概览Adam Lu
 
Node js实践
Node js实践Node js实践
Node js实践myzykj
 
WEB 安全基础
WEB 安全基础WEB 安全基础
WEB 安全基础xki
 
客户端存储与计算
客户端存储与计算客户端存储与计算
客户端存储与计算xiaotao ning
 

Similar to Real time web实时信息流推送 (20)

用戶端攻擊與防禦
用戶端攻擊與防禦用戶端攻擊與防禦
用戶端攻擊與防禦
 
real-time Web的運用
real-time Web的運用real-time Web的運用
real-time Web的運用
 
移动端Web开发性能优化实践
移动端Web开发性能优化实践移动端Web开发性能优化实践
移动端Web开发性能优化实践
 
运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践
 
Node Web开发实战
Node Web开发实战Node Web开发实战
Node Web开发实战
 
构建ActionScript游戏服务器,支持超过15000并发连接
构建ActionScript游戏服务器,支持超过15000并发连接 构建ActionScript游戏服务器,支持超过15000并发连接
构建ActionScript游戏服务器,支持超过15000并发连接
 
Btrace intro(撒迦)
Btrace intro(撒迦)Btrace intro(撒迦)
Btrace intro(撒迦)
 
Make your DVR playground using DevStack
Make your DVR playground using DevStackMake your DVR playground using DevStack
Make your DVR playground using DevStack
 
COSCUP 2010 - node.JS 於互動式網站之應用
COSCUP 2010 - node.JS 於互動式網站之應用COSCUP 2010 - node.JS 於互動式網站之應用
COSCUP 2010 - node.JS 於互動式網站之應用
 
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.02011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
 
Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门
 
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
 
Yog Framework
Yog FrameworkYog Framework
Yog Framework
 
Node Web开发实战
Node Web开发实战Node Web开发实战
Node Web开发实战
 
Android 4-app
Android 4-appAndroid 4-app
Android 4-app
 
HTML5概览
HTML5概览HTML5概览
HTML5概览
 
摘星
摘星摘星
摘星
 
Node js实践
Node js实践Node js实践
Node js实践
 
WEB 安全基础
WEB 安全基础WEB 安全基础
WEB 安全基础
 
客户端存储与计算
客户端存储与计算客户端存储与计算
客户端存储与计算
 

More from yongboy

Real-Time Web实时信息流推送
Real-Time Web实时信息流推送Real-Time Web实时信息流推送
Real-Time Web实时信息流推送yongboy
 
支撑Facebook消息处理的h base存储系统
支撑Facebook消息处理的h base存储系统支撑Facebook消息处理的h base存储系统
支撑Facebook消息处理的h base存储系统yongboy
 
Redis学习笔记
Redis学习笔记Redis学习笔记
Redis学习笔记yongboy
 
Tup2 新浪杨卫华
Tup2 新浪杨卫华Tup2 新浪杨卫华
Tup2 新浪杨卫华yongboy
 
Tup2 人人网张铁安
Tup2 人人网张铁安Tup2 人人网张铁安
Tup2 人人网张铁安yongboy
 
Tup2王鹏云:实时搜索架构分析
Tup2王鹏云:实时搜索架构分析Tup2王鹏云:实时搜索架构分析
Tup2王鹏云:实时搜索架构分析yongboy
 

More from yongboy (6)

Real-Time Web实时信息流推送
Real-Time Web实时信息流推送Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
 
支撑Facebook消息处理的h base存储系统
支撑Facebook消息处理的h base存储系统支撑Facebook消息处理的h base存储系统
支撑Facebook消息处理的h base存储系统
 
Redis学习笔记
Redis学习笔记Redis学习笔记
Redis学习笔记
 
Tup2 新浪杨卫华
Tup2 新浪杨卫华Tup2 新浪杨卫华
Tup2 新浪杨卫华
 
Tup2 人人网张铁安
Tup2 人人网张铁安Tup2 人人网张铁安
Tup2 人人网张铁安
 
Tup2王鹏云:实时搜索架构分析
Tup2王鹏云:实时搜索架构分析Tup2王鹏云:实时搜索架构分析
Tup2王鹏云:实时搜索架构分析
 

Real time web实时信息流推送

  • 1. Realtime Web 实时信息流 推送 聂永 yong.boy@gmail.com http://www.blogjava.net/yongboy/
  • 2. 提纲 • 推送实现技术/历程 • 客户端如何选择 • Java支持现状 • socket.io • Realtime Web
  • 3. Java Applets Java Applets 客户端脚本 – java.net.socket 建立 Socket 连接 – 要求本地安装 JRE ,不够轻量 – 微软和 Sun 公司不作为,已淡出人们视野
  • 4. 轮询 (Polling) • 简单易用,容易实现 • 所有浏览器都支持 • 短连接 • 每次请求,立刻返回 • JSONP Polling 可跨域 • Script tag Polling 可跨域 缺点: • 建立大量连接 • 服务器端并发压力大 • 很少被使用到
  • 5. 示范代码 var polling = function() { $.get("getServerTime", function(data) { $("#result").html("<strong>" + data + "</strong>"); }, "text"); } setInterval(polling, 10000);// 每 10 秒请求 一次
  • 7. 长轮询 (Long Polling) • Http 1.1 Connection:keep-alive 长连接 协议 • 服务器端数据就绪可立即返回 • 服务器若未就绪,连接不断开,等待一段 时间 • 表现形式: XMLHttpRequest Script tag Long Polling JSONP
  • 9. XMLHttpRequest Long Polling • 形式自由简单,采用较多 • 错误处理、超时管理可控性强 • 默认无法跨域 • 采用跨域资源共享 CORS 可部分实现跨域 • 浏览器支持 CROS 情况 http://caniuse.com/cors • head("Access-Control-Allow-Origin", "*")
  • 10. 示范代码 function initGet() { $.get("getNextTimeAsync").success(function( resp) { log(resp); }).error(function() { log("ERROR!"); }).done(initGet); // 重新发起新的请求 } // 执行请求 initGet();
  • 11. 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
  • 12. 示范代码 客户端: <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');
  • 13. 轮询 VS 长轮询 • 短轮询一般定时请求 • 长轮询一般在上一次轮询完成之后,发起 下一个新的请求 • AJAX 长轮询时,最好标注超时时间 • 服务器端处理方式有所不同
  • 14. 流推送 (Streaming) • 客户端一次连接,服务器数据可多次推送 • 低延迟通信相对经济的单向通道选择 • 实现方案: Hidden iFrame(iframe + htmlfile) XMLHttpRequest Streaming • 浏览器Streaming兼容性测试
  • 15. 请求流程 Hidden iFrame + XMLHttpRequest Streaming 类似,但输出稍有差别
  • 16. Hidden iFrame • 隐藏 iframe + htmlfile 组成 • 服务器发送 chunked 编码数据块 • 每个数据块即一段 javascript 代码 • 通过 javascript 渲染页面数据 • 各个浏览器都支持 iframe • 在 IE 、 Firefox 下面效果最好 • 不可跨域 • 缺点: 错误处理可控性不强
  • 18. XMLHttpRequest Streaming • XMLHttpRequest 以流的形式输出 • 浏览器需要支持的 multi-part 标志 • 跨域资源共享 (Cross-Origin Resource Sharing) 简称 CROPS 可实现 Ajax 跨域 • 支持浏览器不多 • 进阶阅读 : Servlet 3.0笔记之异步请求Comet推送XMLHttp
  • 20. Comet Comet 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 应用架构。基于这种架构开 发的应用中,服务器端会主动以异步的方 式向客户端程序推送数据,而不需要客户 端显式的发出请求。 - 百度 百科
  • 21. Comet 解读 • 一种编程模型 , 若干实现技术组合 • 低延迟通信,较长的存活期 • 也称反转 Ajax(Reverse Ajax) • 强调从服务器主动推送数据到客户端 • 实现形式:流( streaming )和长轮询 ( long polling ) • JSONP Long Polling 可跨域 • CROS可跨域
  • 23. Websocket • HTML5 • 长连接 • WebSocket 规范的目标是在浏览器中实 现和服务器端双向通信 . • 缺点 • 需要现代化浏览器支持
  • 24. 示范代码 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"; };
  • 26. Flash Socket • WebSocket 的替代品 , 浏览器不支持可回退 • 客户端 JavaScript 与 Flash 交互调用: JS 调用 Flash Socket 接口发送数据 Flash Socket 与服务器端 Socket 服务器通信 Flash Socket 接收到数据调用注册的 JS 函数 JS 渲染数据 • 优点:实现 TCP/IP 即时双向通信,真的很实时 • 缺点: 客户端须安装 Flash 插件 非 HTTP 协议 防火墙、代理服务器也可能对非 HTTP 通道端口 进行限制
  • 27. 示范代码 <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>
  • 28. 注意事项 • 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%
  • 29. Server-Sent Events • HTML5 API ,专注 Server PUSH 通知 • 客户端开启一个 HTTP 连接 , 以 DOM 事件 形式接收收服务器端发来通知 • 该 API 目的在于它能够被扩展,使其能和 其他 push 通知机制协作 • Server-Client 单通道事件流 (Event Stream) ,客户端无法通过此通道交互 • 类似于长轮询机制 • 发送头部 Content-Type:text/event- stream
  • 30. 示范代码 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);
  • 31. 浏览器支持情况 HTML5 草案阶段 Firefox/Chrome/Safari/Opera 支持最好 不支持 EventSource 的浏览器,可采用 XHR Long Polling http://caniuse.com/#search=eventsource
  • 32. 抉择! 桌面端浏览器较为容易选择 FlashSocket ( IE6+ , Javascript 可包装为 Websocket ) WebSocket 服务器端可单独配置 WebSocket 服务器 移动端 WebSocket 长轮询 ( 对不适合 Websocket 的浏览器 )
  • 33. Flash Socket & WebSocket
  • 34. Ping-Pong • 客户端 / 服务器状态连接检查机制 • 心跳机制确定客户端 / 服务器端数据通信 • 连接超时处理 • 超时重新连接处理 • 连接状态的持久化处理 • 未及时发送数据缓存处理等
  • 35. Poll VS Push • Poll 适合小数据量,服务器消耗可无视 • Push 适合快速、较为实时环境 • 短连接频繁,可考虑较为高效的长连接 • 长连接耗费连接资源,在不传输数据时 • 长连接是一把双刃剑,需要慎重使用 • 注意服务器对并发 HTTP 连接的数量限制等 • 数据量大,服务器端可考虑合并数据 • 推送频繁客户端需要及时清理缓存,避免崩溃 • 某些环境两者结合 (Poll 大数据 Push 小数据 ) 比如新浪某个人好友过多,超过 1W ,此时推送 数据量特别巨大,使用 Pull 较为合适
  • 36. 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
  • 37. Servlet 3.0 • 异步特性: – 异步请求 Servlet – 异步过滤器 Filter • 可挂起请求,而不是阻塞 • Tomcat 7 Support • Jetty 8 Support • Resin 4.0 Support • Servlet 3.0 是一种进步,但还不够
  • 38. Servlet Container & Comet • Jetty 6+ Jetty Continuation 高性能 • Tomcat 6+ Advanced I/O • Grizzly API 内嵌于 Glassfish
  • 39. Servlet Container & WebSocket • 暂无规范 API ,各自实现 • Jetty 7+ 早已支持 WebSocket( 受众多 ) • Tomcat 7.0.27 开始支持 • Resin 4.0.2+ • 混乱!
  • 41. 开源支持 • 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 ...
  • 42. Choose ? 使用者人数选择 socket.io 特别火: (cometd 无此数据 ) 完整的解决方案推荐: cometd socket.io
  • 43. socket.io • http://socket.io • 客户端 + 服务器端完整解决方案 • 跨桌面端 + 移动端浏览器平台 • 通信信道集大成者,自动适应最佳协议 • 完善的错误、超时、重连处理机制 • Publish/Subscribe 模型完整实现 • 协议规范: https://github.com/LearnBoost/socket.io-spec
  • 44. 其它特性 • 重连后 , 服务器端缓存支持确保数据不丢失 • 支持一个连接,多个订阅 • 构建于 HTTP/Websocket 协议之上 • 连接状态丰富 disconnected, disconnecting, connected and connecting • 传输通道状态 closed, closing, open, and opening • 支持心跳检测 / 连接超时 heartbeat/close timeout • 社区活跃,参与者众多
  • 45. 支持传输机制 • WebSocket • Adobe® Flash® Socket • AJAX long polling • AJAX multipart streaming • Forever Iframe • JSONP Polling 保证所有浏览器自动适应,优先选择最优,跨越浏览器平台的解决方案
  • 46. 支持浏览器 • Desktop – Internet Explorer 5.5+ – Safari 3+ – Google Chrome 4+ – Firefox 3+ – Opera 10.61+ • Mobile – iPhone Safari – iPad Safari – Android WebKit – WebOs WebKit
  • 47. 客户端 • https://github.com/learnboost/socket.io-client/ • 浏览器自动适配最佳传输机制 • 支持指定传输机制 • 简化 WebSocket API, 统一各种通信接口 • 天然支持跨域 • 事件驱动架构的典范 • 代码优雅,简单易读 • API DOC & Client Usage Doc: https://github.com/LearnBoost/Socket.IO-client
  • 48. 客户端示范 1 var socket = io.connect('http://localhost'); socket.on('news', function (data) { console.log(data); socket.emit('my other event', { my: 'data' }); });
  • 49. 客户端示范 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>
  • 50. 服务器端 • 默认为 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+)
  • 51. 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 • 目前已被几家公司应用于实际产品 / 项目中
  • 52. Example Live • 示范在线演示入口地址: http://socketio.yongboy.com/ • 在线聊天示范 http://socketio.yongboy.com/chat.html • 在线画板示范 http://socketio.yongboy.com/whiteboard.html
  • 53. 工作机制 1. 客户端发起一次握手请求 (POST) ,进行注册: http://socketio.yongboy.com:8080/socket.io/1/?t=134534114618 2. 服务器进行授权,然后签名,并返回: session id:heartbeat timeout:closing timeout:transports eg:4d4f3dae355se:60:60:websocket,flashsocket,xhr-polling,jsonp-polling 3. 客户端根据返回的传输通道列表检测浏览器是否支持 , 发起传输 通道请求 , 并携带上 SESSION ID: http://socketio.yongboy.com:8080/socket.io/1/websocket/4409080 5-a14d-410f-8197-943380226da7 4. 双方开始通信 心跳检测,发送 / 接受数据 5. 连接成功建立
  • 54. 搭建一个 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
  • 55. 实时 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 对数据推送的最合适的解读
  • 56. Publish/Subscribe • 发布 / 订阅( Publish/subscribe 或 pub/sub )是一种 消息范式,消息的发送者(发布者)不是计划发送其消息 给特定的接收者(订阅者)。而是发布的消息分为不同的 类别,而不需要知道什么样的订阅者订阅。订阅者对一个 或多个类别表达兴趣,于是只接收感兴趣的消息,而不需 要知道什么样的发布者发布的消息。这种发布者和订阅者 的解耦解耦可以允许更好的可扩放性和更为动态的网络拓 扑. • 事件驱动编程模式 • 编程语言 ( 包括 JAVA) 对应观察者模式 • Comet/PUSH/Realtime Web ,更具体、广义的现实实 现 • 客户端订阅特定主题 / 话题 / 通道,服务器在数据到达时 及时推送给对应订阅者
  • 57. 概念演进路线 • AJAX 异步请求 (XHR) • 轮询 (XHR) • 长轮询 (XHR/Script tag /JSONP) • 流推送 (Hidden iFrame/XHR Streaming) • Comet/Push • Html5/WebSocket/FlashSocket • Real-Time Web
  • 58. 适用范围 • 在线多人游戏 • 实时数据统计 • Web 实时交互 • 聊天 /Whiteboard/Story Mall/Feeds Mall • 页面信息实时推送 • 社交类网站信息流 • 实时协作 (eg:Google docs) • 构建跨桌面 / 移动浏览器的应用
  • 59. 商业公司的选择 • Twitter Netty + Scala( 基于 JVM 函数式编程语 言) • Facebook Php + HipHop( 改写过的 PHP 虚拟机 ) • FriendFeed Python + Tornado • Google Waver/Doc/Instant Search ...
  • 60. 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/ • ......
  • 61. Web-Hooks:PubSubHubbub • PubSubHubbub是 Google 推出的一个基 于 Web-hook 方式的解决方案,重用 HTTP 协议,在订阅者所订阅的主题发生变 化时进行实时通知 ( 通过一可回调公网地 址) • 一般应用于博客 / 文章订阅,发布者一旦有 更新内容,订阅者可以马上得到通知 • 可避免订阅者大量轮询对服务器造成压力 • 订阅者注册之后 , 等待回调即可 , 省去轮询 • Web-Hooks(callback url) 是一种服务器 端数据推送模式
  • 63. WebRTC • WebRTC是一个支持网络浏览器进行实时语音对 话或视频对话的软件架构 • 可基于 Javascript APIs 和 HTML5API 构建 • W3C 草案阶段,初步 • 新 , 重要 , 划时代 , 革新 , 欢迎! http://code.google.com/p/webrtc/ • 但浏览器支持有限 • Chrome 20.0 和 Opera Mobile 12 已支持 • Firefox 计划支持 • 开源支持: webrtc4all ( 已全面支持 Windows 系 统)
  • 64. WebRTC Live • http://apprtc.appspot.com/ ( 可能需要翻 墙) • http://sipml5.org/call.htm?svn=6 • 感兴趣可以体验一下 , 需安装最新版 Chrome
  • 65. SPDY • SPDY 是 Google 开发的基于传输控制协议 (TCP) 的应用层协议 • 类似于 HTTP ,但旨在缩短网页的加载时间和提 高安全性 • 草案阶段,已开始推动 SPDY 成为正式标准 • 通过优先级和多路复用, SPDY 使得只需要建立 一个 TCP 连接即可传送网页内容及图片等资源 • 对用户透明 , 感觉不到,除加载速度快了一些 • socketio-netty 支持 SPDY 不复杂
  • 66. Support List Tomcat 8 已列入计划支持
  • 67. SPDY Live • 浏览器请求 SSL 握手期间决定是否采用 • 火狐 (about:config->spdy) 安装 SPDY indicator, 检测支持 会在地址栏显示绿色闪电图标 • chrome://net-internals/#spdy ( gmail.com )】 • Apache SPDY 加载图片演示
  • 68. 走向和预测 • 和云结合,涌现更多租赁式 • 和更具体服务结合,诸如实时统计 / 搜索 / 市场营销 • 越来越多网站采用订阅 / 发布模式强推实时 信息流 • 基于 Web-Hooks 相关协议具有回调 callback 将大行其道 ( 站点簇 , 相互依赖 ) • 构建于 SPDY 协议上的更为高效的实时推 送 • WebRTC :如虎添翼,已进入人们视野 • HTTP 2.0 draft
  • 69. 影响速度的一些因素 • 域名解析速度 – 每次请求域名解析速度,长轮询时明显 – 国内可考虑类似 dnspod.cn 服务 • 数据未压缩 – 数据合并 – gzip 压缩等 • 防火墙、代理服务器 – 可能的端口拦截 – 代理服务器配合和缓存 – 连接持久注意时长问题等
  • 70. Server 编程注意事项 • Pragma:no-cache ( 一般不需要缓存 ) • Proxy-Connection:Keep-Alive 不是标准 , 但告诉代理服务器需要保持长连 接 • 及时刷新缓冲 (out.flush()) 否则会发生缓冲区满才被发送到客户端 高延迟否则会造成送达延迟 • NIO/AIO + JUC IO + Concurrency, 是构建的基础 , 需 要些功底
  • 71. 客户端调试 • 利用浏览器内置的开发者工具 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 ,超强组合 • 注意页面端无用数据及时清理,避免崩溃
  • 72. 一些可能需要了解的 • Google PubSubHubbub 推送协议 • WebHooks 推送协议 • 队列服务器 (Message Queue Server) • Cache( 适当缓存 ) • ......
  • 73. 示范代码 • 演示项目地址 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~

Editor's Notes

  1. Socket.IO and Binary Messages InfoQ: WebSockets 与 Bayeux/CometD
  2. Java Applets 已经被淘汰
  3. 可参考资料: 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 长连接有时效性,不是可靠连接。
  4. 基于 jQuery
  5. Comet (long polling) for all browsers using ScriptCommunicator http://amix.dk/blog/post/19489#Comet-long-polling-for-all-browsers-ScriptCommunicator
  6. 可参考: 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
  7. 可参考: 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
  8. 借助于: web-socket-js
  9. 可考虑: https://github.com/rwldrn/jquery.eventsource https://github.com/Yaffle/EventSource/blob/master/eventsource.js
  10. 若采用 Phonegap 构建跨浏览器应用,可以采用 Websocket 协议
  11. http://help.adobe.com/en_US/ColdFusion/10.0/Developing/WSe61e35da8d318518767eb3aa135858633ee-7fea.html web-socket-js ,跨浏览器透明使用 WebSocket https://github.com/gimite/web-socket-js &lt;!-- Import JavaScript Libraries. --&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;swfobject.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;web_socket.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; // Let the library know where WebSocketMain.swf is: WEB_SOCKET_SWF_LOCATION = &quot;WebSocketMain.swf&quot;; // Write your code in the same way as for native WebSocket: var ws = new WebSocket(&quot;ws://example.com:10081/&quot;); ws.onopen = function() { ws.send(&quot;Hello&quot;); // Sends a message. }; ws.onmessage = function(e) { // Receives a message. alert(e.data); }; ws.onclose = function() { alert(&quot;closed&quot;); }; &lt;/script&gt;
  12. eg : 消息队列 JAX-RS 也是增强
  13. Servlet 3.0 推出时间
  14. JBoss AS 7: https://community.jboss.org/wiki/WebsocketSupportInAS7
  15. Atmosphere The Asynchronous WebSocket/Comet Framework 是一个 Java 技术框架,其提供了通用的 API 来使用许多 web 服务器的 Comet 和 WebSocket ,这些 web 服务器包括了 Tomcat 、 Jetty 、 GlassFish 、 Weblogic 、 Grizzly 、 JBossWeb 、 JBoss 和 Resin ,其还支持任何支持 Servlet 3.0 规范的 web 服务器。 客户端支持不是那么强大
  16. http://www.google.com/trends/?q=socket.io&amp;ctab=0&amp;geo=all&amp;date=all http://www.google.com/trends/?q=cometd
  17. 构建于 HTTP/Websocket 协议之上
  18. http://socket.io/#browser-support
  19. 目前服务器端支持最新协议的 socket.io 开源实现,就只剩下本人的 socketio-netty 了
  20. 为什么不基于 Jetty/Tomcat 构建原因在于: 1.Websocket 尚未成为规范 2. 使用高性能 Netty 实现 HTTP 堆栈相比 Tomcat/Jetty 少了很多层次的数据流转,只专注核心业务等 3. 缺少资助 / 动力
  21. 此处 Firefox + Firebug 进行演示 服务器授权可能会返回: 401 Unauthorized 503 Service Unavailable 等信息 没有自身注册,直接进入下一关,不会成功
  22. 展望,若做一个平台,如何去做,来源于: http://www.blogjava.net/yongboy/archive/2012/06/11/380508.html
  23. 来源: http://en.wikipedia.org/wiki/Real-time_web 实时 Web ,一组技术和实践的组合,保证用户可以最快速度接收发布者发布的信息,而不是需要周期性检测发布者的更新。
  24. SOURCE: http://zh.wikipedia.org/wiki/%E5%8F%91%E5%B8%83/%E8%AE%A2%E9%98%85 更具体的
  25. XHR = XMLHttpRequest
  26. http://zh.wikipedia.org/wiki/Scala
  27. 国外有关实时 Web 实时信息流发展远超国内,已经出现相关之力于此的公司和专业产品。 本人也想致力于更加产业化的进一步,但没有相应的工作环境
  28. [ 教程 ] 如何使用 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
  29. 图片来自(略有修改): http://timyang.net/web/pubsubhubbub/
  30. 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&apos;s WebRTC http://gigaom.com/2012/08/06/microsoft-webrtc-w3c
  31. http://zh.wikipedia.org/zh/SPDY 据说性能是 HTTP 的两倍
  32. 进阶阅读: 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
  33. 打开图片,看在线版演示
  34. 简单提及,若深入,需要申请另外一场有偿培训,哈哈 ~ 默认情况下所在 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 消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。
  35. PubSubHubbu/WebHooks: 专注于服务器端主动推送给客户端,但要求客户端具有可访问的地址 ( 相对于服务器端 ) 客户端不需要主动建立连接,等待被呼叫即可 广义的发布 / 订阅模型 MQ Server, 消息队列服务器 , 和 socket.io 结合会更加有利于消息传递等 Message Queue Server: ActiveMQ Redis RabbitMQ ZeroMQ http://www.aqee.net/message-queue-shootout/
  36. 哈,能够听完真个演讲,需要很大的耐心。