Upload
doris-chen
View
11.348
Download
4
Tags:
Embed Size (px)
DESCRIPTION
Join the asynchronous web revolution! Because Ajax-based applications are almost becoming the de facto technology for designing web-based applications, it is more and more important that such applications react on the fly, or in real time, to both client and server events. AJAX can be used to allow the browser to request information from the web server, but does not allow a server to push updates to a browser. Comet solves this problem. Comet is a technology that enables web clients and web servers to communicate asynchronously, allowing real-time operations and functions previously unheard of with traditional web applications to approach the capabilities of desktop applications. This session will start to provide an brief introduction to the asynchronous web, AJAX polling, long polling, and Streaming, explaining the Bayeux protocol, Cometd, Grizzly Comet implementation on GlassFish. Different approaches and best practices to develop comet application will also be discussed. You will learn how to develop the chat application, how to implement distance learning slideshow application, how to manage a chat application from the server and how to develop a two-player distributed game application. Attendees will take away the tactics they need in order to add multiuser collaboration, notification and other Comet features to their application, whether they develop with Dojo, jQuery, jMaki, or Prototype and whether they deploy on Jetty, Tomcat, or the GlassFish Application Server.
Citation preview
1
Doris Chen Ph.D.Staff Engineer/Technology Evangelist
Developing Revolutionary Web Applications using Comet and Ajax
2
Agenda• Web 2.0• Introduction to Comet• Asynchronous HTTP and the Server• Develop a Slideshow Chat Application using
Cometd (demo)• Develop a Two Player Game using Comet
(demo)• Future, Summary and Resources
3
Web 2.0A Web by the people, for the people.Documents on the web increasingly generated by users
Out of the Information Age, into the Participation Age Are web user interfaces becoming more powerful?Is the user an HTTP client?
4
The Asynchronous Web RevolutionThe Web enters the Participation Age.• Ajax is still typically synchronous with user
events• Full asynchrony has updates pushed from server
any time> Update pages after they load> Send users notifications
• Allow users to communicate and collaborate within the web application
• Called “Ajax Push”, “Comet”, or “Reverse Ajax”> This is the full realization of Ajax, now fully
asynchronous
5
Applications in the Participation AgeApplication-mediated communication.• Distance learning• Collaborative authoring• Auctions• Shared WebDAV filesystem• Blogging and reader comments• SIP-coordinated mobile applications• Hybrid chat/email/discussion forums• Customer assistance on sales/support pages• Multi-step business process made collaborative• Shared trip planner or restaurant selector with maps• Shared calendar, “to do” list, project plan• Games
6
Agenda• Web 2.0• Introduction to Comet• Asynchronous HTTP and the Server• Develop a Slideshow Chat Application using
Cometd (demo)• Develop a Two Player Game using Comet
(demo)• Future, Summary and Resources
7
Server-mediated Collaboration
Server
Client 1 Client 2, 3, ..n
External Application
• User Initiated• Application Initiated
UserAction
PushPush Push
8
What is Comet (Ajax Push)?Responsive, low-latency interaction for the web• A programming technique that enables web
servers to send data to the client without having any need for the client to request for it
• Allows creation of highly responsive, event-driven web applications > Keep clients up-to-date with data arriving or changing
on the server, without frequent polling• Pros
> Lower latency, not dependent on polling frequency> Server and network do not have to deal with frequent
polling requests to check for updates
9
Ajax Poll vs Ajax PushBending the rules of HTTP.
• Comet Refers to both the Long Polling and Streaming methods of web programming
10
Ajax Poll vs Ajax PushBending the rules of HTTP.• Poll:
> Send a request to the server every X seconds > The response is “empty” if there is no update
• Long Poll: (most popular, demo use)> Send a request to the server, wait for an event to
happen, then send the response> The response is never empty
• Http Streaming: > Send a request, wait for events, stream multi-
part/chunked response, and then wait for the events> The response is continually appended to
11
Comet Examples• GMail and GTalk • Meebo• 4homemedia.com
(using GlassFish project's Comet)• JotLive• KnowNow• Many more …
12
Agenda
• Web 2.0• Introduction to Comet• Asynchronous HTTP and the Server• Develop a Slideshow Chat Application using
Cometd (demo)• Develop a Two Player Game using Comet
(demo)• Summary and Resources
13
How Push worksKeep an open connection.
• Deliver data over a previously opened connection
• Always “keep a connection open”> do not respond to the initiating request until event
occurs• Streaming is an option
> send response in multiple parts without closing the connection in between
14
Server Architecture ChallengeCan Push scale?• Using blocking, synchronous technology will
result in a blocked thread for each open connection that is “waiting”> Every blocked thread will consume memory> This lowers scalability and can affect performance
• To get the Java Virtual Machine (JVM™) to scale to 10,000 threads and up needs specific tuning and is not an efficient way of solving this
• Servlets 2.5 are an example of blocking, synchronous technology
15
Architecture ChallengesThe serious effect of blocking threads
(default thread stack size)
16
Technology SolutionNIO avoids blocked threads.
• Use new I/O (NIO) non-blocking sockets to avoid blocking a thread per connection
• Use technology that supports asynchronous request processing> Release the original request thread while waiting for
an event> May process the event/response on another thread
than the original request• Advantages
> Number of clients is primarily limited by the number of open sockets a platform can support
> Could have all clients (e.g. 10’000) “waiting” without any threads processing or blocked
17
Server-side Ajax Push: Who supports whatThe asynchronicity matrix
XWebLogic
Container Asynchronous IO Suspendible Request/Response
Delivery Guarantee
Jetty XTomcat X XGlassFish X X XResin X
18
HTTP modules• The Grizzly Framework also have an HTTP framework
that can be used to build Web Server> This is what GlassFish™ v1|2|3 build on top of.> More specialized modules are also available like
Comet (Async HTTP).• Simple interface to allow customization of the HTTP
Protocol> GrizzlyRequest: A utility class to manipulate the HTTP
protocol request.> GrizzlyResponse: A utility class to manipulate the
HTTP protocol response.> GrizzlyAdapter: A utility class to manipulate the HTTP
request/response object.
19
Introduction to GlassFish Grizzly Comet• Grizzly Comet is a framework that ship with
GlassFish v1|2|3, and can also be embedded into any application using the Grizzly Embedded interface (no GlassFish involved)
• The Grizzly Comet Framework includes a set of components that can be used for building Comet based application:> Grizzly Comet Framework, Continuation, Grizzlet,
Messages Bus, Bayeux support
20
Grizzly Comet Components
Grizzly Comet FrameworkGrizzly Comet Framework
Grizzly HTTP Grizzly HTTP
Grizzly NIO FrameworkGrizzly NIO Framework
GrizzletGrizzlet BayeuxBayeux Messages BusMessages BusContinuationContinuation
21
Asynchronous Ajax DemoGrizzlet with Project jMaki on GlassFish
22
Agenda• Web 2.0• Introduction to Comet• Asynchronous HTTP and the Server• Develop a Slideshow Chat Application using
Cometd (demo)• Develop a Two Player Game using Comet
(demo)• Future, Summary and Resources
23
What Is Cometd?• HTTP-based event routing bus using
> Bayeux Protocol> Comet as underlying push technologyl
• Consists of a protocol spec called Bayeux, JavaScript technology libraries (DOJO toolkit), and an event router
• The Server uses async techniques to “park” the request without blocked threads
• Comet programming is easy, cometd is even easier> No server-side elements need to be created
24
Grizzly Comet Components
Grizzly Comet FrameworkGrizzly Comet Framework
Grizzly HTTP Grizzly HTTP
Grizzly NIO FrameworkGrizzly NIO Framework
GrizzletGrizzlet BayeuxBayeux Messages BusMessages BusContinuationContinuation
25
What Is the Bayeux Protocol?• Bayeux is a negotiated, multi-transport,
JSON-based protocol for publish/subscribe asynchronous messaging between:> Web browser and server, Server and web browser> Web browser and web browser> http://svn.xantus.org/shortbus/trunk/bayeux/bayeux.html
• Part of the Dojo Cometd project> http://cometdproject.dojotoolkit.org/
• Multiple server implementations> JavaScript programming language, Java™ programming
language, perl, python
26
Bayeux/CometdJSON Publish/Subscribe
• JSON Messages are published on specified channels• Channel operations: connect, subscribe, unsubscribe,
etc.• Multiple transports: polling, long-polling, iframe, flash• Server-side reflector with no server-side application
possible
[ { "channel": "/some/name", "clientId": "83js73jsh29sjd92", "data": { "myapp" : "specific data", value: 100 } }]
27
Software and Configuration
• Glassfish Application Server (V2 or V3 TP2)> Needs to be enabled for Comet
●Configure using GlassFish V2 admin console●Configure in NetBeans + for GlassFish V3●or Command line
– asadmin set server.http-service.http-listener.http-listener-1.property.cometSupport=true
●or Edit domain.xml in GlasFish– <http-listener id="http-listener-1" port="8080"><property
name="CometSupport" value="true" />
• Grizzly Comet APIs• A browser Client, running Javascript, support Ajax
28
GlassFish V3 Comet Enable (in NetBeans)
29
Enable Comet in GlassFish V2 Admin Console
30
Enabling Bayeux in GlassFish• Configure web.xml
web.xml<servlet-mapping> <servlet-name>Grizzly Cometd Servlet</servlet-
name> <url-pattern>/cometd/*</url-pattern></servlet-mapping>
31
Step1 : Initialize
dojo.require("dojox.cometd");
//Initialize a connection to the given Comet server: the GlassFish Grizzly Bayeux servlet
dojox.cometd.init("serverURL");
Comet Server
32
Step 2: Subscribe
Client 1Client 2
dojox.cometd.subscribe(“topic”, "remote topic", "callbackFunction");• Subscribes the client to the
topic channel• Any time a message is sent to
the topic channel the callback will be invoked
Comet Server
33
Step 3: Publish
Comet Server
new slide url
dojox.cometd.publish("topic", {slide: url});
a client publishes the next slide url to the topic channel
JSON message
client 1
34
Step 4: Update Clients: CallBack InvokeComet Server
Client 2 Client 3
callBackFunction(slideUrl){ slide.innerHTML ="<img src='" + slideUrl + "'/>"; ... }
●The callback function is called with the published message when a new message is received●This callback function updates the browser content
● html img tag with the slide url from the published message
Update BrowserUpdate Browser
35
Slideshow Chat Demo
36
Agenda• Web 2.0• Introduction to Comet• Asynchronous HTTP and the Server• Develop a Slideshow Chat Application using
Cometd (demo)• Develop a Two Player Game using Comet
(demo)• Future, Summary and Resources
37
Grizzly Comet Framework• The Framework contains the classes required to
add support for Comet in a Web Application• Main classes to interact with (details next):
> CometEngine> CometContext> CometHandler> NotificationHandler> CometReader> CometWriter
38
Grizzly Comet FrameworkHow it works
CometContextCometContext
Browser 1Browser 1 CometHandlerCometHandlerCometHandlerCometHandlerCometHandlerCometHandler
NotificationHandlerNotificationHandler
ServletServlet
Push data
filters push
send
Browser 2Browser 2
send
DatabaseDatabase ClusterCometHandlerClusterCometHandler
39
Grizzly Comet in Steps• Suspend:
> addCometHandler(CometHandler)• Push:
> notify(<? extends Object>) // All suspended responses
> notify(<? extends Object>, CometHandler) // Only one
• Write: Inside CometHandler.onEvent()> PrintWriter.write(CometEvent.attachment());
• Resume: > resumeCometHandler(CometHandler)
40
CometContext• A CometContext is a distribution mechanism for
pushing messages that are delivered to multiple subscribers called CometHandler (a la JMS Queue/Topic)
• All http response registered to a CometContext automatically becomes suspended, waiting for an event (a push) to happens
• A browser receives only those messages published after the client suspend its response via CometContext
41
Grizzly Comet Framework• CometHandler
> A CometHandler contains the business logic of what will be pushed back to the browser
> A CometHandler might be invoked by the Container:● When a push operation happens● When a I/O operations are ready to be process
(asynchronous read or write)● When the browser close the connection
42
Grizzly Comet Framework (cont.)• NotificationHandler
> An inside object that you will decide to what to do with the push operation:●Throttle: if too many push occurs simultaneously,
should we delay them?●Aggregate: should we cache push operations and
aggregate them to avoid overloading the network?●Filter: should all messages by pushed back to the
client?●Should a thread pool be used to improve the push
operation? Should a JMS backed be used to deliver the message?
> The DefaultNotificationHandler push all messages
43
Four Simple Steps for Comet
• Step 1: Initialize Comet• Step 2: Define your CometHandler• Step 3: Connect to Comet Servlet: Add
CometHandler to CometContext• Step 4: Advertise changes• Step 5: More details on Client
44
Step 1: Initialize CometRegister a CometContext//In TTTComet Servlet class...public void init(ServletConfig config) { ServletContext context = config.getServletContext();
contextPath = context.getContextPath() + "/TTTComet1"; CometEngine engine = CometEngine.getEngine(); CometContext cometContext = engine.register(contextPath); cometContext.setExpirationDelay(120 * 1000);
//All connections registered to a CometContext automatically becomes suspended, waiting for an event (a push) to happen
//A browser receives only those messages after the client “register “ to a CometContext
//CometContex contains references to all suspended connections (encapsulated inside a CometHandler)
45
Step 2: Define a CometHandler• The CometHandler<E> interface has these methods //Invoked when CometContext.notify() is called
public void onEvent(CometEvent ce);
// Invoked when the browser close a suspended
// connection or when the suspend timeout expire
public void onInterrupt(CometEvent ce);
// Invoked when the request is suspended
public void onInitialize(CometEvent ce);
// Attach an object
// most probably the HttpServletResponse
public void attach(E e);
• Long Polling, in onEvent(event),> event.getCometContext().resumeCometHandler(this);
46
CometHandler: TTTHandler
//Inside the TTTComet Servlet class...private class TTTHandler implements CometHandler<HttpServletResponse> { private HttpServletResponse response;//When a push operation happens, onEvent invoked after CometContext.notify() is called public void onEvent(CometEvent event) throws IOException { ... }
47
Step 3: Connect Comet Servlet: Add CometHandler to CometContext The Servlet Get (called by iframe) protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
TTTHandler handler = new TTTHandler(); handler.attach(response); CometEngine engine = CometEngine.getEngine(); CometContext context = engine.getCometContext(contextPath); context.addCometHandler(handler); }//The GET request is now suspended, awaiting further action before a
response is returned//On first load, connects to server with a GET, not POST
(Recommended by Comet)
48
Step 4: Advertise ChangesPost is called (client)<table><tr><td id="cell0"><img id="img0" src="resources/0.gif" onclick=postMe("0")></td>...</table>var url = "TTTComet1";function postMe(arg) {... var xhReq = new createXMLHttpRequest(); xhReq.open("POST", url, true); xhReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhReq.send("cell="+arg);};
49
Step 4: Advertise ChangesPost is called (server)protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String cellStr = request.getParameter("cell");PrintWriter writer = response.getWriter();......game.turn(cell);......CometEngine engine = CometEngine.getEngine();CometContext<?> context = engine.getCometContext(contextPath);context.notify(null); //attachment for CometEvent
50
Step 4: Advertise Changes• POST is called via a click on one client• We get the context again, and call
context.notify() on server• This sends a NOTIFY event to the handler• The handler will now update all listening clients
> Invode onEvent implemented in CometHandler> Sends a script which includes JSON formatted data> Closes all open connections when done
51
CometHandler: TTTHandler (revisit)//Inside the TTTComet Servlet class...private class TTTHandler implements CometHandler<HttpServletResponse> { private HttpServletResponse response;//When a push operation happens, onEvent invoked after CometContext.notify() is called public void onEvent(CometEvent event) throws IOException { if (CometEvent.NOTIFY == event.getType()) { PrintWriter writer = response.getWriter(); writer.write( "<script type='text/javascript'>parent.chImg(" + game.getJSON() + ")</script>\n"); writer.flush(); event.getCometContext().resumeCometHandler(this); } }
52
Step 5: Client Side update (called from Server Side onEvent() in CometHandler)
function chImg(args) {var data = eval(args); // redraw the board for (i = 0; i < 9; i++) { document.getElementById("img"+i).src= "resources/"+data.board[i]+".gif"; }// -1 is unfinished, 0 is tie, 1 is X win, 2 is O win var statusMsg; if (data.win == 0) { statusMsg = "It's a tie!"; } else if (data.win == 1) {.... document.getElementById("gstatus").innerHTML = statusMsg;
53
Sample JSON output
{ “win”: “-1”, “board”: [“0”, “1”, “10”,
“0”, “1”, “10”, “1”, “10, “0” ],
“turn”: “10” }
54
Two Player Game: Tic Tac Toe Demo
55
Agenda• Web 2.0• Introduction to Comet• Asynchronous HTTP and the Server• Develop a Slideshow Chat Application using
Cometd (demo)• Develop a Two Player Game using Comet
(demo)• Future, Summary and Resources
56
What is Atmosphere• Atmosphere is a POJO based framework using
Inversion of Control (IoC) to bring Comet to the masses.
• A Framework which can run on any Java based Web Server.> Automatically detects native Comet API and use it.> Fallback to one thread per connection in case no
native Comet support (ex: Tomcat 4)• Run on top of Servlet 2.5 compliant Web Server• Support Servlet 3.0 Async API
> Auto-Detect Servlet 3.0 API• Easily embeddable into other framework
> Ex: Jersey, Grails, Scala, Struts, Cometd, etc.
Comet techniques aren't standardised among Web Container
57
Architecture
Servlet 3.0 Grizzly Jetty Blocking WS
Comet Portable Runtime
Jersey
Atmosphere CPR
Atmosphere plug in
Application API Atmosphere Module
Atmosphere Core
External Module
JBoss WLS
Reuse experience and code...from Grizzly Comet to Jersey!
58
Getting started with Atmosphere CPR• Three API to know
> AtmosphereHandler: Your POJO representing your application. Quite simple:●When a request comes in:
onEvent(AtmosphereEvent)●When a broadcast happens:
onMesage(AtmosphereEvent)> Broadcaster: Share Data between suspended
connection.> BroadcasterFilter: Manipulate broadcasted data before
they get written
58
59
Example: AtmosphereHandler onEvent()public AtmosphereEvent onEvent( AtmosphereEvent<HttpServletRequest, HttpServletResponse> event) throws IOException {
HttpServletRequest req = event.getRequest(); HttpServletResponse res = event.getResponse(); ... if (req.getMethod().equalsIgnoreCase("GET")) { ... res.getWriter().flush(); event.suspend(); } if (req.getMethod().equalsIgnoreCase("POST")) { synchronized (game) {... Broadcaster bc = event.getBroadcaster(); String response = game.getJSON(); // broadcast the updated game state bc.broadcast(response); writer.flush(); if (game.win() != -1) { game = new TTTGame(); } } } return event; }
60
Example: AtmosphereHandler onMessage() public AtmosphereEvent onMessage( AtmosphereEvent<HttpServletRequest, HttpServletResponse> event) throws IOException { // Client closed the connection. if (event.isCancelled()) { return event; }
String response = (String) event.getMessage(); response = "<script type='text/javascript'>parent.chImg(" + response + ")</script>\n"; PrintWriter writer = event.getResponse().getWriter(); writer.write(response); writer.flush();
if (!event.isResumedOnTimeout()) { event.resume(); } return event; }
61
Getting started with Atmosphere Core• All the power of REST and Jersey functionality,
plus> @Suspend : suspend a response> @Resume: resume a response> @Broadcast: Broadcast events> @Cluster: Cluster your Broadcast> @BroadcasterFilter
• Subset of Atmosphere CPR available via injection> AtmosphereEvent> Broadcaster
61
62
Example: Writing a REST application @Suspend // the returned String will be written and then response suspended @GET @Produces("text/html") public String cometGet() { return "<!-- Comet is a programming technique that enables web "+... -->\n"; } @Broadcast // The returned String will be broadcasted to all suspended response. @Consumes("application/x-www-form-urlencoded") @POST @Produces("text/html") public String cometPost( @FormParam("action") String action, @FormParam("name") String name, MultivaluedMap form) {
if ("login".equals(action)) { return BEGIN_SCRIPT_TAG + toJsonp("System Message", name + " has joined.") + END_SCRIPT_TAG; } else if ("post".equals(action)) { return BEGIN_SCRIPT_TAG + toJsonp(name, form.getFirst("message")) + END_SCRIPT_TAG; } else { throw new WebApplicationException(422); } }
63
Atmosphere Plugs In: What is that?• Set of classes and annotation that bring new
functionality> Clustering Atmosphere
●Using @terracotta, @Shoal, @JGroup> Container specific functionality
●Tomcat and Grizzly supports asynchronous I/O> Any community provided annotation/classes
63
64
SummaryThe Asynchronous Web Revolution is Now
• The Asynchronous Web will revolutionize human interaction
• Push can scale with Asynchronous Request Processing
• Writing Games is not that complicated• With GlassFish project and Project Grizzly, the
revolution begins with your application today!• Get ready for Atmosphere and Servlet 3.0
65
For More Information• Getting Started with GlassFish and Comet
> http://weblogs.java.net/blog/jfarcand/archive/2008/04/the_hitchhikers.html
> http://weblogs.java.net/blog/jfarcand/archive/2006/10/writting_a_come.html> https://atmosphere.dev.java.net/
● [email protected] or [email protected])
• Grizzly Active’s Bloggers:> Alexey: http://blogs.sun.com/oleksiys/ > Shing Wai: http://blogs.sun.com/swchan/ > John: http://weblogs.java.net/blog/johnmann/ > Sebastien: http://www2.sebastiendionne.ca > Jeanfrancois: http://weblogs.java.net/jfarcand
• Project Grizzly> http://grizzly.dev.java.net
66
Doris Chen [email protected] Engineer/Technology Evangelist