SlideShare a Scribd company logo
How to push data to a browser?
chenchao01@baidu.com
Polling Vs
Push
HTTP functions as a request-response protocol
How to push?
• Comet
– Long Polling/HTTP Streaming/Ajax Push/Reverse
Ajax, Two-way-web/HTTP serverpush
• Flash XMLSocket
• Java/Silverlight socket
• HTML5 Server-Sent Events
• HTML5 WebSockets
Two kinds of Comet
• Streming
• Long Polling
Comet - Streaming
Comet - Long Polling
Design & Architecture
Comet is a
pub/sub System
rely on http & web
产品功能上分
• User-centric
– Event based
– Web chat/notification/gmail
• Data-centric
– Data synchronization
Architecture model
• Symmetric pub/sub
– User-centric
• Asymmetric pub/sub
– Data-centric
Symmetric pub/sub
eg: Tornado + RabbitMQ 快速实现一个很好可扩展的 webchat
Asymmetric pub/sub
Data Feed ~= Adapter
Eg: Facebook’s webchat
Facebook’s webchat
The two Models
• 互相模拟对方的行为
• Mix the two model
How to Implement a Comet
Server?
Next
Lots of Connections
• How many connections to handle?
– 同时在线用户数
• C10k(http://www.kegel.com/c10k.html)
• Asynchronous IO
Communication
• Browser & server
– http
– JavaScript
key ingredients
• Asynchronous IO
• Message Dispatch
• HTTP
• Javascript
开源
• Tornado
• Twisted
• Jeety
• nginx_http_push_module
• Bayeaux 协议 ( 该协议对应有服务器端以及
js 的实现 )
• …
Scale
空间 comet system overview
backends
• Lighttpd
– Mod_pack(hold 链接,处理 long polling)
– Mod_proxy_backend_pack( 与 control-center 交互, macpack)
• Control-center
– 类似于 ui ,接受 lighty 的请求向 register 注册,接受 message_pool
的请求,向 lighty 推送
• Register
– 单点,维护 uid 和 ip 的映射关系
• Message_pool
– 接受来自 transfer 的数据,存储数据库,然后推向 control-
center )
Message send
Q&A

More Related Content

What's hot

Expand contract pattern - Continuous Delivery and Databases
Expand contract pattern -  Continuous Delivery and DatabasesExpand contract pattern -  Continuous Delivery and Databases
Expand contract pattern - Continuous Delivery and Databases
Leena N
 
SignalR
SignalRSignalR
SignalR
Troy Miles
 
Rails 4 & server sent events
Rails 4 & server sent eventsRails 4 & server sent events
Rails 4 & server sent events
Piotr Karbownik
 
Building Reactive webapp with React/Flux
Building Reactive webapp with React/FluxBuilding Reactive webapp with React/Flux
Building Reactive webapp with React/Flux
Keuller Magalhães
 
Best Features of Azure Service Bus
Best Features of Azure Service BusBest Features of Azure Service Bus
Best Features of Azure Service Bus
Daniel Toomey
 
Javascript Myths and its Evolution
Javascript Myths and its  EvolutionJavascript Myths and its  Evolution
Javascript Myths and its EvolutionDeepu S Nath
 
Building solutions with the SharePoint Framework - deep-dive
Building solutions with the SharePoint Framework - deep-diveBuilding solutions with the SharePoint Framework - deep-dive
Building solutions with the SharePoint Framework - deep-dive
Waldek Mastykarz
 
Azure Service Bus
Azure Service BusAzure Service Bus
Azure Service Bus
Josh Lane
 
Building and Scaling a WebSockets Pubsub System
Building and Scaling a WebSockets Pubsub SystemBuilding and Scaling a WebSockets Pubsub System
Building and Scaling a WebSockets Pubsub System
Kapil Reddy
 
Modifying and Extending the ESB Toolkit
Modifying and Extending the ESB ToolkitModifying and Extending the ESB Toolkit
Modifying and Extending the ESB Toolkit
BizTalk360
 
WSO2Con Asia 2014 - Essential Elements of an Enterprise PaaS
WSO2Con Asia 2014 - Essential Elements of an Enterprise PaaSWSO2Con Asia 2014 - Essential Elements of an Enterprise PaaS
WSO2Con Asia 2014 - Essential Elements of an Enterprise PaaSWSO2
 
