15
Ajax and Comet: Implementing the Real- Time Web Alessandro Alinone Great Indian Developer Summit May 2008

Ajax and Comet: Implementing the Real-Time Web

Embed Size (px)

DESCRIPTION

May 2008 - Alessandro Alinone's talk at Great Indian Developer Summit Video of the talk: http://www.youtube.com/watch?v=FsdWIN3YP7I Ajax has proven a successful means to revamp the Web and facilitate the migration of many applications from "thick" clients to browser-based and zero-install clients. But several applications require real-time data to be effective (for example: financial market data visualization; online auctions; online gaming; messaging systems and social networks). The Comet paradigm, as an extension to the "traditional" Ajax techniques, allows any web page to receive real-time data pushed by a specialized server. This talk will introduce Comet from both a technical and historical perspectives. Several examples will be shown and a simple application, based on the Lightstreamer Comet framework, will be developed from scratch.

Citation preview

Page 1: Ajax and Comet: Implementing the Real-Time Web

Ajax and Comet:Implementing the Real-Time Web

Alessandro Alinone

Great Indian Developer Summit

May 2008

Page 2: Ajax and Comet: Implementing the Real-Time Web

Contents

• Push Technology: some history

• Web paradigms: from Ajax to Comet

• Comet applications and examples

• Hands-on code lab

• Lightstreamer architecture

Page 3: Ajax and Comet: Implementing the Real-Time Web

Push Technology

1996

2000

2005

2006

2008

Webcasting, narrowcasting

Ajax

Comet

PointCast and 30+ more

Caplin and custom solutions

LightstreamerPushletsKnowNow

Applet-based push

Applet-free push

Gmail, Meebo, Renkoo, etc.Cometd and other open sourceUpdated Caplin and others

Some milestones

Technologies Key Players

Real-Time Web

Page 4: Ajax and Comet: Implementing the Real-Time Web

Sync & Async Modes

wait...

actions by A through time(requests)

wait...

R1

R2

actions by S through time(responses)

Asynchronous modeof a server (S)

with respect to an actor (A)

R1

R2

Synchronous modeof a server (S)

with respect to an actor (A)

actions by A through time(requests)

actions by S through time(responses)

Page 5: Ajax and Comet: Implementing the Real-Time Web

Page Refresh

wait...

wait...

wait...

refresh 1

browser server

wait...

refresh 2

user

wait...

refresh 3

wait...

Typical issues:✔ Low update frequency;

no real time✔ High bandwidth usage✔ High load on Web server

Page 6: Ajax and Comet: Implementing the Real-Time Web

Ajax Polling

wait...

wait...action 1

browser server

action 2

user

wait...

Typical issues:✔ Low update frequency;

no real time✔ High bandwidth usage (but

potentially lower than model 1)

✔ High load on Web server

Advantages:✔ User interface never

blocked

Page 7: Ajax and Comet: Implementing the Real-Time Web

Comet Long Polling

wait...

wait...action 1

browser server

action 2

user

wait...

Typical issues:✔ Medium update frequency;

near real time✔ Medium bandwidth usage

(HTTP headers present in each round-trip cycle)

✔ High load on Web server

Advantages:✔ User interface never

blocked✔ Zero latency on low-

frequency events

Page 8: Ajax and Comet: Implementing the Real-Time Web

Comet Streaming

action 1

browser server

action 2

user

Typical issues:✔ Blocked by some anti-

virus software mounted on proxy servers

Advantages:✔ High update frequency;

true real time✔ Low bandwidth usage

(very little overhead)✔ Low load on the network

infrastructure

Page 9: Ajax and Comet: Implementing the Real-Time Web

Real-Time Web Paradigms

Application Paradigm Method of sending data with respect to the user’s actions

Method of sending data with respect to

the browser’s actions

Traditional Web Application Page Refresh

Synchronous Synchronous

Classic Ajax Application Periodic Polling

Asynchronous Synchronous

Comet Application (a) Long Polling - aka: Smart Polling Asynchronous Polling Ajax Push Reverse Ajax

Asynchronous Partially

Asynchronous

Comet application (b) Comet Streaming - aka: Comet - Forever Frame Streaming Ajax

Asynchronous Asynchronous

Page 10: Ajax and Comet: Implementing the Real-Time Web

Comet Applications

• Where to use Comet– Finance: market data distribution (quotes, news,

orders, portfolios)– Gaming and Betting– Auctions– Monitor Consoles– Sports Results– Social Networks (chat, messaging, presence)– Transportation (timetables, traffic, etc.)– Opinion Polls– … and many more!

Page 11: Ajax and Comet: Implementing the Real-Time Web

Comet Examples

• Demos:– www.lightstreamer.com/demo

• Real-world applications:– www.hedgestreet.com– www.igmarkets.com.sg – www.extrabet.com– www.yoonew.com

Page 12: Ajax and Comet: Implementing the Real-Time Web

Hands-on Code Lab

• Let’s develop a Comet application using Lightstreamer: “Hello India” chat– Spec: Push users’ messages messages to a

page displayed in any browsers– Server-side code: will use Java– Client-side code: will use JavaScript

[20-minute Lab…]

Page 13: Ajax and Comet: Implementing the Real-Time Web

The Architecture• Lightstreamer (www.lightstreamer.com) is a

comprehensive Comet framework made up of:• A Comet Server• Server-side SDKs for: Java, .NET, plain sockets• Client-side SDKs for: JavaScript (AJAX), ActionScript (Flex),

Java SE, Java ME (midlets), .NET, plain HTTP clients

Page 14: Ajax and Comet: Implementing the Real-Time Web

Advanced Features• Data Filterability

– The nature of some data enables filterability.– Lightstreamer’s data filtering always ensures consistency and

completeness.– Different subscription modes are available, based on the data nature

(Merge, Distinct, Raw, Command --> metapush).• Bandwidth Control

– A maximum bandwidth can be allocated for each user. Data is dispatched based on the configured bandwidth.

– Bandwidth control is available in both streaming mode and smart-polling mode.

• Frequency Control– Each single subscription can request a maximum update frequency.– Frequency control is available in both streaming mode and smart-polling

mode.

Page 15: Ajax and Comet: Implementing the Real-Time Web

Advanced Features (cont’ed)

• Multi-Stage Filtering– A Pre-Filter is available to preliminarily sample the data on a

global basis.• Adaptive Streaming

– Lightstreamer automatically detects Internet congestions and heuristically throttles the data flow based on the available bandwidth.

– When the network channel is fully available again, the user will not receive a burst of old updates but will start seeing fresh data at once (i.e. data aging is avoided).

– Data is aggregated efficiently within TCP packets, with a direct control over the number of sent packets (a trade-off between latency and overhead reduction can be configured).

– Adaptive streaming is particularly useful for streaming sessions held over mobile networks or any unreliable networks.