HTML5, Websockets & the Mobile Web
12 likes12,158 views
The document discusses the integration of HTML5 WebSockets for mobile web applications, highlighting their ability to support real-time push notifications without the need for installations. It emphasizes the use of tools like Atmosphere for implementing WebSocket support across different servers and devices, enabling lightweight, cross-platform web apps. The potential of WebSockets in creating new mobile monitoring applications is also explored, along with their current limitations in browser support.
![[www.flickr.com/photos/moragcasey/]
Who needs Web Push to a mobile phone?
MOTIVATION
2](https://image.slidesharecdn.com/jazoon2011guinardwebsocketsmobile-110622135004-phpapp01/85/HTML5-Websockets-the-Mobile-Web-2-320.jpg)
![[ www.flickr.com/photos/docman ]
Web Sockets? Quesako?
BACKGROUND
4](https://image.slidesharecdn.com/jazoon2011guinardwebsocketsmobile-110622135004-phpapp01/85/HTML5-Websockets-the-Mobile-Web-4-320.jpg)
![The Solution: (HTML5) Websockets cont’d
> Client in 9 lines of
Javascript
> Neat! But:
– DRAFT, DRAFT & DRAFT!
– Different browsers support
– Safari for iOS 4.2 is the only
mobile browser supporting it
(more coming soon!)
[www.wikipedia.org]
7](https://image.slidesharecdn.com/jazoon2011guinardwebsocketsmobile-110622135004-phpapp01/85/HTML5-Websockets-the-Mobile-Web-7-320.jpg)
![[ www.flickr.com/photos/dhedwards ]
Using Mobile Web Push today… for Java Developers!
TOOLS
8](https://image.slidesharecdn.com/jazoon2011guinardwebsocketsmobile-110622135004-phpapp01/85/HTML5-Websockets-the-Mobile-Web-8-320.jpg)
![[www.flickr.com/photos/lpettinati]
Let’s get our hands dirty
DEMONSTRATION
10](https://image.slidesharecdn.com/jazoon2011guinardwebsocketsmobile-110622135004-phpapp01/85/HTML5-Websockets-the-Mobile-Web-10-320.jpg)
HTML5, Websockets & the Mobile Web
- 1. Time to Push to the Mobile Web! HTML5, Websockets, Mobile Web and Java! Dominique Guinard ETH Zurich / MIT Auto-ID Labs Java Track 8.2
- 2. [www.flickr.com/photos/moragcasey/] Who needs Web Push to a mobile phone? MOTIVATION 2
- 3. Mobile Monitoring of RFID Data > Use-case: – Simple Web app to monitor RFID readers – Scan and run (no install) – Real-time push > General idea: – No app / install & Cross device – Real-world monitoring apps – Lightweight (near) real-time 3
- 4. [ www.flickr.com/photos/docman ] Web Sockets? Quesako? BACKGROUND 4
- 5. The Problem: (a History of Web Push Hacks) > Long-polling (Comet) – Request – Wait – Request > HTTP Streaming – Connect – Keepalive > … > 101 of how to DoS a thread- blocking Webserver. 5
- 6. The Solution: (HTML5) Websockets > Bi-directional & full duplex connection on a single TCP socket. > Direct support in the browser. > NAT, Firewall and (Proxy) traversal http://jazoon.com/2010/Conference/Wednesday/Lubbers 6
- 7. The Solution: (HTML5) Websockets cont’d > Client in 9 lines of Javascript > Neat! But: – DRAFT, DRAFT & DRAFT! – Different browsers support – Safari for iOS 4.2 is the only mobile browser supporting it (more coming soon!) [www.wikipedia.org] 7
- 8. [ www.flickr.com/photos/dhedwards ] Using Mobile Web Push today… for Java Developers! TOOLS 8
- 9. Atmosphere > Atmosphere is a great Server Version Websocket Support portable “Web Push” Glassfish >3.1 Yes (not framework default) – Transparent deployment Tomcat 7 No (but NIO) across App/Web Servers Jetty > 8 M2 Yes (Grizzly/Glassfish, Jetty, JBoss, etc.) Grizzly 2 Yes > JQuery Plugin as a portable “Web Push” client I’m just a happy user, check it out – Transparent usage across here: http://atmosphere.java.net/ browsers, even for mobile apps (e.g., using Sencha Touch) 9
- 10. [www.flickr.com/photos/lpettinati] Let’s get our hands dirty DEMONSTRATION 10
- 11. PubSub Server with Atmosphere > A cross-server PubSub in a few lines: – Deployable in Jetty, Tomcat, Glassfish, JBoss, etc. > Smoothly combines with REST and JAX-RS (Jersey) 11
- 12. Mobile Websocket Client > Based on the Atmosphere JQuery Plugin – Cross browser! > Mobile App flavor with Sencha Touch > RFID tags read by the reader are pushed to the mobile Web app! 12
- 13. App & Tomcat 6.26: Uses HTTP Streaming 13
- 14. App & Jetty 8.0 M2: True Websocket Connection 14
- 15. Architecture of the Demo 15
- 16. Take home! > Web Push enables new apps – Also for the mobile Web (e.g., with Sencha Touch, Jo, etc.)! – No install, cross-platform – Real-world monitoring apps – Short-living interactions with real-time requirements > HTML5 Websockets are not quite here yet – Wide support in the Web galaxy (Node.js, Socket.io, Pusherapp, etc.) – Emerging support in the Java galaxy… – Glassfish / Grizzly, Jetty and cont’d – Atmosphere and the JQuery plugin is of great help for client and server portability! > Websockets also exist beyond the browser, e.g. for Android/Java 16
- 17. Thanks for your attention! Dominique Guinard home: guinard.org ETH Zurich / MIT Auto-ID Labs blog: webofthings.com twitter: @domguinard Tools/links mentioned in this talk on: delicious.com/misterdom/jazoon2011