Building real-time web apps with HTML5 WebSockets 11/16/2018 10: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.

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

Users want the latest information NOW!

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 email – “You have mail” Interactive games – “it’s your turn now” Facebook wall updates – “new comment on my wall” Is the web ready?

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

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

Bing HTTP traffic drilldown demo Bing HTTP traffic drilldown

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

HTTP is not adequate for the real-time web

WebSocket - an enabler for the real-time web

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

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

Establishing a WebSocket Connection HTTP Client HTTP Server 1

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

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

WebSocket protocol drilldown with netmon demo WebSocket protocol drilldown with netmon

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

WebSocket API drilldown with “echo” demo WebSocket API drilldown with “echo”

Stock ticker with WebSocket demo Stock ticker with WebSocket

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!

Interoperability

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

Partners

demo Ericom AccessNow

demo Citrix HTML5 receiver

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

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

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: 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/ WebSocket API: http://dev.w3.org/html5/websockets/ Ericom: http://demo.EricomAccessNow.com Citrix: http://www.citrix.com

11/16/2018 10: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.