Building real-time web apps with HTML5 WebSockets

1. PLAT-373C Building real-time web apps with HTML5 WebSockets Ravi Rao Principal Program Manager Lead Microsoft Corporation

2. Agenda • Users want the latest information in real-time, NOW! • WebSocket – Richness of sockets and reach of the web • Works everywhere – Standards, interoperability & partners You’ll leave with an understanding that • WebSockets enable the real-time web • WebSockets are standards based, interoperable and easy • WebSockets are everywhere - in the browser and beyond

3. Users want the latest information NOW!

4. The real-time web – it’s what users want! • Stock streamers – “Sell sellsell buy buysell buy” • Live scores – “winning winning tie losing won” • Airline location – “I am here now, I am here now” • Twitter search results – “search results, more search results” • New email – “You have mail” • Interactive games – “it’s your turn now” • Facebook wall updates – “new comment on my wall” Is the web ready?

5. The web is 20 years old Client Server • HTTP underlying protocol for web • Designed for requesting pages and getting responses • Open a web page • Download a document • Upload my video • Play a movie • Request – Response paradigm GET <page> 200 OK <page> GET <score> 200 OK <3-0> GET <score> GET <score> 304 Not modified 304 Not modified GET <score> 304 Not modified

6. The problem • Real-time web requires the server to communicate asynchronously with a client • HTTP is a request response protocol – server can only communicate with a client once per request received

7. demo Bing HTTP traffic drilldown

8. Workarounds exist and are in use today • Long polling • Multiple channels between client and server • Infinite POSTs/Chunked encoding In the end, these are all hacks on HTTP which complicate the programming model, and suffer from scale-out and latency related issues. In addition, interactions with load balancers can be problematic

9. HTTP is not adequate for the real-time web

10. WebSocket - an enabler for the real-time web

11. WebSockets - inception • Sockets are a full-duplex bi-directional protocol • It has the richness required for real-time web applications • Sockets however are not directly available to web developers • In addition, custom socket protocols are blocked by proxies • HTTP is a request response protocol layered on sockets • It has reach, since it traverses through HTTP proxies • But it’s not rich enough for real-time web scenarios • Real-time web needs richness of Sockets + reach of Web • WebSockets

12. WebSockets – Sockets for the Web • Full duplex bidirectional communication • Supports unsecured (TCP) and secured (SSL) modes • Traverses proxies and firewalls (especially when using SSL) • Ping/Pong messages to keep connection alive • Origin based security

13. Establishing a WebSocket Connection HTTP Client HTTPServer 1

14. Establishing a WebSocket Connection HTTP Client HTTPServer 1 HTTP Switching Protocols HTTP Client HTTPServer 2

15. Establishing a WebSocket Connection HTTP Client HTTPServer 1 HTTP “Switching Protocols” HTTP Client HTTPServer 2 • Binary or UTF8 Messages WebSocket WebSocket 3

16. demo WebSocket protocol drilldown with netmon

17. W3C WebSocketAPI • Really simple Javascript W3C WebSocket API • Primary methods + events • WebSocket(URL, [protocols]) – Create a connection • onOpen() – WebSocket opened • Send(data) – Send data (string, Blob or Arraybuffer) • onMessage() – Message received • onClose() – Close message received • onError() - Error

18. demo WebSocket API drilldown with “echo”

19. demo Stock ticker with WebSocket

20. WebSocket enables the real-time web • Full-duplex, bi-directional model allows server to communicate with the client anytime • Lightweight framing in the protocol makes it suitable for high performance applications • Simple API makes it easy to use!

21. Interoperability

22. Standards and Interoperability • Experiment HTML5 Labs • Create app • IE test drives • Validate • Test suite Ship!IE support

23. Partners

24. demo EricomAccessNow

25. demo Citrix HTML5 receiver

26. WebSockets are everywhere • Client • IE 10 (of course!) and other browsers • Windows Runtime • Server • System.Net • IIS • ASP • WCF

27. Recap • WebSockets is a full-duplex, bi-directional protocol for real-time web scenarios with a simple to use W3C API • IE 10 has a great implementation of the standard, and there are interop tests and partners leveraging this today! • We’ve built WebSocket support everywhere – allowing you to build your application in the language and platform of your choice

28. For more information Sessions • 807: Building real-time web appslications with WebSockets using IIS, ASP.NET and WCF • 580: Building Windows Runtime Sockets Applications • 807: Making apps social and connected with HTTP services • 382: What’s new with HTML5, Javascript and CSS3 Sites • IE test drive: http://ie.microsoft.com/testdrive/ • HTML5 labs: http://html5labs.interoperabilitybridges.com/prototypes/websockets/websockets/info • WebSocket protocol: https://datatracker.ietf.org/doc/draft-ietf-hybi-thewebsocketprotocol/ • WebSocketAPI: http://dev.w3.org/html5/websockets/ • Ericom: http://demo.EricomAccessNow.com • Citrix: http://www.citrix.com

29. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.