itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices ITCamp 2012 sponsors

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Real-time web and Web Sockets in Windows 8

Florin Cardașim, Endava,

twitter/@cardasim

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices

Real-time web

Comet/long polling

SSE, WebSockets

WebSockets in ASP.NET and WCF

Q&A

Agenda

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices Real-Time Web

• Monitoring/dashboards

• Sensor/RFID Tracking

• Social networking, Instant messaging

• Collaboration tools (Google Docs)

• Online gaming (Quake2 in the browser??!!)

• …

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices Implementing Real-Time Web

• Flash/silverlight/javafx

• Ajax polling

• Comet/long polling/http streaming …

• … other DoS techniques

• Server-sent events

• Web sockets

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices Polling

connect

no message

connect

no message event

connect

event

Browser Server

connect no message

connect no message event connect event

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices Polling

• No real-time user experience

• Wasted bandwidth, most requests return

no data

• Frequent polling determine high server

loads

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices Comet/Long Polling

connect

event event

Browser Server

event

wait

connect

wait

event

connect

wait

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices Comet/Long Polling

• Real-time user experience

• High pressure on server memory, bandwidth,

threads/processes

• DEMO

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices Html5 Server-Sent Events

open event stream

event event

Browser Server

event event

event event

<EventSource>

onmessage

onmessage

onmessage

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices Html5 Server-Sent Events

• Simulates a server push channel over HTTP

• Unidirectional, from server to browser

• Standardizes some form of Comet/HTTP

streaming

• New html tag: <EventSource>

• New mime type: text/event-stream

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices Html5 WebSocket

Client/ Browser

Server GET /text HTTP/1.1 Host: www.websocket.org Upgrade: WebSocket Connection: Upgrade ...

HTTP/1.1 101 Switching Protocols Upgrade: WebSocket Connection: Upgrade ...

TCP comm channel Full duplex, bidirectional

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices Html5 WebSocket

• Full duplex, bidirectional

• Single TCP socket

• Standard ports: http/80, https/443

• In & outside of browser

• Bandwidth savings, enhanced scalability

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices WebSocket vs Polling Bandwidth

http://websocket.org/quantum.html

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices WebSocket – The Protocol

OpCode (4 bit) Meaning/frame type

0 Continuation

1 Text (UTF-8)

2 Binary

3-7 Reserved for further non-control frames

8 Connection Close

9 Ping

10 Pong

11-15 Reserved for further non-control frames

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices WebSocket – The Java Script API

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices Browser Support

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices Server Side Support

• Socket.IO (node.js)

• Atmosphere, Jetty (Java)

• Ruby/EventMachine

• Python/Twisted

• Windows 8, IIS 8, ASP.NET-WCF 4.5

• … others

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices WebSockets in Windows 8

http.sys

IIS (iiswsock.dll)

ASP.NET HTTP Pipeline

System.Net.WebSockets

HttpListener

WCF WebSocket transport

WCF high level

abstractions

Your code!

ASP.NET high level

abstractions

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices WebSockets in Windows 8

• DEMO • IE 10

• Windows 8, IIS 8

• ASP.NET 4.5

• WCF 4.5

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices WebSockets in ASP.NET

Developer “agrees” to upgrade to a WebSocket connection

HttpContext.Current.AcceptWebSocketRequest( Func<AspNetWebSocketContext,Task> myWebSocketApp, AspNetWebSocketOptions optionalSetupInfo );

Asynchronously receive and send messages public async Task MyWebSocketApp(AspNetWebSocketContext context) { var socket = context.WebSocket; … var input = await socket.ReceiveAsync(buffer); … await socket.SendAsync(outputBuffer,…params…); }

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices WebSockets in WCF

• WebSocket transport for WCF

• Traditional WCF running over WebSocket

connections

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices Concerns – Network Topology

• NAT, Firewall – NOT an issue, standard ports: http/80, https/443

• Proxy (forward, reverse, transparent etc) – It depends, but generally an issue

– CONNECT (tunnel/SSL)

• Load Balancer – TCP (Layer-4) – no issue

– HTTP (Layer-7) – may require explicit configuration

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices Concerns – Adoption

• Use frameworks:

–Socket.IO

(node.js)

–Atmosphere

(java)

–SignalR

(.net)

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices References

• http://www.websocket.org

• http://www.kaazing.me

• http://www.buildwindows.com

• http://ww.infoq.com/websocket

• http://socket.io

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices Other WebSockets sessions @ITCamp

• Building modern web sites with ASP .Net

Web API, WebSockets and SignalR

– 14:45

– Alessandro Pilotti

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Q & A

How will WebSocket impact the existing WEB programming?

itcampro @ itcamp12 # Premium conference on Microsoft technologies

I’d love to hear you feedback – please fill the evaluation forms

Thank you!

Florin Cardașim, Endava,

twitter/@cardasim