Embed Size (px)
Citation preview
提纲
• 推送实现技术/历程• 客户端如何选择• 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 秒请求一次
轮询 - 工作机制
长轮询 (Long Polling)
• Http 1.1 Connection:keep-alive 长连接协议
• 服务器端数据就绪可立即返回• 服务器若未就绪，连接不断开，等待一段
时间
• 表现形式：XMLHttpRequestScript tag Long PollingJSONP
流程图
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/yourCometProvider.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推送XMLHttpRequest示范
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/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";
};
浏览器支持情况
来源： http://caniuse.com/#search=websocket
Android <=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/downloads.html• 移动端 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 的代表
• Atmospherehttps://github.com/Atmosphere/atmosphere/服务器端异步 Websocket/Comet 框架，兼容各种现有 Comet 、 Servlet 3.0 接口
• ......
• NIO Framework Backend Support:NettyGrizzlyMinaXWorkweb\
NIO...
Choose ?
使用者人数选择socket.io 特别火： (cometd 无此数据 )
完整的解决方案推荐：cometdsocket.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
客户端示范 1
var 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:transportseg:4d4f3dae355se:60:60:websocket,flashsocket,xhr-polling,jsonp-polling
3. 客户端根据返回的传输通道列表检测浏览器是否支持 , 发起传输通道请求 , 并携带上 SESSION ID:http://socketio.yongboy.com:8080/socket.io/1/websocket/44090805-a14d-410f-8197-943380226da7
4. 双方开始通信心跳检测，发送 / 接受数据
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/06/11/380508.html
实时 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)• 构建跨桌面 / 移动浏览器的应用
商业公司的选择
• TwitterNetty + Scala( 基于 JVM 函数式编程语言 )
• FacebookPhp + HipHop(改写过的 PHP虚拟机 )
• FriendFeedPython + Tornado
• GoogleWaver/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 List
Tomcat 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 + JUCIO ＋ 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~
谢谢！
