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

jWebSocket MobileTechCon 2010 - WebSockets on Android, Symbian and BlackBerry

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