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 秒请求
一次

6. 轮询 - 工作机制

7. 长轮询 (Long Polling)
• Http 1.1 Connection:keep-alive 长连接
协议
• 服务器端数据就绪可立即返回
• 服务器若未就绪，连接不断开，等待一段
时间
• 表现形式：
XMLHttpRequest
Script tag Long Polling
JSONP

8. 流程图
1.服务器端阻塞 / 挂起请求直到数据到达或超时，然后返回
2.客户端处理服务器返回消息，再次发起请求
3.在客户端建立连接所消耗期间，服务器端新数据需要暂时缓存

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 下面效果最好
• 不可跨域
• 缺点： 错误处理可控性不强

17. 客户端响应

18. XMLHttpRequest Streaming
• XMLHttpRequest 以流的形式输出
• 浏览器需要支持的 multi-part 标志
• 跨域资源共享 (Cross-Origin Resource
Sharing) 简称 CROPS 可实现 Ajax 跨域
• 支持浏览器不多
• 进阶阅读 :
Servlet 3.0笔记之异步请求Comet推送XMLHttp

19. CROS 支持情况
• http://caniuse.com/#feat=cors

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可跨域

22. Comet 浏览器支持情况
来源地址： http://www.blogjava.net/yongboy/archive/2011/02/27/346195.html

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";
};

25. 浏览器支持情况
来源： http://caniuse.com/#search=websocket
Android <=4.0 和 Opera Mini 依然不支持 WebSocket

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+
• 混乱！

40. Java Server Support

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) 是一种服务器
端数据推送模式

62. 流程图

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~

75. 谢谢！