Enhancing Mobile User Experience with WebSocket

2,447 views

Published on

This presentation explains the basics of WebSockets and how a Developer can leverage its features to enhance a Mobile User Experience and offer real timing applications

Published in: Internet, Technology

Enhancing Mobile User Experience with WebSocket

  1. 1. Enhancing Mobile User Experience with WebSocket Mauricio “Maltron” Leal maltron@gmail.com @maltron
  2. 2. WebSocket 101 (The Short Story)
  3. 3. Web Server (WebSocket compliant) Endpoint Client (WebSocket compliant) Endpoint ws://webserver:80/mycontext/endpoint ? GET /mycontext/endpoint HTTP/1.1 Host: webserver Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: xqBt3ImNzJbYqRINxEFlkg== Origin: http://client Sec-WebSocket-Version: 13
  4. 4. HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: K7DJLdLooIwIG/MOpvWFB3y3FE8= Web Server (WebSocket compliant) Endpoint Client (WebSocket compliant) Endpoint HTTP/1.1 101 Switching Protocols
  5. 5. Web Server (WebSocket compliant) Endpoint Client (WebSocket compliant) Endpoint CONNECTED A connection is established and “never” closed Bi-directional & full duplex connection on a single TCP socket. It can be secured using SSLIt can be on average, 700 x faster than AJAX polling.
  6. 6. Web Server (WebSocket compliant) Endpoint Client (WebSocket compliant) Endpoint Message
  7. 7. Web Server (WebSocket compliant) Endpoint Client (WebSocket compliant) Endpoint Message
  8. 8. Endpoint Endpoint Endpoint Endpoint Endpoint Message
  9. 9. Endpoint Message Browser (Using HTML 5) Standalone (Webscoket Client) Mobile (HTML 5 Browser) Mobile (WebSocket Client)
  10. 10. WebSocket Advanced (The Geek Story)
  11. 11. Endpoint Endpoint javax.websocket Endpoint javax.websocket Endpoint Endpoints represents an object that can handle websocket conversations. 1 Instance = 1 Thread = 1 Connection
  12. 12. Endpoint javax.websocket Endpoint For each endpoint class, holds lifecycle methods that may be overridden to intercept a websocket open, error and close events. Lifecycle Methods
  13. 13. Endpoint javax.websocket Endpoint Programmatic Endpoint public class MyEndpoint extends Endpoint { @Override public void onOpen(Session s, EndpointConfig c) { // A connection was established } @Override public void onClose(Session s, CloseReason reason) {} @Override public void onError(Session s, Throwable thr) {}
  14. 14. Endpoint javax.websocket Endpoint Programmatic Endpoint: Need to create a Message Handler public class MyEndpoint extends Endpoint { ... @Override public void onOpen(Session s, EndpointConfig c) { session.addMessageHandler( new MessageHandler.Whole<String>()) { @Override public void onMessage(String m) { try { s.getBasicRemote().sendText(“hi”); } catch(IOException e) { // Houston: we‟ve got a problem } ... Message Handler
  15. 15. Endpoint javax.websocket Endpoint Annotated Endpoint: Much Simpler @ServerEndpoint(“/endpoint”) public class MyEndpoint extends Endpoint { @OnOpen public void open(Session s) {} @OnMessage public void myMessage(String message) {} @OnClose public void close(Session s) {} No need for a Message Handler
  16. 16. Endpoint Endpoint javax.websocket Session A Session represents a conversation between two Endpoints. It captures both Server and Client State
  17. 17. Endpoint Endpoint javax.websocket Session For sending a simple message to another Endpoint try { session.getBasicRemote().sendText(“Hello World”); } catch(IOException e) { // Houston: We‟ve got a problem } “Hello World”
  18. 18. Endpoint Endpoint javax.websocket Session try { for(Session s: session.getOpenSessions()) s.getBasicRemote().sendText(“Hello All”); } catch(IOException e) { // Houston: We‟ve got a problem } EndpointFor sending the same message to all open Sessions
  19. 19. Endpoint Endpoint javax.websocket Session Some other Session’s methods very useful boolean isOpen() boolean isSecure() void setMaxIdleTimeout(long time) void addMessageHandler(MessageHandler handler) : Check if the connection is open : Check if the connection is secure : Max Idle Timeout for Inactivity : Different Message Handlers
  20. 20. Endpoint Waiting for Message to be delivered: Blocking ... session.getBasicRemote().sendText(“Hi everyone”); ... RemoteEndpoint.Basic getBasicRemote()
  21. 21. Endpoint Create another Thread in order to send it. ... session.getAsyncRemote().sendText(“Hi everyone”); ... RemoteEndpoint.Async getAsyncRemote()
  22. 22. Endpoint Messages can be in different types RemoteEndpoint.Basic.sendText(String text) Text Messages RemoteEndpoint.Basic.sendBinary(ByteBuffer data) Binary Messages RemoteEndpoint.sendPing(ByteByffer data) Ping Frame RemoteEndpoint.sendPong(ByteBuffer data) Pong Frame
  23. 23. Endpoint @ServerEndpoint(“/response”) public class Response { @OnMessage public void textMessage(String msg, Session s) { System.out.println(“Text:”+msg); } @OnMessage public void binaryMessage(Session s, ByteBuffer msg) { System.out.println(“Binary:”+msg.toString()); } @OnMessage public void pongMessage(Session s, PongMessage msg) { System.out.println(“Pong:”+msg.getApplicationData(). toString(); } } Receiving Different type of Messages
  24. 24. Endpoint Endpoint public class Person { private int ID; public String name; public String position; ... POJO { “ID”: 2 “name”: “somebody@gmail.com” “position”: “Developer” } JSON Encoder JSON Encoder Decouples the business logic from serialization and deserialization
  25. 25. Endpoint Endpoint public class Person { private int ID; public String name; public String position; ... POJO Decoder JSON Decoder { “ID”: 2 “name”: “somebody@gmail.com” “position”: “Developer” } JSON Decouples the business logic from serialization and deserialization
  26. 26. Endpoint Endpoint o Access details of the initial HTTP request for a connection You can provide custom configuration on how the container creates a server endpoint instances. o Perform custom checks on the Origin HTTP header o Modify the WebSocket handshake response o Choose a WebSocket subprotocol o Control the instantiation and initialization of endpoint
  27. 27. Endpoint EndpointYou can provide custom configuration on how the container creates a server endpoint instances. @Override public void modifyHandshake(ServerEndpointConfig config, HandshakeRequest request, HandshakeResponse response) { config.getUserProperties().put(“handshakereq”, req); }
  28. 28. WebSocket@Mobile (Sorry, no Windows Mobile)
  29. 29. Using Mobile’s Browser Using Native Implementation 2 Different approaches for using WebSockets The Connection is never reliable On a Mobile Universe Using a open connection for a long time, can drain your battery rapidly. In Native apps, use ONLY when the app is on foregroud.
  30. 30. Using Mobile’s Browser The Good The Bad No worries about deployment: It’s just a website Not all Mobile Browsers support WebSockets Concern about different version of browsers. Must be deal with JavaScript. The same code for every device
  31. 31. The Good The Bad More easy ways to support older versions of iOS and Android. Can’t reuse the same code: Need to consider different implementations More work on maintenance Using Native Implementation More Control over a Connection
  32. 32. 6.0 6.1 Safari iOS Browser Android Mini Opera Browser Blackberry Android Chrome Android Firefox 7.0 5.0 7.0 source: http://caniuse.com/websockets 4.2 4.3 4.4 7.0 10.0 33.0 26.0 Mobile Opera 12.1 16.0 Support of WebSocktes in Mobile Browsers
  33. 33. function WebSocketTest(){ if ("WebSocket" in window) { // WebSocket Connection goes here alert("WebSockets supported rnrnBrowser: “); } else { // the browser doesn't support alert("WebSockets NOT supported”); }} Testing if a WebSocket is supported in your Browser (Using JavaScript) $(document).ready(function() { if( typeof(WebSocket) != "function" ) { $('body').html("<h1>Error</h1><p>Your browser does not support Web Sockets. </p>"); }}); Essentially, just test if WebSocket is defined or not
  34. 34. var connection = new WebSocket( „ws://webserver:80/mycontext/endpoint‟); connection.onopen = function() { // connection opened console.log(„connection open‟); console.send(„Hello World‟); } connection.onmessage = function(message) { console.log(„Received message from server:‟); console.log(message); } A simple JavaScript code using WebSocket
  35. 35. A tool for helping Monitoring WebSocket Traffic: Chrome Dev Tools • Open up the Developer Tools • Switch to the Network tab • Click on the entry for your WebSocket connection • Switch to the Frames tab. http://developers.google.com/chrome-developer-tool/ Google’s Chrome Dev Tools
  36. 36. Socket Rocket https://github.com/square/SocketRocket Unit WebSocket Client https://code.google.com/p/unit/wiki/UnittWebSocketClient iOS WebSocket Client Libraries Recommended
  37. 37. Autobahn Android http://autobahn.ws/android WebSocket and Socket.IO https://github.com/koush/android-websockets Android WebSocket Client Libraries Recommended jWebSocket https://jwebsocket.org/ Secure WebSockets https://github.com/palmerc/SecureWebSockets
  38. 38. WebSocket@Show Possible Scenarios
  39. 39. Enable “fast” notification for a “fast” reaction • Real Time Notification: Seconds matter Both iOS and Android has Notification Systems.
  40. 40. Multiple devices (including mobile) to be in sync with other sources • Transfer several messages to be sure if a device is in sync • Exchange of several messages are extremely fast
  41. 41. Enabling people in sharing and interacting in the same content at the same time. • Real Time Video Sharing • Broader collaboration
  42. 42. Mobile Gaming: Synchronize all clients in a Massive Multiplayer Gaming • Synchronization of elements in all clients, through the Server • Adding instant notifications • Instant chat between players
  43. 43. Presenting real time information from several sources. • Instant information to the user • Capacity to the user to react more fast
  44. 44. Reading instant patient information and broadcasting to his doctor • Monitor life treaty information • Broadcast to hospital / doctor
  45. 45. Enabling fast awareness in a large environment • Awareness of other people in real time • Keep track of living events Client B Client A
  46. 46. Connecting to other hardware (Raspberry Pi), which has the capability of running WebSocket container. http://developer.kaazing.com/portfolio/real-time-interactions-with-physical-objects-over-the-web/ • Using WebSockets as the default way to connected to other hardware devices. • Leveraging you WebSockets know- how.
  47. 47. WebSocket@DevNation Real-time collaborative writing: When WebSocket met Ascii Doctor 4:50 pm Room: 208 Maxime Gréau
  48. 48. Thank you Special Thanks: Neto Marin <neto.marin at gmail.com> maltron@gmail.com Avaliable on Slideshare.net http://www.slideshare.net/maltron/enhancing-mobile-user-experience-with-websocket

×