0
Stay Connected Mobile Pushing Apps with WebSockets Alexander Schulze Predrag Stojadinovic jWebSocket – Open Source Cross-B...
Today's session <ul><li>Agenda </li></ul><ul><ul><li>Communication with WebSockets Where, What, Why, How </li></ul></ul><u...
Apps in Transition <ul><li>More communication rather than pure information </li></ul><ul><ul><li>Entertainment, immediate ...
WebSockets Basics <ul><li>WebSockets are bidirectional and permanent </li></ul><ul><ul><li>Efficient real-time communicati...
What we have: HTTP <ul><li>HTTP - designed for the transmission of documents </li></ul><ul><li>All cumbersome, nearly real...
Nearly Realtime Mechanisms <ul><li>Polling </li></ul><ul><ul><li>Sending regular requests with immediate response </li></u...
Costs <ul><li>HTTP volume and bandwidth calculation </li></ul><ul><ul><li>Taking: 800 Bytes for Request+Response (up to 2K...
WebSockets ?  <ul><li>WebSockets – What is it ? </li></ul><ul><ul><li>Bi-directional full-duplex protocol between the Brow...
TCP instead of HTTP <ul><li>Freedom of extendability </li></ul><ul><ul><li>No binding to specific data formats </li></ul><...
Establishing Connection <ul><li>Handshake </li></ul>jWebSocket – Stay Connected 09/12/10 Client GET {path} HTTP/1.1 Upgrad...
Establishing Connection <ul><li>Handshake  (Same Origin Policy, IETF Draft #76) </li></ul>jWebSocket – Stay Connected 09/1...
Bi-directional data exchange <ul><li>Text frames  (released) </li></ul><ul><ul><li>0x00 <UTF-8 text data> 0xFF </li></ul><...
WebSockets TCP vs. HTTP <ul><li>WebSockets volume and bandwidth calculation </li></ul><ul><ul><li>Fixed: 2 Bytes for Reque...
WebSockets – Why? <ul><li>Faster, cheaper, more open </li></ul><ul><ul><li>Leaner communication  (TCP vs. HTTP overhead) W...
WebSockets – What for <ul><li>WebSockets are perfect for ... </li></ul><ul><ul><li>Online-Games and Online-Collaboration <...
HTML5 Browser <ul><li>WebSockets in the Browser </li></ul>jWebSocket – Stay Connected 09/12/10 var lWebSocketClient = new ...
Compatibility <ul><li>X-Browser and X-Plattform compatible </li></ul><ul><ul><li>Nativ in Chrome 4/5/6, Firefox 4, Safari ...
Token <ul><li>jWebSocket Token Model </li></ul><ul><ul><li>All nodes in a WebSocket network are stupid at first </li></ul>...
jWebSocket Server <ul><li>Server Infrastructure </li></ul><ul><ul><li>Engines </li></ul></ul><ul><ul><li>Tokens </li></ul>...
jWebSocket JavaScript Client <ul><li>Client Infrastructure </li></ul><ul><ul><li>Basic WebSocket Client </li></ul></ul><ul...
WebSockets – How? <ul><li>Libraries already available (open source, LGPL) </li></ul><ul><ul><li>Browser Client in JavaScri...
Android - Dalvik VM <ul><li>Android Apps in Java </li></ul><ul><ul><li>In principle, Java 1.5, incl. collections, annotati...
Low-Level-Interface <ul><li>Java Client for Android, Symbian and BlackBerry </li></ul>jWebSocket – Stay Connected 09/12/10...
Listener <ul><li>The same API as in the Web Clients </li></ul>jWebSocket – Stay Connected 09/12/10 public interface WebSoc...
Java WebSocket Client jWebSocket – Stay Connected 09/12/10
Android Demo App <ul><li>MainActivity </li></ul><ul><ul><li>ListView </li></ul></ul><ul><li>ConfigActivity </li></ul><ul><...
Android Fundamentals <ul><li>WebSocket App </li></ul><ul><ul><li>Establish connection </li></ul></ul><ul><ul><li>Receive m...
Android Canvas Demo <ul><li>Online-Collaboration </li></ul><ul><ul><li>Multiple users work on the  same document </li></ul...
Android - transfer photos <ul><li>Image Transfer </li></ul><ul><ul><li>jWebSocket FileSystem Plug-In </li></ul></ul><ul><u...
Overview <ul><li>We have big plans... </li></ul><ul><ul><li>SSO and Authentication/Authorization API </li></ul></ul><ul><u...
In-house <ul><li>The jWebSocket  team is looking for support! </li></ul><ul><ul><li>Java EE, SE, ME, JavaScript, Objective...
Thank you for your attention! <ul><li>Questions & Answers </li></ul><ul><li>Alexander Schulze </li></ul><ul><li>Predrag St...
Upcoming SlideShare
Loading in...5
×

jWebSocket MobileTechCon 2010 - WebSockets on Android, Symbian and BlackBerry

6,068

Published on

Presentation MobileTechCon 2010, Mainz, Germany: Stay Connected - Mobile Pushing Apps with jWebSocket:
Whether on-line games, or online collaboration, streaming, chat, remote control or monitoring applications - real-time communication has long ago moved into cross-platform and cross-browser web solutions. HTML5 WebSockets are the ideal basis for bidirectional high-speed data exchange in real time.

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
  • awesome!! good work Alex and Predrag!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,068
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
133
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "jWebSocket MobileTechCon 2010 - WebSockets on Android, Symbian and BlackBerry"

  1. 1. Stay Connected Mobile Pushing Apps with WebSockets Alexander Schulze Predrag Stojadinovic jWebSocket – Open Source Cross-Browser/Cross-Platform WebSocket Solution
  2. 2. Today's session <ul><li>Agenda </li></ul><ul><ul><li>Communication with WebSockets Where, What, Why, How </li></ul></ul><ul><ul><li>WebSocket Server and Browser Client </li></ul></ul><ul><ul><li>WebSocket Communication for mobile Apps </li></ul></ul><ul><ul><li>Android Demos and Code Examples </li></ul></ul>jWebSocket – Stay Connected 09/12/10
  3. 3. Apps in Transition <ul><li>More communication rather than pure information </li></ul><ul><ul><li>Entertainment, immediate experience exchange </li></ul></ul><ul><li>We will be online more and more </li></ul><ul><ul><li>Text, Photos, Videos, Music, Geo-Location, etc. </li></ul></ul><ul><li>Solutions for stationary and mobile devices </li></ul><ul><ul><li>Merge Browser, Desktop and Mobile Apps </li></ul></ul><ul><li>WebSockets help to better connect the users </li></ul>jWebSocket – Stay Connected 09/12/10
  4. 4. WebSockets Basics <ul><li>WebSockets are bidirectional and permanent </li></ul><ul><ul><li>Efficient real-time communication rather than the cumbersome Request/Response Protocol </li></ul></ul><ul><li>WebSockets help achieve interoperability </li></ul><ul><ul><li>Standardized handshaking and packet exchange for stationary and mobile platforms </li></ul></ul><ul><li>Web and Mobile Apps need ... </li></ul><ul><ul><li>safe, reliable and fast communication </li></ul></ul>jWebSocket – Stay Connected 09/12/10
  5. 5. What we have: HTTP <ul><li>HTTP - designed for the transmission of documents </li></ul><ul><li>All cumbersome, nearly real-time tricks ... </li></ul><ul><ul><li>Polling, Reverse-AJAX </li></ul></ul><ul><ul><li>Chunking, Comet etc... </li></ul></ul><ul><li>... are ultimately not standardized hacks! </li></ul><ul><li>HTTP remains a Request/Response mechanism </li></ul>jWebSocket – Stay Connected 09/12/10
  6. 6. Nearly Realtime Mechanisms <ul><li>Polling </li></ul><ul><ul><li>Sending regular requests with immediate response </li></ul></ul><ul><ul><li>Many connections, high volume, low efficiency (especially at low data rate) </li></ul></ul><ul><li>Long Polling </li></ul><ul><ul><li>Regular requests with keeping the connection open </li></ul></ul><ul><ul><li>High volume, two canals per client, buffering problem, many connections (especially at high data rate) </li></ul></ul>jWebSocket – Stay Connected 09/12/10
  7. 7. Costs <ul><li>HTTP volume and bandwidth calculation </li></ul><ul><ul><li>Taking: 800 Bytes for Request+Response (up to 2KB) </li></ul></ul><ul><ul><li>1.000 Clients x 800 Bytes = 800 KB => 6,4 Mbit/s </li></ul></ul><ul><ul><li>10.000 Clients x 800 Bytes = 8 MB => 64 Mbit/s </li></ul></ul><ul><ul><li>100.000 Clients x 800 Bytes = 80 MB => 640 Mbit/s </li></ul></ul><ul><li>And that's only for the protocol - no user data! </li></ul>jWebSocket – Stay Connected 09/12/10
  8. 8. WebSockets ? <ul><li>WebSockets – What is it ? </li></ul><ul><ul><li>Bi-directional full-duplex protocol between the Browser client and the WebSocket server </li></ul></ul><ul><ul><li>Equally usable for desktop and mobile apps </li></ul></ul><ul><ul><li>Designed for permanent / long-lasting connections </li></ul></ul><ul><ul><li>Standardized in HTML 5, W3C API, IETF-Protocol (http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol-76) </li></ul></ul><ul><li>WebSockets are TCP - not HTTP - based! </li></ul>jWebSocket – Stay Connected 09/12/10
  9. 9. TCP instead of HTTP <ul><li>Freedom of extendability </li></ul><ul><ul><li>No binding to specific data formats </li></ul></ul><ul><ul><li>No rules for content or processing </li></ul></ul><ul><li>But also high responsibility </li></ul><ul><ul><li>Data formats and communication logic must be implemented </li></ul></ul><ul><ul><li>As well as all security mechanisms! </li></ul></ul>jWebSocket – Stay Connected 09/12/10
  10. 10. Establishing Connection <ul><li>Handshake </li></ul>jWebSocket – Stay Connected 09/12/10 Client GET {path} HTTP/1.1 Upgrade: WebSocket Connection: Upgrade Host: {hostname}:{port} Origin: http://{host}[:{port}] Sec-WebSocket-Key1: {sec-key1} Sec-WebSocket-Key2: {sec-key2} 8 Bytes generated {sec-key3}  
  11. 11. Establishing Connection <ul><li>Handshake (Same Origin Policy, IETF Draft #76) </li></ul>jWebSocket – Stay Connected 09/12/10 Client GET /services/chat/;room=Foyer HTTP/1.1 Upgrade: WebSocket Connection: Upgrade Host: jwebsocket.org Origin: http://jwebsocket.org Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 ^n:ds[4U Server HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Origin: http://jwebsocket.org Sec-WebSocket-Location: ws://jwebsocket.org/ services/chat 8jKS'y:G*Co,Wxa-
  12. 12. Bi-directional data exchange <ul><li>Text frames (released) </li></ul><ul><ul><li>0x00 <UTF-8 text data> 0xFF </li></ul></ul><ul><ul><li>Theoretically no length limit, JavaScript: 4 GB </li></ul></ul><ul><li>Binary frames (not yet released) </li></ul><ul><ul><li>0x80-0xFF <length> <binary data> </li></ul></ul><ul><li>The WebSocket Protocol is alive! </li></ul><ul><ul><li>Current IETF Draft # 76 (Changes expected) </li></ul></ul>jWebSocket – Stay Connected 09/12/10
  13. 13. WebSockets TCP vs. HTTP <ul><li>WebSockets volume and bandwidth calculation </li></ul><ul><ul><li>Fixed: 2 Bytes for Request+Response </li></ul></ul><ul><ul><li>1.000 Clients x 2 Bytes = 2 KB => 0,016 Mbit/s </li></ul></ul><ul><ul><li>10.000 Clients x 2 Bytes = 20 KB => 0,16 Mbit/s </li></ul></ul><ul><ul><li>100.000 Clients x 2 Bytes = 200 KB => 1,6 Mbit/s </li></ul></ul><ul><li>Protocol overhead: four hundred times smaller! </li></ul>jWebSocket – Stay Connected 09/12/10
  14. 14. WebSockets – Why? <ul><li>Faster, cheaper, more open </li></ul><ul><ul><li>Leaner communication (TCP vs. HTTP overhead) WebSockets gradually replacing XHR and Comet </li></ul></ul><ul><ul><li>Uses only one channel (bidirectional, full-duplex) </li></ul></ul><ul><ul><li>Resource and cost reducing, twice as many clients simultaneously per server </li></ul></ul><ul><ul><li>No protocol specifications or binding to specific data formats </li></ul></ul>jWebSocket – Stay Connected 09/12/10
  15. 15. WebSockets – What for <ul><li>WebSockets are perfect for ... </li></ul><ul><ul><li>Online-Games and Online-Collaboration </li></ul></ul><ul><ul><li>Remote Control and Monitoring </li></ul></ul><ul><ul><li>Streaming and Chat </li></ul></ul><ul><ul><li>Social Networks </li></ul></ul><ul><ul><li>Clusters and Grids </li></ul></ul>jWebSocket – Stay Connected 09/12/10
  16. 16. HTML5 Browser <ul><li>WebSockets in the Browser </li></ul>jWebSocket – Stay Connected 09/12/10 var lWebSocketClient = new WebSocket(&quot;ws://jwebsocket.org:8787&quot;); // tries to open the TCP connection and to exchange handshake lWebSocketClient. onopen = function(aEvent) { // connection has successfully been established } lWebSocketClient. onmessage = function(aEvent) { // a data packet has completely been received in aEvent.data } lWebSocketClient. onclose = function(aEvent) { // the connection has been terminated } lWebSocketClient. send (&quot;Hello World!&quot;); // sends a UTF-8 text message to the server lWebSocketClient. close (); // terminates the connection
  17. 17. Compatibility <ul><li>X-Browser and X-Plattform compatible </li></ul><ul><ul><li>Nativ in Chrome 4/5/6, Firefox 4, Safari 5, IE 6/7/8, Opera 9/10 and older Browsers with FlashBridge </li></ul></ul><ul><ul><li>Clients for Android, Symbian and BlackBerry, iPhone from December 2010 </li></ul></ul>jWebSocket – Stay Connected 09/12/10
  18. 18. Token <ul><li>jWebSocket Token Model </li></ul><ul><ul><li>All nodes in a WebSocket network are stupid at first </li></ul></ul><ul><ul><li>All parties must agree on a common language to “understand” incoming packets </li></ul></ul><ul><ul><li>For example, JSON, XML, or CSV </li></ul></ul><ul><ul><li>Abstract: Data objects, in form of a jWebSocket “Token” </li></ul></ul>jWebSocket – Stay Connected 09/12/10
  19. 19. jWebSocket Server <ul><li>Server Infrastructure </li></ul><ul><ul><li>Engines </li></ul></ul><ul><ul><li>Tokens </li></ul></ul><ul><ul><li>Server </li></ul></ul><ul><ul><li>Filter </li></ul></ul><ul><ul><li>Plug-Ins </li></ul></ul><ul><ul><li>Listener </li></ul></ul>jWebSocket – Stay Connected 09/12/10
  20. 20. jWebSocket JavaScript Client <ul><li>Client Infrastructure </li></ul><ul><ul><li>Basic WebSocket Client </li></ul></ul><ul><ul><li>Token Client </li></ul></ul><ul><ul><li>Extendable with Plug-Ins </li></ul></ul><ul><li>Features </li></ul><ul><ul><li>Connection Management </li></ul></ul><ul><ul><li>Session Management </li></ul></ul><ul><ul><li>Authentication and authorization </li></ul></ul>jWebSocket – Stay Connected 09/12/10
  21. 21. WebSockets – How? <ul><li>Libraries already available (open source, LGPL) </li></ul><ul><ul><li>Browser Client in JavaScript jWebSocket.js including FlashBridge and JSON Support </li></ul></ul><ul><ul><li>jWebSocket Server as .jar, .war, .exe or as a service </li></ul></ul><ul><ul><li>Client for Java SE e.g. for Swing Desktop Apps </li></ul></ul><ul><ul><li>Clients for Android, Symbian and BlackBerry (iPhone from Dezember 2010) </li></ul></ul>jWebSocket – Stay Connected 09/12/10
  22. 22. Android - Dalvik VM <ul><li>Android Apps in Java </li></ul><ul><ul><li>In principle, Java 1.5, incl. collections, annotations, etc. </li></ul></ul><ul><ul><li>Google's own Dalvik VM: optimized for Mobile Devices, very compact, but not byte-code compatible </li></ul></ul><ul><ul><li>As already discovered in Java ME: “Write Once Run everwhere” belongs to the past </li></ul></ul><ul><ul><li>Special Android builds of the libraries are necessary, re- compile your own and third-party libs from source </li></ul></ul>jWebSocket – Stay Connected 09/12/10
  23. 23. Low-Level-Interface <ul><li>Java Client for Android, Symbian and BlackBerry </li></ul>jWebSocket – Stay Connected 09/12/10 public interface WebSocketClient { void open (String aURL) throws WebSocketException; void send (WebSocketPacket aPacket) throws WebSocketException; void close () throws WebSocketException; boolean isConnected (); void addListener (WebSocketClientListener aListener); void removeListener (WebSocketClientListener aListener); void notifyOpened (WebSocketClientEvent aEvent); void notifyPacket (WebSocketClientEvent aEvent, WebSocketPacket(aPacket); void notifyClosed (WebSocketClientEvent aEvent); }
  24. 24. Listener <ul><li>The same API as in the Web Clients </li></ul>jWebSocket – Stay Connected 09/12/10 public interface WebSocketClientListener { void processOpened (WebSocketClientEvent aEvent); void processPaket (WebSocketClientEvent aEvent, WebSocketPacket aPacket); void processClosed (WebSocketClientEvent aEvent); }
  25. 25. Java WebSocket Client jWebSocket – Stay Connected 09/12/10
  26. 26. Android Demo App <ul><li>MainActivity </li></ul><ul><ul><li>ListView </li></ul></ul><ul><li>ConfigActivity </li></ul><ul><ul><li>URL </li></ul></ul><ul><ul><li>Username </li></ul></ul><ul><ul><li>Password </li></ul></ul>jWebSocket – Stay Connected 09/12/10
  27. 27. Android Fundamentals <ul><li>WebSocket App </li></ul><ul><ul><li>Establish connection </li></ul></ul><ul><ul><li>Receive messages </li></ul></ul><ul><ul><li>Send messages </li></ul></ul><ul><ul><li>Broadcast messages </li></ul></ul><ul><ul><li>Disconnect </li></ul></ul>jWebSocket – Stay Connected 09/12/10
  28. 28. Android Canvas Demo <ul><li>Online-Collaboration </li></ul><ul><ul><li>Multiple users work on the same document </li></ul></ul><ul><ul><li>Example: SharedCanvas </li></ul></ul>jWebSocket – Stay Connected 09/12/10
  29. 29. Android - transfer photos <ul><li>Image Transfer </li></ul><ul><ul><li>jWebSocket FileSystem Plug-In </li></ul></ul><ul><ul><li>Notification of changes </li></ul></ul><ul><ul><li>Binary data Base64 encoded , optimization with a new binary protocol expected soon </li></ul></ul><ul><li>http://jwebsocket.org/ Snapshot Demo! </li></ul>jWebSocket – Stay Connected 09/12/10
  30. 30. Overview <ul><li>We have big plans... </li></ul><ul><ul><li>SSO and Authentication/Authorization API </li></ul></ul><ul><ul><li>Remote Procedure Calls (RPC) </li></ul></ul><ul><ul><li>Cloud API, Smart Grids and Clusters </li></ul></ul><ul><ul><li>Shared Objects and FileSharing API </li></ul></ul><ul><ul><li>JDBC Bridge and Database API </li></ul></ul><ul><ul><li>External Service Nodes </li></ul></ul>jWebSocket – Stay Connected 09/12/10
  31. 31. In-house <ul><li>The jWebSocket team is looking for support! </li></ul><ul><ul><li>Java EE, SE, ME, JavaScript, Objective C... </li></ul></ul><ul><ul><li>Android, Symbian, BlackBerry, iPhone... </li></ul></ul><ul><ul><li>Ideas for innovative apps welcome! </li></ul></ul><ul><li>We offer... </li></ul><ul><ul><li>Extensive experience of an international team </li></ul></ul><ul><ul><li>First Class support for your own projects </li></ul></ul><ul><ul><li>Support in building your own reputation </li></ul></ul>jWebSocket – Stay Connected 09/12/10
  32. 32. Thank you for your attention! <ul><li>Questions & Answers </li></ul><ul><li>Alexander Schulze </li></ul><ul><li>Predrag Stojadinovic </li></ul><ul><li>Forum & Download </li></ul><ul><li>http://jwebsocket.org @jWebSocket </li></ul>jWebSocket – Stay Connected 09/12/10
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×