《RealTimeWeb实时信息流推送课件》由会员分享，可在线阅读，更多相关《RealTimeWeb实时信息流推送课件（75页珍藏版）》请在金锄头文库上搜索。
1、Realtime Web实时信息流推送实时信息流推送聂永yong.Real-TimeWeb实时信息流推送提纲推送实现技术/历程客户端如何选择Java支持现状socket.ioRealtime WebReal-TimeWeb实时信息流推送Java AppletsJava Applets客户端脚本.socket建立Socket连接要求本地安装JRE，不够轻量微软和Sun公司不作为，已淡出人们视野Real-TimeWeb实时信息流推送轮询(Polling)简单易用，容易实现所有浏览器都支持短连接每次请求，立刻返回JSONP Polling 可跨域Script tag Polling 可跨域缺点：建立
2、大量连接服务器端并发压力大很少被使用到Real-TimeWeb实时信息流推送示范代码var polling = function() $.get(getServerTime, function(data) $(#result).html( + data + );, text);setInterval(polling, 10000);/ 每10秒请求一次Real-TimeWeb实时信息流推送轮询-工作机制Real-TimeWeb实时信息流推送长轮询(Long Polling)Http 1.1 Connection:keep-alive长连接协议服务器端数据就绪可立即返回服务器若未就绪，连接不断开
3、，等待一段时间表现形式：XMLHttpRequestScript tag Long PollingJSONPReal-TimeWeb实时信息流推送流程图1.服务器端阻塞/挂起请求直到数据到达或超时，然后返回2.客户端处理服务器返回消息，再次发起请求3.在客户端建立连接所消耗期间，服务器端新数据需要暂时缓存 Real-TimeWeb实时信息流推送XMLHttpRequest Long Polling形式自由简单，采用较多错误处理、超时管理可控性强默认无法跨域采用跨域资源共享CORS可部分实现跨域浏览器支持CROS情况head(Access-Control-Allow-Origin, *)Real
4、-TimeWeb实时信息流推送示范代码function initGet() $.get(getNextTimeAsync).success(function(resp) log(resp);).error(function() log(ERROR!);).done(initGet); /重新发起新的请求/ 执行请求initGet();Real-TimeWeb实时信息流推送Script tag Long Polling表现形式:可跨域风险:无法控制因跨域产生返回函数的执行(一个站点系无此担忧)一般应用于同一级域名，不同二级域名搭配使用可使用JSONP规避此javascript风险很棒的入门资料:
5、Comet (long polling) for all browsers using ScriptCommunicatorReal-TimeWeb实时信息流推送示范代码客户端：var url = scriptTagDemo?time= + new Date().getTime();var on_success = function()doRequst(); /执行成功后,重新发起请求;var on_error = function()alert(Something went wrong!);var doRequst = function()ScriptCommunicator.sourceJ
6、avaScript(url, on_success, on_error);doRequst();服务器端返回：ScriptCommunicator.callback_called = true;$(#div).html(Now Time : 2012-08-22 09:58:04 078);Real-TimeWeb实时信息流推送轮询VS长轮询短轮询一般定时请求长轮询一般在上一次轮询完成之后，发起下一个新的请求AJAX长轮询时，最好标注超时时间服务器端处理方式有所不同Real-TimeWeb实时信息流推送流推送(Streaming)客户端一次连接，服务器数据可多次推送低延迟通信相对经济的单向通道
7、选择实现方案：Hidden iFrame(iframe + htmlfile) XMLHttpRequest Streaming浏览器Streaming兼容性测试Real-TimeWeb实时信息流推送请求流程Hidden iFrame + XMLHttpRequest Streaming类似，但输出稍有差别Real-TimeWeb实时信息流推送Hidden iFrame隐藏iframe + htmlfile组成服务器发送chunked编码数据块每个数据块即一段javascript代码通过javascript渲染页面数据各个浏览器都支持iframe在IE、Firefox下面效果最好不可跨域缺点：
8、 错误处理可控性不强Real-TimeWeb实时信息流推送客户端响应Real-TimeWeb实时信息流推送XMLHttpRequest Streaming XMLHttpRequest以流的形式输出浏览器需要支持的multi-part标志 跨域资源共享(Cross-Origin Resource Sharing)简称CROPS可实现Ajax跨域支持浏览器不多进阶阅读:Servlet 3.0笔记之异步请求Comet推送XMLHttpRequest示范Real-TimeWeb实时信息流推送CROS支持情况 Real-TimeWeb实时信息流推送CometComet is a web applica
9、tion 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 应用架构。基于这种架构开发的应用中，服务器端会主动以异步的方式向客户端程序推送数据，而不需要客户端显式的发出请求。 -百度百科Real-TimeWeb实时信息流推送Comet解读一种编程模型,若干实现技术组合低延迟通信，较长的存活期也称反转A
10、jax(Reverse Ajax)强调从服务器主动推送数据到客户端实现形式：流（streaming）和长轮询（long polling） JSONP Long Polling可跨域CROS可跨域Real-TimeWeb实时信息流推送Comet浏览器支持情况来源地址：Real-TimeWeb实时信息流推送WebsocketHTML5长连接WebSocket 规范的目标是在浏览器中实现和服务器端双向通信.缺点需要现代化浏览器支持Real-TimeWeb实时信息流推送示范代码var socket = new WebSocket(ws:/localhost:8000/websocket/tomcatW
11、ebsocket);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.getElementB
12、yId(responseText);ta.value = ta.value + Web Socket closed;Real-TimeWeb实时信息流推送浏览器支持情况来源：Android =4.0和Opera Mini依然不支持WebSocketReal-TimeWeb实时信息流推送Flash SocketWebSocket的替代品,浏览器不支持可回退客户端JavaScript与Flash交互调用：JS调用Flash Socket接口发送数据Flash Socket与服务器端Socket服务器通信Flash Socket接收到数据调用注册的JS函数JS渲染数据优点：实现TCP/IP即时双向通
13、信，真的很实时缺点：客户端须安装Flash插件非HTTP协议防火墙、代理服务器也可能对非 HTTP 通道端口进行限制Real-TimeWeb实时信息流推送示范代码/ 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.get
14、ElementById(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;Real-Tim
15、eWeb实时信息流推送 注意事项Flash Player 10默认支持默认支持Websocket策略文件policy file,默认843端口像Websocket一样使用: 最新Flash安装地址移动端Flash Lite已经停止开发(Android、Blackberry、Symbian)，专注于PC端但可以继续使用Air 3.x，性能达到原生80%Real-TimeWeb实时信息流推送Server-Sent EventsHTML5 API，专注Server PUSH通知客户端开启一个HTTP连接,以DOM事件形式接收收服务器端发来通知该API目的在于它能够被扩展，使其能和其他push通知机制
16、协作Server-Client单通道事件流(Event Stream)，客户端无法通过此通道交互类似于长轮询机制发送头部Content-Type:text/event-streamReal-TimeWeb实时信息流推送示范代码var source = new EventSource(eventsourceDemo);source.addEventListener(message, function(e) trace(e.data);, false);source.addEventListener(open, function(e) / trace(Connection was opened.)
17、;, 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);Real-TimeWeb实时信息流推
18、送浏览器支持情况HTML5草案阶段Firefox/Chrome/Safari/Opera支持最好不支持EventSource的浏览器，可采用XHR Long PollingeventsourceReal-TimeWeb实时信息流推送抉择！桌面端浏览器较为容易选择 FlashSocket（IE6+，Javascript可包装为Websocket）WebSocket服务器端可单独配置WebSocket服务器移动端WebSocket长轮询(对不适合Websocket的浏览器)Real-TimeWeb实时信息流推送Flash Socket & WebSocketReal-TimeWeb实时信息流推送P
19、ing-Pong客户端/服务器状态连接检查机制心跳机制确定客户端/服务器端数据通信连接超时处理超时重新连接处理连接状态的持久化处理未及时发送数据缓存处理等Real-TimeWeb实时信息流推送Poll VS PushPoll适合小数据量，服务器消耗可无视Push适合快速、较为实时环境短连接频繁，可考虑较为高效的长连接长连接耗费连接资源，在不传输数据时长连接是一把双刃剑，需要慎重使用注意服务器对并发HTTP连接的数量限制等数据量大，服务器端可考虑合并数据推送频繁客户端需要及时清理缓存，避免崩溃某些环境两者结合(Poll大数据Push小数据)比如新浪某个人好友过多，超过1W，此时推送数据量特别巨大
20、，使用Pull较为合适Real-TimeWeb实时信息流推送Java Support规范支持不足，总是落后业界一步Current:NIO(New Unblocked I/O)Servlet 3.0 AsyncJUC(java.util.concurrent).Future:Servlet 3.1 Asynchronous Enhancement & WebsocketJAVA 7 AIO(Asynchronous I/O),也称为NIO2JUC PlusJAVA EE 7 Cloud Focused Upgrades.Real-TimeWeb实时信息流推送Servlet 3.0异步特性：异步请
21、求Servlet异步过滤器Filter可挂起请求，而不是阻塞Tomcat 7 SupportJetty 8 SupportResin 4.0 SupportServlet 3.0是一种进步，但还不够Real-TimeWeb实时信息流推送Servlet Container & CometJetty 6+ Jetty Continuation 高性能Tomcat 6+Advanced I/OGrizzly API内嵌于GlassfishReal-TimeWeb实时信息流推送Servlet Container & WebSocket暂无规范API，各自实现Jetty 7+ 早已支持WebSocket
22、(受众多)Tomcat 7.0.27 开始支持Resin 4.0.2+混乱！Real-TimeWeb实时信息流推送Java Server SupportReal-TimeWeb实时信息流推送开源支持SOCKET.IO 客户端 + 服务器端，完整成熟的解决方案Cometd Bayeux协议DWR 严格意义上不算Realtime Web的代表Atmosphere服务器端异步Websocket/Comet框架，兼容各种现有Comet、Servlet 3.0接口.NIO Framework Backend Support:NettyGrizzlyMinaXWorkweb NIO.Real-TimeWe
23、b实时信息流推送Choose ?n使用者人数选择nsocket.io特别火：(cometd无此数据)完整的解决方案推荐：cometdsocket.ioReal-TimeWeb实时信息流推送socket.io客户端 + 服务器端完整解决方案跨桌面端 + 移动端浏览器平台通信信道集大成者，自动适应最佳协议完善的错误、超时、重连处理机制Publish/Subscribe 模型完整实现协议规范：Real-TimeWeb实时信息流推送其它特性重连后,服务器端缓存支持确保数据不丢失支持一个连接，多个订阅构建于HTTP/Websocket协议之上连接状态丰富disconnected, disconnecti
24、ng, connected and connecting传输通道状态closed, closing, open, and opening支持心跳检测/连接超时heartbeat/close timeout社区活跃，参与者众多Real-TimeWeb实时信息流推送支持传输机制WebSocketAdobe Flash SocketAJAX long pollingAJAX multipart streamingForever IframeJSONP Polling保证所有浏览器自动适应，优先选择最优，跨越浏览器平台的解决方案Real-TimeWeb实时信息流推送支持浏览器DesktopIntern
25、et Explorer 5.5+Safari 3+Google Chrome 4+Firefox 3+Opera 10.61+MobileiPhone SafariiPad SafariAndroid WebKitWebOs WebKitReal-TimeWeb实时信息流推送客户端浏览器自动适配最佳传输机制支持指定传输机制简化WebSocket API,统一各种通信接口天然支持跨域事件驱动架构的典范代码优雅，简单易读API DOC & Client Usage Doc:Real-TimeWeb实时信息流推送客户端示范1 var socket = io.connect(); socket.on(
26、news, function (data) console.log(data); socket.emit(my other event, my: data ); );Real-TimeWeb实时信息流推送客户端示范2支持多namespace(支持订阅多个消息通道Channels) var chat = io.connect() , news = io.connect(); chat.on(connect, function () chat.emit(hi!); ); news.on(news, function () news.emit(woot); );Real-TimeWeb实时信息流推送
27、服务器端默认为node.js实现开源社区提供若干语言实现Java社区的支持ibdknox/socket.io-netty (不兼容最新1.0协议)Ovea/Socket.IO-Java (不兼容最新1.0协议)Gottox/socket.io-java-clientSocket.IO Client Implementation in Javayongboy/socketio-netty (Currently compatible with 0.9+)Real-TimeWeb实时信息流推送socketio-netty基于高性能NIO Framework Netty构建从无到有全新编写兼容最新so
28、cket.io client以及1.0规范协议兼容目前所知WebSocket草案协议项目地址邮件组地址：目前已被几家公司应用于实际产品/项目中Real-TimeWeb实时信息流推送Example Live示范在线演示入口地址：在线聊天示范 在线画板示范Real-TimeWeb实时信息流推送工作机制1.客户端发起一次握手请求(POST)，进行注册：2.服务器进行授权，然后签名，并返回：session id:heartbeat timeout:closing timeout:transportseg:4d4f3dae355se:60:60:websocket,flashsocket,xhr-pol
29、ling,jsonp-polling3.客户端根据返回的传输通道列表检测浏览器是否支持,发起传输通道请求,并携带上SESSION ID:4.双方开始通信心跳检测，发送/接受数据5.连接成功建立Real-TimeWeb实时信息流推送搭建一个Realtime Web平台基于socketio-netty也做一个Realtime Web平台初始化IOHandler接口接口，上传到服务器，初始化应用实例，获得一个API KEY客户端引用JS： 使用API KEY： var socket = yourbase.load(08235-sdxd-d23523s-d23d); socket.on(news, f
30、unction (data) console.log(data); socket.emit(my other event, my: data ); ); 进阶阅读：Real-TimeWeb实时信息流推送实时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 thei
31、r software check a source periodically for updates. -Wikipedia新的名词/概念，对数据推送的重新包装对数据推送的最合适的解读Real-TimeWeb实时信息流推送Publish/Subscribe发布/订阅（Publish/subscribe 或pub/sub）是一种消息范式，消息的发送者（发布者）不是计划发送其消息给特定的接收者（订阅者）。而是发布的消息分为不同的类别，而不需要知道什么样的订阅者订阅。订阅者对一个或多个类别表达兴趣，于是只接收感兴趣的消息，而不需要知道什么样的发布者发布的消息。这种发布者和订阅者的解耦解耦可以允许更好
32、的可扩放性和更为动态的网络拓扑.事件驱动编程模式编程语言(包括JAVA)对应观察者模式Comet/PUSH/Realtime Web，更具体、广义的现实实现客户端订阅特定主题/话题/通道，服务器在数据到达时及时推送给对应订阅者Real-TimeWeb实时信息流推送概念演进路线AJAX异步请求(XHR)轮询(XHR)长轮询(XHR/Script tag /JSONP)流推送(Hidden iFrame/XHR Streaming)Comet/PushHtml5/WebSocket/FlashSocketReal-Time WebReal-TimeWeb实时信息流推送适用范围在线多人游戏实时数据统
33、计Web实时交互聊天/Whiteboard/Story Mall/Feeds Mall页面信息实时推送社交类网站信息流实时协作(eg:Google docs)构建跨桌面/移动浏览器的应用Real-TimeWeb实时信息流推送商业公司的选择TwitterNetty + Scala(基于JVM函数式编程语言)FacebookPhp + HipHop(改写过的PHP虚拟机)FriendFeedPython + TornadoGoogleWaver/Doc/Instant Search .Real-TimeWeb实时信息流推送 Realtime Web Products.Real-TimeWeb实时信
34、息流推送Web-Hooks:PubSubHubbubPubSubHubbub是Google推出的一个基于Web-hook方式的解决方案，重用HTTP协议，在订阅者所订阅的主题发生变化时进行实时通知(通过一可回调公网地址)一般应用于博客/文章订阅，发布者一旦有更新内容，订阅者可以马上得到通知可避免订阅者大量轮询对服务器造成压力订阅者注册之后,等待回调即可,省去轮询Web-Hooks(callback url)是一种服务器端数据推送模式Real-TimeWeb实时信息流推送流程图Real-TimeWeb实时信息流推送WebRTCWebRTC是一个支持网络浏览器进行实时语音对话或视频对话的软件架构可
35、基于Javascript APIs和HTML5API构建W3C草案阶段，初步新,重要,划时代,革新,欢迎！但浏览器支持有限Chrome 20.0和Opera Mobile 12已支持Firefox计划支持开源支持：webrtc4all (已全面支持Windows系统)Real-TimeWeb实时信息流推送WebRTC Live (可能需要翻墙)感兴趣可以体验一下,需安装最新版ChromeReal-TimeWeb实时信息流推送SPDYSPDY是Google开发的基于传输控制协议(TCP)的应用层协议类似于HTTP，但旨在缩短网页的加载时间和提高安全性草案阶段，已开始推动SPDY成为正式标准通过优
36、先级和多路复用，SPDY使得只需要建立一个TCP连接即可传送网页内容及图片等资源对用户透明,感觉不到，除加载速度快了一些socketio-netty支持SPDY不复杂Real-TimeWeb实时信息流推送Support ListTomcat 8已列入计划支持Real-TimeWeb实时信息流推送SPDY Live浏览器请求SSL 握手期间决定是否采用火狐(about:config-spdy)安装 SPDY indicator,检测支持会在地址栏显示绿色闪电图标chrome:/net-internals/#spdy （）】Apache SPDY加载图片演示Real-TimeWeb实时信息流推送走
37、向和预测和云结合，涌现更多租赁式和更具体服务结合，诸如实时统计/搜索/市场营销越来越多网站采用订阅/发布模式强推实时信息流基于Web-Hooks相关协议具有回调callback将大行其道(站点簇,相互依赖)构建于SPDY协议上的更为高效的实时推送WebRTC：如虎添翼，已进入人们视野HTTP 2.0 draftReal-TimeWeb实时信息流推送影响速度的一些因素域名解析速度每次请求域名解析速度，长轮询时明显国内可考虑类似服务数据未压缩数据合并gzip压缩等防火墙、代理服务器可能的端口拦截代理服务器配合和缓存连接持久注意时长问题等Real-TimeWeb实时信息流推送Server编程注意事项
38、Pragma:no-cache (一般不需要缓存)Proxy-Connection:Keep-Alive不是标准,但告诉代理服务器需要保持长连接及时刷新缓冲(out.flush()否则会发生缓冲区满才被发送到客户端高延迟否则会造成送达延迟NIO/AIO + JUCIO Concurrency, 是构建的基础,需要些功底Real-TimeWeb实时信息流推送客户端调试利用浏览器内置的开发者工具IE8(F12), Chrome(F12)检测连接状态调用API接口，利用log输出当前连接状态等客户端日志输出(支持IE)function trace(s) if (console in self & l
39、og in console) console.log(s); else alert(s);别忘记Firefox + Firebug，超强组合注意页面端无用数据及时清理，避免崩溃Real-TimeWeb实时信息流推送一些可能需要了解的Google PubSubHubbub 推送协议WebHooks推送协议队列服务器(Message Queue Server)Cache(适当缓存).Real-TimeWeb实时信息流推送示范代码演示项目地址SVN 检出地址:需要Tomcat 7.0.29支持注意843、9000端口不要被占用Enjoy itReal-TimeWeb实时信息流推送 Real-TimeWeb实时信息流推送谢谢！Real-TimeWeb实时信息流推送