Discover the Capabilities of Windows Azure Service Bus to Power Agile Busines...
Discover the Capabilities of Windows Azure Service Bus to Power Agile Busines...Discover the Capabilities of Windows Azure Service Bus to Power Agile Busines...
Discover the Capabilities of Windows Azure Service Bus to Power Agile Busines...
Sergio Compean
 
Event Driven Architectures with Apache Kafka
Event Driven Architectures with Apache KafkaEvent Driven Architectures with Apache Kafka
Event Driven Architectures with Apache Kafka
Matt Masuda
 
Expand Contract Pattern for Continuous Delivery of Databases by Leena S N at ...
Expand Contract Pattern for Continuous Delivery of Databases by Leena S N at ...Expand Contract Pattern for Continuous Delivery of Databases by Leena S N at ...
Expand Contract Pattern for Continuous Delivery of Databases by Leena S N at ...
Agile Software Community of India
 
When the connection fails
When the connection failsWhen the connection fails
When the connection fails
Barbara Fusinska
 
Building Real Time Web Applications with SignalR (NoVA Code Camp 2015)
Building Real Time Web Applications with SignalR (NoVA Code Camp 2015)Building Real Time Web Applications with SignalR (NoVA Code Camp 2015)
Building Real Time Web Applications with SignalR (NoVA Code Camp 2015)
Kevin Griffin
 
SignalR Overview
SignalR OverviewSignalR Overview
SignalR Overview
Michael Sukachev
 
Project Frankenstein: A multitenant, horizontally scalable Prometheus as a se...
Project Frankenstein: A multitenant, horizontally scalable Prometheus as a se...Project Frankenstein: A multitenant, horizontally scalable Prometheus as a se...
Project Frankenstein: A multitenant, horizontally scalable Prometheus as a se...
Weaveworks
 
Flux architecture
Flux architectureFlux architecture
To Kill a Monolith: Slaying the Demons of a Monolith with Node.js Microservic...
To Kill a Monolith: Slaying the Demons of a Monolith with Node.js Microservic...To Kill a Monolith: Slaying the Demons of a Monolith with Node.js Microservic...
To Kill a Monolith: Slaying the Demons of a Monolith with Node.js Microservic...
Tony Erwin
 

What's hot (20)

Expand contract pattern - Continuous Delivery and Databases
Expand contract pattern -  Continuous Delivery and DatabasesExpand contract pattern -  Continuous Delivery and Databases
Expand contract pattern - Continuous Delivery and Databases
 
SignalR
SignalRSignalR
SignalR
 
Rails 4 & server sent events
Rails 4 & server sent eventsRails 4 & server sent events
Rails 4 & server sent events
 
Building Reactive webapp with React/Flux
Building Reactive webapp with React/FluxBuilding Reactive webapp with React/Flux
Building Reactive webapp with React/Flux
 
Best Features of Azure Service Bus
Best Features of Azure Service BusBest Features of Azure Service Bus
Best Features of Azure Service Bus
 
Javascript Myths and its Evolution
Javascript Myths and its  EvolutionJavascript Myths and its  Evolution
Javascript Myths and its Evolution
 
Building solutions with the SharePoint Framework - deep-dive
Building solutions with the SharePoint Framework - deep-diveBuilding solutions with the SharePoint Framework - deep-dive
Building solutions with the SharePoint Framework - deep-dive
 
Azure Service Bus
Azure Service BusAzure Service Bus
Azure Service Bus
 
Building and Scaling a WebSockets Pubsub System
Building and Scaling a WebSockets Pubsub SystemBuilding and Scaling a WebSockets Pubsub System
Building and Scaling a WebSockets Pubsub System
 
Modifying and Extending the ESB Toolkit
Modifying and Extending the ESB ToolkitModifying and Extending the ESB Toolkit
Modifying and Extending the ESB Toolkit
 
WSO2Con Asia 2014 - Essential Elements of an Enterprise PaaS
WSO2Con Asia 2014 - Essential Elements of an Enterprise PaaSWSO2Con Asia 2014 - Essential Elements of an Enterprise PaaS
WSO2Con Asia 2014 - Essential Elements of an Enterprise PaaS
 
Discover the Capabilities of Windows Azure Service Bus to Power Agile Busines...
Discover the Capabilities of Windows Azure Service Bus to Power Agile Busines...Discover the Capabilities of Windows Azure Service Bus to Power Agile Busines...
Discover the Capabilities of Windows Azure Service Bus to Power Agile Busines...
 
