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,692

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,692
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!<br />Building next-generation Web Apps with<br />WebSocket and HTML5<br />
    • 3. Matthias Weßendorf<br /><ul><li>Kaazing Corporation (http://kaazing.com)
    • 4. Kaazing WebSocketGateway
    • 5. Apache Software Foundation
    • 6. Speaker, Author, Blogger:</li></ul>http://matthiaswessendorf.wordpress.com<br /><ul><li>Twitter: @mwessendorf</li></li></ul><li><ul><li>HTML 5
    • 7. Overview
    • 8. Real Time (Web)
    • 9. Introduction
    • 10. WebSocket
    • 11. Introduction
    • 12. Handshake and Client API
    • 13. Remix!
    • 14. WebSocket and other (HTML5) APIs</li></ul>Agenda<br />
    • 15. <ul><li>HTML 5
    • 16. Overview
    • 17. Real Time (Web)
    • 18. Introduction
    • 19. WebSocket
    • 20. Introduction
    • 21. Handshake and Client API
    • 22. Remix!
    • 23. WebSocket and other (HTML5) APIs</li></ul>Agenda<br />
    • 24. <ul><li>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</li></ul>HTML5 – Facts!<br />
    • 38. Moments in HTML…<br />HTML5<br />
    • 39. Moments in HTML…<br />HTML5<br />
    • 40. <ul><li>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…!</li></ul>HTML5: it’s all about the user<br />
    • 50. <ul><li>Canvas
    • 51. Geolocation
    • 52. Server-Sent events
    • 53. SVG
    • 54. WebSocket
    • 55. WebWorker
    • 56. XHR Level2
    • 57. Web Storage
    • 58. …</li></ul>HTML5 – A few APIs*<br />
    • 59. <ul><li>Simple Demo…
    • 60. Advanced Demo:</li></ul>(thanks to GerritGrunwald (@hansolo_))<br />Canvas – Was kann das?<br />
    • 61. <ul><li>Mashup = Geolocation + Google Maps</li></ul>Geolocation + Google Maps<br />
    • 62. <ul><li>HTML 5
    • 63. Overview
    • 64. Real Time (Web)
    • 65. Introduction
    • 66. WebSocket
    • 67. Introduction
    • 68. Handshake and Client API
    • 69. Remix!
    • 70. WebSocket and other (HTML5) APIs</li></ul>Agenda<br />
    • 71. <ul><li>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)</li></ul> What is your use-case?<br />Real Time (Web)<br />
    • 81. <ul><li>Collaborative Tooling:</li></ul>Drop the built-in latency<br />Push thedata...!<br />
    • 82. Think different …<br />
    • 83. Think different!<br />
    • 84. Challenge…<br />“If we were not restricted by the traditional limitations of HTTP, what type of Web applications would we build?”<br />
    • 85. <ul><li>Enter HTML5 WebSocket!</li></ul>Agenda<br />
    • 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. Build the future!<br />… and HTML5 APIs<br />
    • 88. <ul><li>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. …</li></ul>WebSocket is full-duplex!<br />
    • 98. <ul><li>Canvas and WebSocket</li></ul>Demo: HTML5 mix!<br />
    • 99. HTTP is Half Duplex<br />
    • 100. Half Duplex Communication is Primitive<br />
    • 101. <ul><li>What are some common names forAjax Polling implementations?</li></ul>Question for the Audience!<br />
    • 102. WebSocket<br />HTTP Header Overhead<br />
    • 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. From Complexity…<br />(spell it with the letters C,O,M,E,T!)<br /> … to simplicity!<br />Enter WebSocket!<br />
    • 105. <ul><li>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*</li></ul>WebSocket Standard<br />
    • 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. <ul><li>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)</li></ul>WebSocket Traffic<br />
    • 120. WebSocket<br />Less <br />Overhead...<br />A lot less!!!<br />0x00Hello, WebSocket0xff<br />
    • 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. WebSocket Client API<br />JavaScript<br />// Send data...<br />mySocket.send(”HTML5 WebSocket rocks! ");<br />// Close WebSocket<br />mySocket.close();<br />
    • 123. <ul><li>UDP broadcaster meets WebSocket!</li></ul>DEMO<br />
    • 124. <ul><li>Browsers:
    • 125. Firefox 4 (will be enabled in FF5)
    • 126. Chrome/Chromium
    • 127. Safari 5 & iOS4
    • 128. IE (there is a plugin)
    • 129. To test support visit:http://websocket.org
    • 130. Servers:
    • 131. Kaazing WebSocket Gateway
    • 132. Node.js
    • 133. mod_pywebsocket
    • 134. Netty
    • 135. Resin</li></ul>WebSocket Support<br />
    • 136. <ul><li>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!</li></ul>WebSocket Misconception<br />
    • 138. <ul><li>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?</li></ul>WebSocket Misconception<br />
    • 140. You should think of WebSocket the same way:<br /><ul><li>Extend client-server protocols to the Web
    • 141. XMPP, Jabber
    • 142. Pub/Sub (Stomp/AMQP)
    • 143. Gaming protocols
    • 144. Any TCP-based protocol</li></ul>Beyond WebSockets<br />
    • 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. 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. WebSocket Architecture<br />
    • 148. <ul><li>HTML 5
    • 149. Overview
    • 150. Real Time (Web)
    • 151. Introduction
    • 152. WebSocket
    • 153. Introduction
    • 154. Handshake and Client API
    • 155. Remix!
    • 156. WebSocket and other (HTML5) APIs</li></ul>Agenda<br />
    • 157. <ul><li>A real-time tracker application
    • 158. Logistics
    • 159. Sports (running)
    • 160. Using Geolocation API and WebSocket</li></ul>Geolocation and WebSocket<br />
    • 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. <ul><li>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….</li></ul>DHTML and WebSocket<br />
    • 168.
    • 169. THANK YOU! <br />http://kaazing.me<br />http://kaazing.com/download.html<br />
    • 170. The End<br />

    ×