Think BIG, Really BIG!<br />Building next-generation Web Apps with<br />WebSocket and HTML5<br />
Matthias Weßendorf<br /><ul><li>Kaazing Corporation (http://kaazing.com)
Kaazing WebSocketGateway
Apache Software Foundation
Speaker, Author, Blogger:</li></ul>http://matthiaswessendorf.wordpress.com<br /><ul><li>Twitter: @mwessendorf</li></li></u...
Overview
Real Time (Web)
Introduction
WebSocket
Introduction
Handshake and Client API
Remix!
WebSocket and other (HTML5) APIs</li></ul>Agenda<br />
<ul><li>HTML 5
Overview
Real Time (Web)
Introduction
WebSocket
Introduction
Handshake and Client API
Remix!
WebSocket and other (HTML5) APIs</li></ul>Agenda<br />
<ul><li>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</li></ul>HTML5 – Facts!<br />
Moments in HTML…<br />HTML5<br />
Moments in HTML…<br />HTML5<br />
<ul><li>Use <header>, not <div id=“header”>*
User is king:
id=myDivVS 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…!</li></ul>HTML5: it’s all about the user<br />
<ul><li>Canvas
Upcoming SlideShare
Loading in...5
×

Building next-generation Web Apps with WebSocket and HTML5

8,758

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 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,758
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide
  • Do we mention our valuation at this point or at all?
  • Building next-generation Web Apps with WebSocket and HTML5

    1. 1.
    2. 2. Think BIG, Really BIG!<br />Building next-generation Web Apps with<br />WebSocket and HTML5<br />
    3. 3. Matthias Weßendorf<br /><ul><li>Kaazing Corporation (http://kaazing.com)
    4. 4. Kaazing WebSocketGateway
    5. 5. Apache Software Foundation
    6. 6. Speaker, Author, Blogger:</li></ul>http://matthiaswessendorf.wordpress.com<br /><ul><li>Twitter: @mwessendorf</li></li></ul><li><ul><li>HTML 5
    7. 7. Overview
    8. 8. Real Time (Web)
    9. 9. Introduction
    10. 10. WebSocket
    11. 11. Introduction
    12. 12. Handshake and Client API
    13. 13. Remix!
    14. 14. WebSocket and other (HTML5) APIs</li></ul>Agenda<br />
    15. 15. <ul><li>HTML 5
    16. 16. Overview
    17. 17. Real Time (Web)
    18. 18. Introduction
    19. 19. WebSocket
    20. 20. Introduction
    21. 21. Handshake and Client API
    22. 22. Remix!
    23. 23. WebSocket and other (HTML5) APIs</li></ul>Agenda<br />
    24. 24. <ul><li>HTML5 is brand new
    25. 25. Indeed, it isn’t finished yet!
    26. 26. History
    27. 27. first draft: 1993
    28. 28. HTML 4.0.1: 1999
    29. 29. 2004: “Bringing the web to the next level”
    30. 30. Web 2.0 started around this time
    31. 31. HTML5 (by WHATWG)
    32. 32. 2006: W3C got involved – first HTML5 draft in 2008
    33. 33. 2014: W3C recommendation …
    34. 34. HTML5 is “done” by:
    35. 35. WHATWG
    36. 36. W3C
    37. 37. IETF</li></ul>HTML5 – Facts!<br />
    38. 38. Moments in HTML…<br />HTML5<br />
    39. 39. Moments in HTML…<br />HTML5<br />
    40. 40. <ul><li>Use <header>, not <div id=“header”>*
    41. 41. User is king:
    42. 42. id=myDivVS id=“myDiv” VS ID=myDiv
    43. 43. Simplification
    44. 44. Simple is better. Simplify where possible
    45. 45. Doctype: <!DOCTYPE html>
    46. 46. Accessibility
    47. 47. No Browser Plugins…
    48. 48. Plugins can be blocked …
    49. 49. Check you phone…!</li></ul>HTML5: it’s all about the user<br />
    50. 50. <ul><li>Canvas
    51. 51. Geolocation
    52. 52. Server-Sent events
    53. 53. SVG
    54. 54. WebSocket
    55. 55. WebWorker
    56. 56. XHR Level2
    57. 57. Web Storage
    58. 58. …</li></ul>HTML5 – A few APIs*<br />
    59. 59. <ul><li>Simple Demo…
    60. 60. Advanced Demo:</li></ul>(thanks to GerritGrunwald (@hansolo_))<br />Canvas – Was kann das?<br />
    61. 61. <ul><li>Mashup = Geolocation + Google Maps</li></ul>Geolocation + Google Maps<br />
    62. 62. <ul><li>HTML 5
    63. 63. Overview
    64. 64. Real Time (Web)
    65. 65. Introduction
    66. 66. WebSocket
    67. 67. Introduction
    68. 68. Handshake and Client API
    69. 69. Remix!
    70. 70. WebSocket and other (HTML5) APIs</li></ul>Agenda<br />
    71. 71. <ul><li>Every application has a hook…
    72. 72. Collaborative tooling
    73. 73. Share / edit documents
    74. 74. chat
    75. 75. Streaming data ( football / sports)
    76. 76. Trading Systems ( auctions)
    77. 77. Financial apps ( market data)
    78. 78. Social Network app
    79. 79. (Web-based) Support Systems
    80. 80. Monitoring ( server console)</li></ul> What is your use-case?<br />Real Time (Web)<br />
    81. 81. <ul><li>Collaborative Tooling:</li></ul>Drop the built-in latency<br />Push thedata...!<br />
    82. 82. Think different …<br />
    83. 83. Think different!<br />
    84. 84. Challenge…<br />“If we were not restricted by the traditional limitations of HTTP, what type of Web applications would we build?”<br />
    85. 85. <ul><li>Enter HTML5 WebSocket!</li></ul>Agenda<br />
    86. 86. … is a bi-directional AND full-duplex<br /> communication STANDARD<br /> for next-generation web applications<br /> (“TCP for the web”)<br />WebSocket …<br />
    87. 87. Build the future!<br />… and HTML5 APIs<br />
    88. 88. <ul><li>Enables web pages to communicate (in full-duplex mode) with a remote host
    89. 89. Traverses firewalls, proxies, and routers seamlessly
    90. 90. Leverages Cross-Origin Resource Sharing (CORS)
    91. 91. Shares port with existing HTTP content (80, 443)
    92. 92. Work with existing Authentication and Authorization frameworks(e.g. Kerberos)
    93. 93. Extend any TCP/UDP based protocol!!!
    94. 94. AMQP
    95. 95. XMPP/STOMP/JMS
    96. 96. VNC
    97. 97. …</li></ul>WebSocket is full-duplex!<br />
    98. 98. <ul><li>Canvas and WebSocket</li></ul>Demo: HTML5 mix!<br />
    99. 99. HTTP is Half Duplex<br />
    100. 100. Half Duplex Communication is Primitive<br />
    101. 101. <ul><li>What are some common names forAjax Polling implementations?</li></ul>Question for the Audience!<br />
    102. 102. WebSocket<br />HTTP Header Overhead<br />
    103. 103. HTTP vs. WebSockets<br />WebSockets delivers substantially higher performance with significantly less bandwidth<br />MEGABIT/SEC TRANSMITTED<br />HTTP<br />WebSockets<br />1,000<br />10,000<br />100,000<br /># OF CLIENTS<br /> HTTP traffic* WebSockets Traffic*<br />Google 788 bytes, plus 1 byte 1 byte, plus 1 byte<br />Yahoo 1737 bytes, plus 1 byte 1 byte, plus 1 byte<br />* Header information for each character entered into search bar<br />Confidential<br />
    104. 104. From Complexity…<br />(spell it with the letters C,O,M,E,T!)<br /> … to simplicity!<br />Enter WebSocket!<br />
    105. 105. <ul><li>Client API (W3C)
    106. 106. (simple) JavaScript API
    107. 107. Network Protocol (IETF)
    108. 108. Under development
    109. 109. draft-hixie-thewebsocketprotocol-76
    110. 110. ...
    111. 111. draft-ietf-hybi-thewebsocketprotocol-07*</li></ul>WebSocket Standard<br />
    112. 112. WS Protocol / Handshake<br />GET /chat HTTP/1.1<br />Host: server.example.com<br />Upgrade: websocket<br />Connection: Upgrade<br />Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==<br />Sec-WebSocket-Origin: http://example.com<br />Sec-WebSocket-Protocol: chat, superchat<br />Sec-WebSocket-Version: 7<br /> HTTP/1.1 101 Switching Protocols<br />Upgrade: websocket<br />Connection: Upgrade<br />Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=<br />Sec-WebSocket-Protocol: chat<br />
    113. 113. <ul><li>Connection established by upgrading from the HTTP protocol to the WebSocket protocol using the same TCP connection
    114. 114. Once upgraded, WebSocket data frames can be sent back and forth between the client and the server in full-duplex mode
    115. 115. Frames can be sent full-duplex, in both directions at the same time
    116. 116. Each frame of data:
    117. 117. Starts with a 0x00 byte and ends with a 0xFF byte
    118. 118. Contains UTF-8 data in between:0x00Hello, WebSocket0xff
    119. 119. There is no defined maximum size, but JavaScript  does not allow >4GB of data)</li></ul>WebSocket Traffic<br />
    120. 120. WebSocket<br />Less <br />Overhead...<br />A lot less!!!<br />0x00Hello, WebSocket0xff<br />
    121. 121. WebSocket Client API<br />JavaScript<br />// Create new WebSocket<br />varmySocket= new WebSocket("ws://echo.websockets.org");<br />// Attach listeners<br />mySocket.onmessage = function(evt) {<br />    doSomeFancyDhtml(evt.data);<br />};<br />mySocket.onopen = function(evt) {...};<br />mySocket.onclose = function(evt) {...};<br />mySocket.onerror = function(evt) {...};<br />
    122. 122. WebSocket Client API<br />JavaScript<br />// Send data...<br />mySocket.send(”HTML5 WebSocket rocks! ");<br />// Close WebSocket<br />mySocket.close();<br />
    123. 123. <ul><li>UDP broadcaster meets WebSocket!</li></ul>DEMO<br />
    124. 124. <ul><li>Browsers:
    125. 125. Firefox 4 (will be enabled in FF5)
    126. 126. Chrome/Chromium
    127. 127. Safari 5 & iOS4
    128. 128. IE (there is a plugin)
    129. 129. To test support visit:http://websocket.org
    130. 130. Servers:
    131. 131. Kaazing WebSocket Gateway
    132. 132. Node.js
    133. 133. mod_pywebsocket
    134. 134. Netty
    135. 135. Resin</li></ul>WebSocket Support<br />
    136. 136. <ul><li>It is NOT just a better Ajax or XHR, nor was it designed to be!
    137. 137. WebSocket was NOT designed to be a one-size-fits-all replacement for HTTP!</li></ul>WebSocket Misconception<br />
    138. 138. <ul><li>When you build Desktop applications (client server solutions) do you develop your application using raw TCP sockets?
    139. 139. Or, are you using higher level protocols and APIs, such as XMPP, JMS, JDBC?</li></ul>WebSocket Misconception<br />
    140. 140. You should think of WebSocket the same way:<br /><ul><li>Extend client-server protocols to the Web
    141. 141. XMPP, Jabber
    142. 142. Pub/Sub (Stomp/AMQP)
    143. 143. Gaming protocols
    144. 144. Any TCP-based protocol</li></ul>Beyond WebSockets<br />
    145. 145. Using Stomp/JMS API<br />JavaScript<br />...<br />varstompConnectionFactory = new StompConnectionFactory( "ws://localhost:8000/jms");<br />varconnectionFuture = stompConnectionFactory.createConnection(function () {<br /> if (!connectionFuture.exception) {<br /> connection = connectionFuture.getValue();<br />connection.setExceptionListener(handleException);<br />session = connection.createSession(false, Session.AUTO_ACKNOWLEDGE);<br /> topic = session.createTopic("/topic/destination");<br /> // creating some consumers!<br />var consumer1 = session.createConsumer(topic);<br /> consumer1.setMessageListener(handleMessageCallback);<br />connection.start(someCallback);<br /> }<br />....<br />});<br />
    146. 146. Using Stomp/JMS API<br />JavaScript<br />function handleMessageCallack(message) {<br />// did Apache ActiveMQ send us a JMS TextMessage?<br /> if (message instanceofTextMessage) {<br />var body = message.getText();<br /> // do more stuff...<br /> }<br />}<br />
    147. 147. WebSocket Architecture<br />
    148. 148. <ul><li>HTML 5
    149. 149. Overview
    150. 150. Real Time (Web)
    151. 151. Introduction
    152. 152. WebSocket
    153. 153. Introduction
    154. 154. Handshake and Client API
    155. 155. Remix!
    156. 156. WebSocket and other (HTML5) APIs</li></ul>Agenda<br />
    157. 157. <ul><li>A real-time tracker application
    158. 158. Logistics
    159. 159. Sports (running)
    160. 160. Using Geolocation API and WebSocket</li></ul>Geolocation and WebSocket<br />
    161. 161. Geolocation and WebSocket<br />JavaScript<br />// register ‘update’ handler<br />geolocation.watchPosition(updateLocation, handleError);<br />function updateLocation(pos) {<br />// get the current position<br />varlat = pos.coords.latitude;<br />varlon = pos.coords.longitude;<br />var data = JSON.stringify([userId, lat, long]);<br /> // tell the server where I am ...<br />myWebSocket.send(data);<br />}<br />// onmessage handler can be used to observe other peers<br />
    162. 162. <ul><li>Stomp/JMS over WebSocket
    163. 163. Apache ActiveMQ (or any JMS broker, e.g. Tibco EMS)
    164. 164. Stock Ticker:
    165. 165. HTML Table
    166. 166. DHTML
    167. 167. You can use jQuery, Dojo, etc….</li></ul>DHTML and WebSocket<br />
    168. 168.
    169. 169. THANK YOU! <br />http://kaazing.me<br />http://kaazing.com/download.html<br />
    170. 170. The End<br />

    ×