Event Driven Architectures with Apache Kafka
Event Driven Architectures with Apache KafkaEvent Driven Architectures with Apache Kafka
Event Driven Architectures with Apache Kafka
 
Expand Contract Pattern for Continuous Delivery of Databases by Leena S N at ...
Expand Contract Pattern for Continuous Delivery of Databases by Leena S N at ...Expand Contract Pattern for Continuous Delivery of Databases by Leena S N at ...
Expand Contract Pattern for Continuous Delivery of Databases by Leena S N at ...
 
When the connection fails
When the connection failsWhen the connection fails
When the connection fails
 
Building Real Time Web Applications with SignalR (NoVA Code Camp 2015)
Building Real Time Web Applications with SignalR (NoVA Code Camp 2015)Building Real Time Web Applications with SignalR (NoVA Code Camp 2015)
Building Real Time Web Applications with SignalR (NoVA Code Camp 2015)
 
SignalR Overview
SignalR OverviewSignalR Overview
SignalR Overview
 
Project Frankenstein: A multitenant, horizontally scalable Prometheus as a se...
Project Frankenstein: A multitenant, horizontally scalable Prometheus as a se...Project Frankenstein: A multitenant, horizontally scalable Prometheus as a se...
Project Frankenstein: A multitenant, horizontally scalable Prometheus as a se...
 
Flux architecture
Flux architectureFlux architecture
Flux architecture
 
To Kill a Monolith: Slaying the Demons of a Monolith with Node.js Microservic...
To Kill a Monolith: Slaying the Demons of a Monolith with Node.js Microservic...To Kill a Monolith: Slaying the Demons of a Monolith with Node.js Microservic...
To Kill a Monolith: Slaying the Demons of a Monolith with Node.js Microservic...
 

Similar to How to push data to a browser

Taking a Quantum Leap with Html 5 WebSocket
Taking a Quantum Leap with Html 5 WebSocketTaking a Quantum Leap with Html 5 WebSocket
Taking a Quantum Leap with Html 5 WebSocket
Shahriar Hyder
 
Real time web apps
Real time web appsReal time web apps
Real time web apps
Sepehr Rasouli
 
Comet: by pushing server data, we push the web forward
Comet: by pushing server data, we push the web forwardComet: by pushing server data, we push the web forward
Comet: by pushing server data, we push the web forward
NOLOH LLC.
 
Messaging for Real-time WebApps
Messaging for Real-time WebAppsMessaging for Real-time WebApps
Messaging for Real-time WebApps
Tiju John
 
Decoding real time web communication
Decoding real time web communicationDecoding real time web communication
Decoding real time web communication
AMiT JAiN
 
Building Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using WebsocketsBuilding Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using Websockets
Naresh Chintalcheru
 
Real-time Communications with SignalR
Real-time Communications with SignalRReal-time Communications with SignalR
Real-time Communications with SignalR
Shravan Kumar Kasagoni
 
Consuming ASP.net API With Websockets — Maayan Glikser
Consuming ASP.net API With Websockets — Maayan GlikserConsuming ASP.net API With Websockets — Maayan Glikser
Consuming ASP.net API With Websockets — Maayan Glikser
500Tech
 
WebSockets wiith Scala and Play! Framework
WebSockets wiith Scala and Play! FrameworkWebSockets wiith Scala and Play! Framework
WebSockets wiith Scala and Play! Framework
Fabio Tiriticco
 
Comet / WebSocket Web Applications
Comet / WebSocket Web ApplicationsComet / WebSocket Web Applications
Comet / WebSocket Web Applications
Codemotion
 
Dynamic Content Acceleration: Amazon CloudFront and Amazon Route 53 (ARC309) ...
Dynamic Content Acceleration: Amazon CloudFront and Amazon Route 53 (ARC309) ...Dynamic Content Acceleration: Amazon CloudFront and Amazon Route 53 (ARC309) ...
Dynamic Content Acceleration: Amazon CloudFront and Amazon Route 53 (ARC309) ...
Amazon Web Services
 
Reverse ajax in 2014
Reverse ajax in 2014Reverse ajax in 2014
Reverse ajax in 2014
Nenad Pecanac
 
Websockets at tossug
Websockets at tossugWebsockets at tossug
Websockets at tossugclkao
 
