HTML5, Websockets & the Mobile Web
-
Upload
dominique-guinard -
Category
Technology
-
view
15.302 -
download
1
description
Transcript of HTML5, Websockets & the Mobile Web
![Page 1: HTML5, Websockets & the Mobile Web](https://reader035.fdocuments.net/reader035/viewer/2022081801/54b743f24a7959746e8b462f/html5/thumbnails/1.jpg)
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
![Page 2: HTML5, Websockets & the Mobile Web](https://reader035.fdocuments.net/reader035/viewer/2022081801/54b743f24a7959746e8b462f/html5/thumbnails/2.jpg)
MOTIVATIONWho needs Web Push to a mobile phone?
2
[www.flickr.com/photos/moragcasey/]
![Page 3: HTML5, Websockets & the Mobile Web](https://reader035.fdocuments.net/reader035/viewer/2022081801/54b743f24a7959746e8b462f/html5/thumbnails/3.jpg)
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
![Page 4: HTML5, Websockets & the Mobile Web](https://reader035.fdocuments.net/reader035/viewer/2022081801/54b743f24a7959746e8b462f/html5/thumbnails/4.jpg)
BACKGROUNDWeb Sockets? Quesako?
4
[ www.flickr.com/photos/docman ]
![Page 5: HTML5, Websockets & the Mobile Web](https://reader035.fdocuments.net/reader035/viewer/2022081801/54b743f24a7959746e8b462f/html5/thumbnails/5.jpg)
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
![Page 6: HTML5, Websockets & the Mobile Web](https://reader035.fdocuments.net/reader035/viewer/2022081801/54b743f24a7959746e8b462f/html5/thumbnails/6.jpg)
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
![Page 7: HTML5, Websockets & the Mobile Web](https://reader035.fdocuments.net/reader035/viewer/2022081801/54b743f24a7959746e8b462f/html5/thumbnails/7.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!)
7
[www.wikipedia.org]
![Page 8: HTML5, Websockets & the Mobile Web](https://reader035.fdocuments.net/reader035/viewer/2022081801/54b743f24a7959746e8b462f/html5/thumbnails/8.jpg)
TOOLSUsing Mobile Web Push today… for Java Developers!
8
[ www.flickr.com/photos/dhedwards ]
![Page 9: HTML5, Websockets & the Mobile Web](https://reader035.fdocuments.net/reader035/viewer/2022081801/54b743f24a7959746e8b462f/html5/thumbnails/9.jpg)
Atmosphere
> Atmosphere is a great
portable “Web Push”
framework
– Transparent deployment
across App/Web Servers
(Grizzly/Glassfish, Jetty,
JBoss, etc.)
> JQuery Plugin as a portable
“Web Push” client
– Transparent usage across
browsers, even for mobile
apps (e.g., using Sencha
Touch) 9
I’m just a happy user, check it out
here: http://atmosphere.java.net/
Server Version Websocket
Support
Glassfish >3.1 Yes (not
default)
Tomcat 7 No (but NIO)
Jetty > 8 M2 Yes
Grizzly 2 Yes
![Page 10: HTML5, Websockets & the Mobile Web](https://reader035.fdocuments.net/reader035/viewer/2022081801/54b743f24a7959746e8b462f/html5/thumbnails/10.jpg)
DEMONSTRATIONLet’s get our hands dirty
10
[www.flickr.com/photos/lpettinati]
![Page 11: HTML5, Websockets & the Mobile Web](https://reader035.fdocuments.net/reader035/viewer/2022081801/54b743f24a7959746e8b462f/html5/thumbnails/11.jpg)
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
![Page 12: HTML5, Websockets & the Mobile Web](https://reader035.fdocuments.net/reader035/viewer/2022081801/54b743f24a7959746e8b462f/html5/thumbnails/12.jpg)
Mobile Websocket Client
12
> 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!
![Page 13: HTML5, Websockets & the Mobile Web](https://reader035.fdocuments.net/reader035/viewer/2022081801/54b743f24a7959746e8b462f/html5/thumbnails/13.jpg)
App & Tomcat 6.26: Uses HTTP Streaming
13
![Page 14: HTML5, Websockets & the Mobile Web](https://reader035.fdocuments.net/reader035/viewer/2022081801/54b743f24a7959746e8b462f/html5/thumbnails/14.jpg)
App & Jetty 8.0 M2: True Websocket Connection
14
![Page 15: HTML5, Websockets & the Mobile Web](https://reader035.fdocuments.net/reader035/viewer/2022081801/54b743f24a7959746e8b462f/html5/thumbnails/15.jpg)
Architecture of the Demo
15
![Page 16: HTML5, Websockets & the Mobile Web](https://reader035.fdocuments.net/reader035/viewer/2022081801/54b743f24a7959746e8b462f/html5/thumbnails/16.jpg)
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
![Page 17: HTML5, Websockets & the Mobile Web](https://reader035.fdocuments.net/reader035/viewer/2022081801/54b743f24a7959746e8b462f/html5/thumbnails/17.jpg)
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
Thanks for your attention!