Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers

WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers

If I'd have to vote for the most important HTML5 new API, I'd select WebSockets. This is a new protocol that allows full duplex communication as opposed to request-response HTTP model. WebSockets API is included in the Java EE 7 (JSR 356).
HTML5 specification includes WebSockets, a new communication protocol for the Web. It's becoming the best choice for building real-time Web applications. This presentation is an overview of the servers and frameworks that support WebSockets. You'll see some use cases where WebSockets shine. We'll also discuss various approaches for the server- and client-side implementations of WebSockets that can be used in the Web applications today.

Example application could be found on github

https://github.com/gAmUssA/websockets-demos

Viktor Gamov

July 24, 2012
Tweet

More Decks by Viktor Gamov

Other Decks in Programming

Transcript

  1. WEB SOCKETS
    CURRENT STATE
    FOR JAVA DEVELOPERS

    View full-size slide

  2. CURRENT STATE
    FOR JAVA DEVELOPERS
    Web SOCKETS
    VIKTOR
    GAMOV
    PRESENTED
    BY

    View full-size slide

  3. WEB SOCKETS
    BIT OF
    HISTORY
    MEET
    THE WEBSOCKETS
    WEBSOCKETS
    IN ACTION
    Q & A
    SESSION
    AGENDA
    ?

    View full-size slide

  4. “LEGACY” WEB
    POLLING LONG-POLLING STEAMING
    OPTIONS FOR “REALTIME” WEB
    Browser sends a request to the
    server and the server keeps the
    request open for a set period
    of time. If a notification is
    received within that period, a
    response containing the
    message is sent to the client. If
    a notification is not received
    within the set time period, the
    server sends a response to
    terminate the open request.
    Browser sends a complete
    request, but the server sends
    and maintains an open
    response that is continuously
    updated and kept open
    indefinitely (or for a set period
    of time)
    Browser sends HTTP requests at
    regular intervals and
    immediately receives a
    response. However, real- time
    data is often not that
    predictable, making
    unnecessary requests
    inevitable and as a result,
    many connections are opened
    and closed needlessly in low-
    message-rate situations

    View full-size slide

  5. WHAT IS WEBSOCKET
    “Reducing kilobytes of data to 2 bytes... and reducing latency from 150ms to 50
    ms is far more than marginal. In fact, these two factors alone are enough to make
    WebSocket seriously interesting...”
    www.ietf.org/mail-archive/web/hybi/current/msg00784.html

    View full-size slide

  6. WEB SOCKET
    STANDARD PROTOCOL CLIENT-SIDE API SERVER-SIDE API
    WHAT IS WEBSOCKETS?
    HTML5 specification
    introduces WebSocket
    client side object. No
    plugin required.
    True real-time server
    updates. Expected large
    penetration in Java
    world with upcoming
    JavaEE 7 spec and
    JSR-356
    Websocket is a
    standardized technology
    (described in RFC6455)
    to support low-overhead
    bidirectional traffic from
    your Web browser.

    View full-size slide

  7. 1 2 3 4
    SEND
    UPGRADE
    REQUEST
    RECEIVE
    UPGRADE
    RESPONSE
    CHANGE
    READYSTATE
    TO OPEN
    LISTEN
    MESSAGE
    EVENT
    WEBSOCKET HANDSHAKE
    To Start full-duplex communication client should send
    UPGRADE request

    View full-size slide

  8. DEMO
    HANDSHAKE
    DEMO

    View full-size slide

  9. WEBSOCKET INTERFACE
    [Constructor(DOMString  url,  optional  (DOMString  or  DOMString[])  protocols)]
    interface  WebSocket  :  EventTarget  {
       readonly  attribute  DOMString  url;
       //  ready  state
       const  unsigned  short  CONNECTING  =  0;
       const  unsigned  short  OPEN  =  1;
       const  unsigned  short  CLOSING  =  2;
       const  unsigned  short  CLOSED  =  3;
       readonly  attribute  unsigned  short  readyState;
       readonly  attribute  unsigned  long  bufferedAmount;
       //  networking
       [TreatNonCallableAsNull]  attribute  Function?  onopen;
       [TreatNonCallableAsNull]  attribute  Function?  onerror;
       [TreatNonCallableAsNull]  attribute  Function?  onclose;
       readonly  attribute  DOMString  extensions;
       readonly  attribute  DOMString  protocol;
       void  close([Clamp]  optional  unsigned  short  code,  optional  DOMString  reason);
       //  messaging
       [TreatNonCallableAsNull]  attribute  Function?  onmessage;
                         attribute  DOMString  binaryType;
       void  send(DOMString  data);
       void  send(ArrayBufferView  data);
       void  send(Blob  data);
    };

    View full-size slide

  10. CLIENT-SIDE WEBSOCKET API
    var  ws;
    if  (window.WebSocket)  {
           output("WebSocket  supported  in  your  browser");
           ws  =  new  WebSocket("ws://www.websockets.org");
           //  Set  event  handlers.
           ws.onopen  =  function  ()  {
                   output("onopen");
           };
           ws.onmessage  =  function  (e)  {
                   //  e.data  contains  received  string.
                   output("echo  from  server  :  "  +  e.data);
           };
           ws.onclose  =  function  ()  {
                   output("onclose");
           };
           ws.onerror  =  function  ()  {
                   output("onerror");
           };
    }
    else  {output("WebSocket  not  supported  in  your  browser");}

    View full-size slide

  11. JAVA EE 7 SERVER-SIDE API
    package  org.javaee.glassfishwebsocket;
    import  org.glassfish.websocket.api.annotations.WebSocket;
    import  org.glassfish.websocket.api.annotations.WebSocketMessage;
    @WebSocket(path  =  "/echo")
    public  class  EchoBean  {
           @WebSocketMessage
           public  String  echo(String  message)  {
                   System.out.println("#####################  Message  received");
                   return  message  +  "  (from  your  server)";
           }
    }

    View full-size slide

  12. TOMCAT 7.0.29 SERVER-SIDE API
    SHOW
    THE
    CODE
    Not enough room for code in this slide ;-)

    View full-size slide

  13. PROGRAMMING WEBSOCKETS
    Client-side frameworks
    ✦jquery.socket.js
    ✦https://github.com/flowersinthesand/jquery-socket/wiki
    ✦atmosphere.js
    ✦https://github.com/Atmosphere/atmosphere/wiki/jQuery.atmosphere.js-API
    ✦socket.io

    View full-size slide

  14. WEBSOCKET SUPPORT
    JAVA-based Web servers with native support.
    The WebServer has API for WebSocket
    ✦Netty 3.3.x
    ✦Jetty 7.x, 8.x
    ✦Glassfish 3.1.2
    ✦Tomcat 7.0.27

    View full-size slide

  15. WHAT SHOULD WE DO?
    WE CAN DO IT!

    View full-size slide

  16. WHAT IS ATMOSPHERE
    Atmosphere
    https://github.com/Atmosphere/atmosphere/
    ✦portable framework for
    ✦long-polling
    ✦Streaming
    ✦Server-Send Events
    ✦WebSockets
    ✦can auto select best transport
    ✦abstracting from actual underlying container
    mechanism

    View full-size slide

  17. ?
    THINKING ABOUT USE CASES

    View full-size slide

  18. OUR CLIENTS
    USE CASE
    WebSockets really shine with following applications:
    ✦Live trading/sports ticker
    ✦Controlling medical equipment over the web
    ✦Chat applications
    ✦Multiplayer online games
    ✦Realtime updating social streams

    View full-size slide

  19. BUNCH OF USEFUL LINKS
    ✦http://www.w3.org/TR/websockets/ MUST!
    ✦http://tools.ietf.org/html/rfc6455 MUST!
    ✦http://tomcat.apache.org/tomcat-7.0-doc/web-socket-howto.html
    ✦http://websocket-sdk.java.net/Introduction.html
    ✦https://github.com/Atmosphere/atmosphere/wiki/Supported-
    WebServers-and-Browsers
    ✦http://autobahn.ws/testsuite

    View full-size slide

  20. Q AND A
    Q&
    A
    Put your questions

    View full-size slide

  21. WWW.FARATASYSTEMS.COM
    [email protected]
    CONTACT US

    View full-size slide

  22. TWITTER
    WWW.TWITTER.COM/GAMUSSA
    GITHUB
    WWW.GITHUB.COM/GAMUSSA
    FIND ME

    View full-size slide

  23. THANK YOU
    FOR YOUR ATTENTION
    HTTP://WWW.FARATASYSTEMS.COM
    THANK YOU

    View full-size slide