Your SlideShare is downloading. ×
0
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Building next-generation Web Apps with WebSocket and HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building next-generation Web Apps with WebSocket and HTML5

8,665

Published on

Für die Realisierung von "Echtzeit Web" wurden in der Vergangenheit diverse Hacks (Comet oder Bayeux) genutzt. Mit WebSocket haben Entwickler nun einen echten Standard in der Hand, der ihnen …

Für die Realisierung von "Echtzeit Web" wurden in der Vergangenheit diverse Hacks (Comet oder Bayeux) genutzt. Mit WebSocket haben Entwickler nun einen echten Standard in der Hand, der ihnen bidirektionale Kommunikation über eine TCP-Verbindung bietet. Die Session stellt WebSockets und die praktische Nutzung im Zusammenhang mit anderen HTML5-APIs vor.

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,665
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Do we mention our valuation at this point or at all?
  • Transcript

    • 1.
    • 2. Think BIG, Really BIG!
      Building next-generation Web Apps with
      WebSocket and HTML5
    • 3. Matthias Weßendorf
      • Kaazing Corporation (http://kaazing.com)
      • 4. Kaazing WebSocketGateway
      • 5. Apache Software Foundation
      • 6. Speaker, Author, Blogger:
      http://matthiaswessendorf.wordpress.com
      • Twitter: @mwessendorf
    • Agenda
    • 15. Agenda
    • 24.
      • HTML5 is brand new
      • 25. Indeed, it isn’t finished yet!
      • 26. History
      • 27. first draft: 1993
      • 28. HTML 4.0.1: 1999
      • 29. 2004: “Bringing the web to the next level”
      • 30. Web 2.0 started around this time
      • 31. HTML5 (by WHATWG)
      • 32. 2006: W3C got involved – first HTML5 draft in 2008
      • 33. 2014: W3C recommendation …
      • 34. HTML5 is “done” by:
      • 35. WHATWG
      • 36. W3C
      • 37. IETF
      HTML5 – Facts!
    • 38. Moments in HTML…
      HTML5
    • 39. Moments in HTML…
      HTML5
    • 40.
      • Use <header>, not <div id=“header”>*
      • 41. User is king:
      • 42. id=myDivVS id=“myDiv” VS ID=myDiv
      • 43. Simplification
      • 44. Simple is better. Simplify where possible
      • 45. Doctype: <!DOCTYPE html>
      • 46. Accessibility
      • 47. No Browser Plugins…
      • 48. Plugins can be blocked …
      • 49. Check you phone…!
      HTML5: it’s all about the user
    • 50. HTML5 – A few APIs*
    • 59.
      • Simple Demo…
      • 60. Advanced Demo:
      (thanks to GerritGrunwald (@hansolo_))
      Canvas – Was kann das?
    • 61.
      • Mashup = Geolocation + Google Maps
      Geolocation + Google Maps
    • 62. Agenda
    • 71.
      • Every application has a hook…
      • 72. Collaborative tooling
      • 73. Share / edit documents
      • 74. chat
      • 75. Streaming data ( football / sports)
      • 76. Trading Systems ( auctions)
      • 77. Financial apps ( market data)
      • 78. Social Network app
      • 79. (Web-based) Support Systems
      • 80. Monitoring ( server console)
      What is your use-case?
      Real Time (Web)
    • 81.
      • Collaborative Tooling:
      Drop the built-in latency
      Push thedata...!
    • 82. Think different …
    • 83. Think different!
    • 84. Challenge…
      “If we were not restricted by the traditional limitations of HTTP, what type of Web applications would we build?”
    • 85.
      • Enter HTML5 WebSocket!
      Agenda
    • 86. … is a bi-directional AND full-duplex
      communication STANDARD
      for next-generation web applications
      (“TCP for the web”)
      WebSocket …
    • 87. Build the future!
      … and HTML5 APIs
    • 88.
      • Enables web pages to communicate (in full-duplex mode) with a remote host
      • 89. Traverses firewalls, proxies, and routers seamlessly
      • 90. Leverages Cross-Origin Resource Sharing (CORS)
      • 91. Shares port with existing HTTP content (80, 443)
      • 92. Work with existing Authentication and Authorization frameworks(e.g. Kerberos)
      • 93. Extend any TCP/UDP based protocol!!!
      • 94. AMQP
      • 95. XMPP/STOMP/JMS
      • 96. VNC
      • 97.
      WebSocket is full-duplex!
    • 98.
      • Canvas and WebSocket
      Demo: HTML5 mix!
    • 99. HTTP is Half Duplex
    • 100. Half Duplex Communication is Primitive
    • 101.
      • What are some common names forAjax Polling implementations?
      Question for the Audience!
    • 102. WebSocket
      HTTP Header Overhead
    • 103. HTTP vs. WebSockets
      WebSockets delivers substantially higher performance with significantly less bandwidth
      MEGABIT/SEC TRANSMITTED
      HTTP
      WebSockets
      1,000
      10,000
      100,000
      # OF CLIENTS
      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
      Confidential
    • 104. From Complexity…
      (spell it with the letters C,O,M,E,T!)
      … to simplicity!
      Enter WebSocket!
    • 105.
      • Client API (W3C)
      • 106. (simple) JavaScript API
      • 107. Network Protocol (IETF)
      • 108. Under development
      • 109. draft-hixie-thewebsocketprotocol-76
      • 110. ...
      • 111. draft-ietf-hybi-thewebsocketprotocol-07*
      WebSocket Standard
    • 112. WS Protocol / Handshake
      GET /chat HTTP/1.1
      Host: server.example.com
      Upgrade: websocket
      Connection: Upgrade
      Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
      Sec-WebSocket-Origin: http://example.com
      Sec-WebSocket-Protocol: chat, superchat
      Sec-WebSocket-Version: 7
      HTTP/1.1 101 Switching Protocols
      Upgrade: websocket
      Connection: Upgrade
      Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
      Sec-WebSocket-Protocol: chat
    • 113.
      • Connection established by upgrading from the HTTP protocol to the WebSocket protocol using the same TCP connection
      • 114. Once upgraded, WebSocket data frames can be sent back and forth between the client and the server in full-duplex mode
      • 115. Frames can be sent full-duplex, in both directions at the same time
      • 116. Each frame of data:
      • 117. Starts with a 0x00 byte and ends with a 0xFF byte
      • 118. Contains UTF-8 data in between:0x00Hello, WebSocket0xff
      • 119. There is no defined maximum size, but JavaScript  does not allow >4GB of data)
      WebSocket Traffic
    • 120. WebSocket
      Less 
      Overhead...
      A lot less!!!
      0x00Hello, WebSocket0xff
    • 121. WebSocket Client API
      JavaScript
      // Create new WebSocket
      varmySocket= 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) {...};
    • 122. WebSocket Client API
      JavaScript
      // Send data...
      mySocket.send(”HTML5 WebSocket rocks! ");
      // Close WebSocket
      mySocket.close();
    • 123.
      • UDP broadcaster meets WebSocket!
      DEMO
    • 124. WebSocket Support
    • 136.
      • It is NOT just a better Ajax or XHR, nor was it designed to be!
      • 137. WebSocket was NOT designed to be a one-size-fits-all replacement for HTTP!
      WebSocket Misconception
    • 138.
      • When you build Desktop applications (client server solutions) do you develop your application using raw TCP sockets?
      • 139. Or, are you using higher level protocols and APIs, such as XMPP, JMS, JDBC?
      WebSocket Misconception
    • 140. You should think of WebSocket the same way:
      • Extend client-server protocols to the Web
      • 141. XMPP, Jabber
      • 142. Pub/Sub (Stomp/AMQP)
      • 143. Gaming protocols
      • 144. Any TCP-based protocol
      Beyond WebSockets
    • 145. Using Stomp/JMS API
      JavaScript
      ...
      varstompConnectionFactory = new StompConnectionFactory( "ws://localhost:8000/jms");
      varconnectionFuture = 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);
      }
      ....
      });
    • 146. Using Stomp/JMS API
      JavaScript
      function handleMessageCallack(message) {
      // did Apache ActiveMQ send us a JMS TextMessage?
      if (message instanceofTextMessage) {
      var body = message.getText();
      // do more stuff...
      }
      }
    • 147. WebSocket Architecture
    • 148. Agenda
    • 157.
      • A real-time tracker application
      • 158. Logistics
      • 159. Sports (running)
      • 160. Using Geolocation API and WebSocket
      Geolocation and WebSocket
    • 161. Geolocation and WebSocket
      JavaScript
      // register ‘update’ handler
      geolocation.watchPosition(updateLocation, handleError);
      function updateLocation(pos) {
      // get the current position
      varlat = pos.coords.latitude;
      varlon = 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
    • 162.
      • Stomp/JMS over WebSocket
      • 163. Apache ActiveMQ (or any JMS broker, e.g. Tibco EMS)
      • 164. Stock Ticker:
      • 165. HTML Table
      • 166. DHTML
      • 167. You can use jQuery, Dojo, etc….
      DHTML and WebSocket
    • 168.
    • 169. THANK YOU!
      http://kaazing.me
      http://kaazing.com/download.html
    • 170. The End

    ×