Dynamic Content Acceleration: Lightning Fast Web Apps with Amazon CloudFront ...
Dynamic Content Acceleration: Lightning Fast Web Apps with Amazon CloudFront ...Dynamic Content Acceleration: Lightning Fast Web Apps with Amazon CloudFront ...
Dynamic Content Acceleration: Lightning Fast Web Apps with Amazon CloudFront ...
Amazon Web Services
 
wa-cometjava-pdf
wa-cometjava-pdfwa-cometjava-pdf
wa-cometjava-pdfHiroshi Ono
 
Speed = $$$
Speed = $$$Speed = $$$
Speed = $$$
Peter Gfader
 
(WEB301) Operational Web Log Analysis | AWS re:Invent 2014
(WEB301) Operational Web Log Analysis | AWS re:Invent 2014(WEB301) Operational Web Log Analysis | AWS re:Invent 2014
(WEB301) Operational Web Log Analysis | AWS re:Invent 2014
Amazon Web Services
 
Codecamp Iasi-26 nov 2011 - Html 5 WebSockets
Codecamp Iasi-26 nov 2011 - Html 5 WebSocketsCodecamp Iasi-26 nov 2011 - Html 5 WebSockets
Codecamp Iasi-26 nov 2011 - Html 5 WebSockets
Florin Cardasim
 

Similar to How to push data to a browser (20)

Taking a Quantum Leap with Html 5 WebSocket
Taking a Quantum Leap with Html 5 WebSocketTaking a Quantum Leap with Html 5 WebSocket
Taking a Quantum Leap with Html 5 WebSocket
 
Real time web apps
Real time web appsReal time web apps
Real time web apps
 
Comet: by pushing server data, we push the web forward
Comet: by pushing server data, we push the web forwardComet: by pushing server data, we push the web forward
Comet: by pushing server data, we push the web forward
 
Messaging for Real-time WebApps
Messaging for Real-time WebAppsMessaging for Real-time WebApps
Messaging for Real-time WebApps
 
Decoding real time web communication
Decoding real time web communicationDecoding real time web communication
Decoding real time web communication
 
Building Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using WebsocketsBuilding Next Generation Real-Time Web Applications using Websockets
Building Next Generation Real-Time Web Applications using Websockets
 
Real-time Communications with SignalR
Real-time Communications with SignalRReal-time Communications with SignalR
Real-time Communications with SignalR
 
Consuming ASP.net API With Websockets — Maayan Glikser
Consuming ASP.net API With Websockets — Maayan GlikserConsuming ASP.net API With Websockets — Maayan Glikser
Consuming ASP.net API With Websockets — Maayan Glikser
 
WebSockets wiith Scala and Play! Framework
WebSockets wiith Scala and Play! FrameworkWebSockets wiith Scala and Play! Framework
WebSockets wiith Scala and Play! Framework
 
Comet / WebSocket Web Applications
Comet / WebSocket Web ApplicationsComet / WebSocket Web Applications
Comet / WebSocket Web Applications
 
Dynamic Content Acceleration: Amazon CloudFront and Amazon Route 53 (ARC309) ...
Dynamic Content Acceleration: Amazon CloudFront and Amazon Route 53 (ARC309) ...Dynamic Content Acceleration: Amazon CloudFront and Amazon Route 53 (ARC309) ...
Dynamic Content Acceleration: Amazon CloudFront and Amazon Route 53 (ARC309) ...
 
06 web api
06 web api06 web api
06 web api
 
Reverse ajax in 2014
Reverse ajax in 2014Reverse ajax in 2014
Reverse ajax in 2014
 
Websockets at tossug
Websockets at tossugWebsockets at tossug
Websockets at tossug
 
Dynamic Content Acceleration: Lightning Fast Web Apps with Amazon CloudFront ...
Dynamic Content Acceleration: Lightning Fast Web Apps with Amazon CloudFront ...Dynamic Content Acceleration: Lightning Fast Web Apps with Amazon CloudFront ...
Dynamic Content Acceleration: Lightning Fast Web Apps with Amazon CloudFront ...
 
wa-cometjava-pdf
wa-cometjava-pdfwa-cometjava-pdf
wa-cometjava-pdf
 
Speed = $$$
Speed = $$$Speed = $$$
Speed = $$$
 
