1. Building real-time web apps with HTML5 WebSockets
11/16/ :41 AM
PLAT-373C
Building real-time web apps with HTML5 WebSockets
Ravi Rao
Principal Program Manager Lead
Microsoft Corporation
© 2010 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.

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 sell sell buy buy sell 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 – “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 HTTP underlying protocol for web
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>
304 Not modified
GET <score>
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. Bing HTTP traffic drilldown
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
HTTP Server 1

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

15. Establishing a WebSocket Connection
HTTP Client
HTTP Server 1
HTTP “Switching Protocols”
HTTP Client
HTTP Server 2
Binary or UTF8 Messages
Web Socket
Web Socket 3

16. WebSocket protocol drilldown with netmon
demo
WebSocket protocol drilldown with netmon

17. W3C WebSocket API 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. WebSocket API drilldown with “echo”
demo
WebSocket API drilldown with “echo”

19. Stock ticker with WebSocket
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
Ericom AccessNow

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 Sites
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:
HTML5 labs:
WebSocket protocol:
WebSocket API:
Ericom:
Citrix:

29. 11/16/ :41 AM
© 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.
© 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.