Reverse Ajax

6,755 views

Published on

Conference I gave at Montreal JUG (http://www.montreal-jug.org/) Thursday March 17th 2011 on Reverse-Ajax techniques and libraries.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,755
On SlideShare
0
From Embeds
0
Number of Embeds
1,840
Actions
Shares
0
Downloads
85
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Reverse Ajax

  1. 1. Reverse-Ajax Par Mathieu Carbou, le 17 avril 2011 Samples à https://github.com/Ovea/conf-reverse-ajaxSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  2. 2. Reverse Ajax refers to an Ajax design pattern that uses long-lived HTTP connections to enable low-latency communication between a web server and a browser. Basically it is a way of sending data from client to server and a mechanism for pushing server data back to the browser.Site: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  3. 3. Event-Driven Web ApplicationsSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  4. 4. Reverse-Ajax techniques 1. Polling 2. Piggyback 3. Comet 4. WebSocketsSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  5. 5. 1. Polling I.e. Check for messages each 4 secondsSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  6. 6. 1. Polling DEMOSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  7. 7. 2. Piggyback Check for messages when an action is performed.Site: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  8. 8. 2. Piggyback DEMOSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  9. 9. 3. Comet A long-held HTTP request allows a web server to push data to a browser, without the browser explicitly requesting it.Site: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  10. 10. 3. Comet techniques 1.Long polling ● XMLHttpRequest ● Script tag 2.Stream based ● Forever Iframe ● XMLHttpRequest MultipartSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  11. 11. 3. Comet DEMO XMLHttpRequest Long Polling (with Jetty Coninuations)Site: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  12. 12. 3. Comet DEMO XMLHttpRequest Multipart (with Jetty Coninuations)Site: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  13. 13. 3. Comet DEMO XMLHttpRequest Multipart (with Servlet 3.0 API)Site: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  14. 14. 4. WebSockets WebSocket & FlashSockets WebSocket is a technology providing for bi-directional, full-duplex communications channels. It is designed to be implemented in web browsers and web servers but it can be used by any client or server application .Site: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  15. 15. 4. WebSockets DEMOSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  16. 16. Reverse-Ajax for Java ● Cannot use standard Servlets ● Cannot use blocking I/O ● Cannot retain request thread => Needs NIO + FeaturesSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  17. 17. Reverse-Ajax for Java You need 3 things: 1. A good server (NIO) 2. A good client library 3. A good backend librarySite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  18. 18. Servers ● Jetty 8 (WebSocket, Comet) ● Grizzly (WebSocket, Comet) ● Tomcat 7 (Comet) ● All Servlet 3.0 basedSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  19. 19. Servers ● For WebSocket: only native, per container (i.e. WebSocketServlet) ● For Comet: Servlet 3.0 containers, Jetty Continuations ● Polling, Piggyback anywhereSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  20. 20. Libraries 1. Socket.IO 2. Atmosphere 3. Cometd Bayeux 4. [...]Site: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  21. 21. 1. Socket.IO (transports) ● WebSocket ● Adobe Flash Socket ● Comet Long Polling ● Comet Multipart Streaming ● Comet Forever Iframe ● JSONP PollingSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  22. 22. 1. Socket.IO (client) ● Very good API ● Desktop & Mobile & Client-Server ● Fallback, reconnect, offline messages, event-driven, … ● Event-Driven bridge (Ovea)Site: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  23. 23. 1. Socket.IO (client) ● Internet Explorer 5.5 – 8 ● Safari 3 - 5 ● Google Chrome 4 - 6 ● Firefox 3-4 ● Opera 10.61 ● iPhone Safari ● iPad Safari ● Android WebKit ● WebOs WebKitSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  24. 24. 1. Socket.IO-Java ● Jetty Continuations (portable in any container) ● Native Jetty Websockets ● Servlet 3.0 supportSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  25. 25. 1. Socket.IO DEMOSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  26. 26. Event-Driven Web DEMO Socket.IO + Ovea EventBusSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  27. 27. 2. Atmosphere (transports) ● WebSocket ● Comet (Polling & Streaming)Site: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  28. 28. 2. Atmosphere (client) ● Currently limited ! ● JQuery integration ● BUT integration is possible ● With Cometd ● Socket.IO (to come ?)Site: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  29. 29. 2. Atmosphere (java) ● Nearly all containers ● Best native support ● Container detection ● WebSocketSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  30. 30. 2. Atmosphere DEMOSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  31. 31. 3. Cometd (transports) ● WebSocket ● Comet Long Polling ● JSONP Polling ● The most reliable and performantSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  32. 32. 3. Cometd (client) ● Event-based ● Jquery / Dojo ● Desktop & Mobile & Client- Server, Any Browser ● Extensions ● Very good APISite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  33. 33. 3. Cometd (java) ● Jetty Continuations (portable in any container) ● Native Jetty Websockets ● Servlet 3.0 supportSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  34. 34. 3. Cometd DEMOSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  35. 35. Resources (info) ➔ Exploring Reverse AJAX ➔ Comet ➔ WebSocket ➔ Portable Jetty ContinuationsSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  36. 36. Resources (projects) ➔ EventBus ➔ Socket.IO ➔ Socket.IO (Java) ➔ Atmosphere ➔ Cometd BayeuxSite: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com
  37. 37. Reverse-Ajax QUESTIONS ?Site: http://lab.ovea.com/Blog: http://blog.mycila.comMail: mathieu.carbou@gmail.com

×