(WEB301) Operational Web Log Analysis | AWS re:Invent 2014
(WEB301) Operational Web Log Analysis | AWS re:Invent 2014(WEB301) Operational Web Log Analysis | AWS re:Invent 2014
(WEB301) Operational Web Log Analysis | AWS re:Invent 2014
 
Codecamp Iasi-26 nov 2011 - Html 5 WebSockets
Codecamp Iasi-26 nov 2011 - Html 5 WebSocketsCodecamp Iasi-26 nov 2011 - Html 5 WebSockets
Codecamp Iasi-26 nov 2011 - Html 5 WebSockets
 
Intro to WebSockets
Intro to WebSocketsIntro to WebSockets
Intro to WebSockets
 

How to push data to a browser

Editor's Notes

  1. Html5 浏览器是否支持html5标准,server-sent event实际上就是comet在html5中的标准化,增加了text/event-stream类型。 Websocket实际上是双向通信的,在tcp协议之上。 flash,java,sliverlight需要插件 flash,java,sliverlight,websockets都是建立新的tcp链接 Comet实际上是老技术的一个新名字而已 Comet的一些资料 http://code.google.com/p/google-web-toolkit-incubator/wiki/ServerPushFAQ
  2. 在出现异常时connection close。 当服务器端正在发送时,客户端重连 ,可能会出现丢消息(引入ack机制的话,成倍的增加了开发设计成本) 浏览器会出现正在加载(貌似ie6已经解决,google提出的一种方法)
  3. 在空间的comet系统中,默认60s。
  4. User-centric就是目前sns,gmail,web chat这样的应用。交互性较强。 Data-centric主要是数据同步,比如说在页面上某一块显示了股票数据,会实时更新
  5. 实际上这里symmetric/asymmetric并不和user-centric/data-centric这么严格对应,只是由功能到架构的一个直接推导。 下面几页分别介绍基于这两种模型来开发webchat
  6. Symmetric pub/sub,主要是数据提供,和数据推送都经过comet server(不见得就是一个模块) 这种结构相对简单,尤其是对应在起步阶段,开发容易。 最简单的模式是,comet logic和业务逻辑放到一个模块,部署到一台机器。这样的开发成本非常低。 但是扩展性是个问题,如何扩展在后面介绍。
  7. 数据提供方在comet server系统之外。很多实用data feed前面可能还会有adapter,或者datafeed 本身就是adapter 有些时候data feed是一个adapter Facebook’s webchat实际上是融合asymmetric和symmetric Facebook’s webchat诞生于 一次backathon(Jan 07),Erlang开发,一台服务器 重构: 4 engineers,0.5designer, (07年mid-fall,首先是基础设置的开发和改进,08年2月提测,08.4.6接更新,08.4.23全流量)
  8. 09年四月 2亿活跃用户,8亿+messages/day, 7million active chaanels at peak,100+channel machines, 通过thrift来交互。 Web tier(php) Chatlogger(c++):存储对话 Presence(c++):聚合在线信息在内存中 Channel clusters(erlang):消息分发.one channel per user,long poll,mochiweb 猜测Channel clusters的实现应该是类似于一个mq
  9. Asymmetric和symmtric这两种模型其实都可以互相模拟对方,并且在实际使用中也会是混合在一起使用。 这两种模型是对架构模型的一个拆分归类。
  10. 每个时刻都会有很多 idle connection。需要有一个异步机制维护这么多的并发的connection。
  11. 开发一个comet server实际上主要需要考虑的就是这四点。 Message Dispatch实际是对应于前面架构模型提到的两种模型。同时这一块也是comet系统跟原有系统结合的关键点。另外,整个comet系统的可扩展性很大程度上也依赖于这一块。
  12. Bayeaux:http://svn.cometd.com/trunk/bayeux/bayeux.html#toc_0 Bayeaux是一个comet的协议,目前还不是rfc文档。类似于xmpp,是一个开放协议。 所有符合bayeaux协议的client和server都可以相互交互,数据使用json格式。 Bayeaux基于client publishing和subscribing to channels。 Bayeaux的comet server是没有任何逻辑的。 一个开源的服务器端cometd(http://cometd.com)
  13. Pub/sub cloud 可以就是一个mq(rabbitmq)。
  14. Lighttpd对应于comet logic control-center + register + message_pool构成了一个pub/sub + message dispatch,业务逻辑也糅合在了这里面。