Matthias Wessendorf on WebSocket

29.06.11 1 1! Copyright © 2011 – Kaazing Corporation 2!
Copyright © 2011 – Kaazing Corporation Think BIG, Really BIG! Building next-generation Web Apps with WebSocket and HTML5 3! Copyright © 2011 – Kaazing Corporation Matthias Weßendorf •  Kaazing Corporation (http://kaazing.com) •  Kaazing WebSocket Gateway •  Apache Software Foundation •  Speaker, Author, Blogger: http://matthiaswessendorf.wordpress.com •  Twitter: @mwessendorf 4! Copyright © 2011 – Kaazing Corporation •  HTML 5 •  Overview •  Real Time (Web) •  Introduction •  WebSocket •  Introduction •  Handshake and Client API •  Remix! •  WebSocket and other (HTML5) APIs Agenda 5! Copyright © 2011 – Kaazing Corporation •  HTML 5 •  Overview •  Real Time (Web) •  Introduction •  WebSocket •  Introduction •  Handshake and Client API •  Remix! •  WebSocket and other (HTML5) APIs Agenda 6! Copyright © 2011 – Kaazing Corporation •  HTML5 is brand new •  Indeed, it isn’t finished yet! •  History •  first draft: 1993 •  HTML 4.0.1: 1999 •  2004: “Bringing the web to the next level” •  Web 2.0 started around this time •  HTML5 (by WHATWG) •  2006: W3C got involved – first HTML5 draft in 2008 •  2014: W3C recommendation ! •  HTML5 is “done” by: •  WHATWG •  W3C •  IETF HTML5 – Facts!

29.06.11 2 7! Copyright © 2011 – Kaazing Corporation Moments
in HTML! HTML5 8! Copyright © 2011 – Kaazing Corporation Moments in HTML! HTML5 9! Copyright © 2011 – Kaazing Corporation Moments in HTML! HTML5 10! Copyright © 2011 – Kaazing Corporation •  Use <header>, not <div id=“header”>* •  User is king: •  id=myDiv VS id=“myDiv” VS ID=myDiv •  Simplification •  Simple is better. Simplify where possible •  Doctype: <!DOCTYPE html> •  Accessibility •  No Browser Plugins! •  Plugins can be blocked ! •  Check you phone!! HTML5: it’s all about the user 11! Copyright © 2011 – Kaazing Corporation •  Canvas •  Geolocation •  Server-Sent events •  SVG •  WebSocket •  WebWorker •  XHR Level2 •  Web Storage •  ! HTML5 – A few APIs* 12! Copyright © 2011 – Kaazing Corporation •  Simple Demo! •  Advanced Demo: (thanks to Gerrit Grunwald (@hansolo_)) Canvas – Was kann das?

29.06.11 3 13! Copyright © 2011 – Kaazing Corporation • 
Mashup = Geolocation + Google Maps Geolocation + Google Maps 14! Copyright © 2011 – Kaazing Corporation •  HTML 5 •  Overview •  Real Time (Web) •  Introduction •  WebSocket •  Introduction •  Handshake and Client API •  Remix! •  WebSocket and other (HTML5) APIs Agenda 15! Copyright © 2011 – Kaazing Corporation •  Every application has a hook! •  Collaborative tooling •  Share / edit documents •  chat •  Gaming (web based games) •  Streaming data (! football / sports) •  Trading Systems (! auctions) •  Financial apps (! market data) •  Social Network app •  (Web-based) Support Systems •  Monitoring (! server console) What is your use-case? Real Time (Web) 16! Copyright © 2011 – Kaazing Corporation •  Collaborative Tooling: Drop the built-in latency Push the data...! 17! Copyright © 2011 – Kaazing Corporation Think different ! 18! Copyright © 2011 – Kaazing Corporation Think different!

29.06.11 4 19! Copyright © 2011 – Kaazing Corporation Challenge!
“If we were not restricted by the traditional limitations of HTTP, what type of Web applications would we build?” 20! Copyright © 2011 – Kaazing Corporation •  Enter HTML5 WebSocket! Agenda 21! Copyright © 2011 – Kaazing Corporation ! is a bi-directional AND full-duplex communication STANDARD for next-generation web applications (“TCP for the web”) WebSocket ! 22! Copyright © 2011 – Kaazing Corporation Build the future! ! and HTML5 APIs 23! Copyright © 2011 – Kaazing Corporation •  Enables web pages to communicate (in full-duplex mode) with a remote host •  Traverses firewalls, proxies, and routers seamlessly •  Leverages Cross-Origin Resource Sharing (CORS) •  Shares port with existing HTTP content (80, 443) •  Work with existing Authentication and Authorization frameworks (e.g. Kerberos) •  Extend any TCP/UDP based protocol!!! •  AMQP •  XMPP/STOMP/JMS •  VNC •  ! WebSocket is full-duplex! 24! Copyright © 2011 – Kaazing Corporation •  Canvas and WebSocket Demo: HTML5 mix!

29.06.11 5 25! Copyright © 2011 – Kaazing Corporation HTTP
is Half Duplex 26! Copyright © 2011 – Kaazing Corporation Half Duplex Communication is Primitive 27! Copyright © 2011 – Kaazing Corporation •  What are some common names for Ajax Polling implementations? Question for the Audience! 28! Copyright © 2011 – Kaazing Corporation WebSocket HTTP Header Overhead 29! Copyright © 2011 – Kaazing Corporation Confidential WebSockets delivers substantially higher performance with significantly less bandwidth !"###$ !#"###$ !##"###$ %&'()*+,-&.$$+/(0-%*++&1$ 2$34$.5*&0+-$ HTTP traffic* WebSockets Traffic* Google 788 bytes, plus 1 byte 1 byte, plus 1 byte Yahoo 1737 bytes, plus 1 byte 1 byte, plus 1 byte * Header information for each character entered into search bar HTTP WebSockets HTTP vs. WebSockets 30! Copyright © 2011 – Kaazing Corporation From Complexity! (spell it with the letters C,O,M,E,T!) ! to simplicity! Enter WebSocket!

Client API (W3C) •  (simple) JavaScript API •  Network Protocol (IETF) •  Under development •  draft-hixie-thewebsocketprotocol-76 •  ... •  draft-ietf-hybi-thewebsocketprotocol-07* WebSocket Standard 32! Copyright © 2011 – Kaazing Corporation WS Protocol / Handshake !"#$%&'()$*##+%,-,$ *./)0$/12312-14(5671-&.5$ 8692(:10$websocket$ ;.<<1&=.<0$8692(:1$ >1&?WebSocket?@1A0$:!'7B*C'DEF/G>FHDIJKGLMM$ >1&?WebSocket?N2O9O<0$'P60%%14(5671-&.5$ >1&?WebSocket?+2.).&.70$&'()Q$/H612&'()$ >1&?WebSocket?R12/O.<0$S$ $ $ $ $*##+%,-,$,T,$>UO)&'O<9$+2.).&.7/$ $ $ $8692(:10$websocket$ $ $ $;.<<1&=.<0$8692(:1$ $ $ $>1&?WebSocket?V&&16)0$/W6+XYFO#4(LZ[\!]]'G^D@_4N.M$ $ $ $>1&?WebSocket?+2.).&.70$&'()$ 33! Copyright © 2011 – Kaazing Corporation •  Connection established by upgrading from the HTTP protocol to the WebSocket protocol using the same TCP connection •  Once upgraded, WebSocket data frames can be sent back and forth between the client and the server in full-duplex mode •  Frames can be sent full-duplex, in both directions at the same time •  Each frame of data: •  Starts with a 0x00 byte and ends with a 0xFF byte •  Contains UTF-8 data in between: \0x00Hello, WebSocket\0xff •  There is no defined maximum size, but JavaScript does not allow >4GB of data) WebSocket Traffic 34! Copyright © 2011 – Kaazing Corporation WebSocket Less Overhead... A lot less!!! \0x00Hello, WebSocket\0xff 35! Copyright © 2011 – Kaazing Corporation WebSocket Client API // Create new WebSocket var mySocket = new WebSocket("ws://echo.websockets.org"); // Attach listeners mySocket.onmessage = function(evt) { doSomeFancyDhtml(evt.data); }; mySocket.onopen = function(evt) {...}; mySocket.onclose = function(evt) {...}; mySocket.onerror = function(evt) {...}; JavaScript 36! Copyright © 2011 – Kaazing Corporation WebSocket Client API // Send data... mySocket.send(”HTML5 WebSocket rocks! "); // Close WebSocket mySocket.close(); JavaScript

UDP broadcaster meets WebSocket! DEMO 38! Copyright © 2011 – Kaazing Corporation •  Browsers: •  Firefox 4 (will be enabled in FF5) •  Chrome/Chromium •  Safari 5 & iOS4 •  IE (there is a plugin) •  To test support visit: http://websocket.org •  Servers: •  Kaazing WebSocket Gateway •  Node.js •  mod_pywebsocket •  Netty •  Resin WebSocket Support 39! Copyright © 2011 – Kaazing Corporation •  It is NOT just a better Ajax or XHR, nor was it designed to be! •  WebSocket was NOT designed to be a one- size-fits-all replacement for HTTP! WebSocket Misconception 40! Copyright © 2011 – Kaazing Corporation •  When you build Desktop applications (client server solutions) do you develop your application using raw TCP sockets? •  Or, are you using higher level protocols and APIs, such as XMPP, JMS, JDBC? WebSocket Misconception 41! Copyright © 2011 – Kaazing Corporation You should think of WebSocket the same way: •  Extend client-server protocols to the Web •  XMPP, Jabber •  Pub/Sub (Stomp/AMQP) •  Gaming protocols •  Any TCP-based protocol Beyond WebSockets 42! Copyright © 2011 – Kaazing Corporation Using Stomp/JMS API ... var stompConnectionFactory = new StompConnectionFactory( "ws://localhost:8000/jms"); var connectionFuture = stompConnectionFactory.createConnection (function () { if (!connectionFuture.exception) { connection = connectionFuture.getValue(); connection.setExceptionListener(handleException); session = connection.createSession(false, Session.AUTO_ACKNOWLEDGE); topic = session.createTopic("/topic/destination"); // creating some consumers! var consumer1 = session.createConsumer(topic); consumer1.setMessageListener(handleMessageCallback); connection.start(someCallback); } .... }); JavaScript

29.06.11 8 43! Copyright © 2011 – Kaazing Corporation Using
Stomp/JMS API function handleMessageCallack(message) { // did Apache ActiveMQ send us a JMS TextMessage? if (message instanceof TextMessage) { var body = message.getText(); // do more stuff... } } JavaScript 44! Copyright © 2011 – Kaazing Corporation WebSocket Architecture 45! Copyright © 2011 – Kaazing Corporation •  HTML 5 •  Overview •  Real Time (Web) •  Introduction •  WebSocket •  Introduction •  Handshake and Client API •  Remix! •  WebSocket and other (HTML5) APIs Agenda 46! Copyright © 2011 – Kaazing Corporation •  A real-time tracker application •  Logistics •  Sports (running) •  Using Geolocation API and WebSocket Geolocation and WebSocket 47! Copyright © 2011 – Kaazing Corporation Geolocation and WebSocket // register ‘update’ handler geolocation.watchPosition(updateLocation, handleError); function updateLocation(pos) { // get the current position var lat = pos.coords.latitude; var lon = pos.coords.longitude; var data = JSON.stringify([userId, lat, long]); // tell the server where I am ... myWebSocket.send(data); } // onmessage handler can be used to observe other peers JavaScript 48! Copyright © 2011 – Kaazing Corporation •  Stomp/JMS over WebSocket •  Apache ActiveMQ (or any JMS broker, e.g. Tibco EMS) •  Stock Ticker: •  HTML Table •  DHTML •  You can use jQuery, Dojo, etc!. DHTML and WebSocket

29.06.11 9 49! Copyright © 2011 – Kaazing Corporation 50!
Copyright © 2011 – Kaazing Corporation THANK YOU! http://kaazing.me http://kaazing.com/download.html 51! Copyright © 2011 – Kaazing Corporation The End

Matthias Wessendorf on WebSocket

Matthias Wessendorf on WebSocket

Enterprise Java User Group Austria

More Decks by Enterprise Java User Group Austria

Other Decks in Technology

Featured

Transcript

29.06.11 1 1! Copyright © 2011 – Kaazing Corporation 2!

29.06.11 2 7! Copyright © 2011 – Kaazing Corporation Moments

29.06.11 3 13! Copyright © 2011 – Kaazing Corporation •

29.06.11 4 19! Copyright © 2011 – Kaazing Corporation Challenge!

29.06.11 5 25! Copyright © 2011 – Kaazing Corporation HTTP

29.06.11 6 31! Copyright © 2011 – Kaazing Corporation •

29.06.11 7 37! Copyright © 2011 – Kaazing Corporation •

29.06.11 8 43! Copyright © 2011 – Kaazing Corporation Using

29.06.11 9 49! Copyright © 2011 – Kaazing Corporation 50!