itcamp 2012 - florin cardasim - html5 web-sockets

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Architecture &

Best Practices ITCamp 2012 sponsors


Real-time web and Web Sockets in Windows 8

Florin Cardașim, Endava,

twitter/@cardasim


Architecture &

Best Practices

Real-time web

Comet/long polling

SSE, WebSockets

WebSockets in ASP.NET and WCF

Q&A

Agenda


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??!!)

• …


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


Architecture &

Best Practices Polling

connect

no message

connect

no message event

connect

event

Browser Server

connect no message

connect no message event connect event


Architecture &

Best Practices Polling

• No real-time user experience

• Wasted bandwidth, most requests return

no data

• Frequent polling determine high server

loads


Architecture &

Best Practices Comet/Long Polling

connect

event event

Browser Server

event

wait

connect

wait

event

connect

wait


Architecture &

Best Practices Comet/Long Polling

• Real-time user experience

• High pressure on server memory, bandwidth,

threads/processes

• DEMO


Architecture &

Best Practices Html5 Server-Sent Events

open event stream

event event

Browser Server

event event

event event

<EventSource>

onmessage

onmessage

onmessage


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


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

http://www.websocket.org/


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


Architecture &

Best Practices WebSocket vs Polling Bandwidth

http://websocket.org/quantum.html









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


Architecture &

Best Practices WebSocket – The Java Script API


Architecture &

Best Practices Browser Support


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


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


Architecture &

Best Practices WebSockets in Windows 8

• DEMO • IE 10

• Windows 8, IIS 8

• ASP.NET 4.5

• WCF 4.5


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…); }


Architecture &

Best Practices WebSockets in WCF

• WebSocket transport for WCF

• Traditional WCF running over WebSocket

connections


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


Architecture &

Best Practices Concerns – Adoption

• Use frameworks:

–Socket.IO

(node.js)

–Atmosphere

(java)

–SignalR

(.net)


Architecture &

Best Practices References

• http://www.websocket.org

• http://www.kaazing.me

• http://www.buildwindows.com

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

• http://socket.io


Architecture &

Best Practices Other WebSockets sessions @ITCamp

• Building modern web sites with ASP .Net

Web API, WebSockets and SignalR

– 14:45

– Alessandro Pilotti


Q & A

How will WebSocket impact the existing WEB programming?


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

Thank you!

Florin Cardașim, Endava,

twitter/@cardasim

itcamp 2012 - florin cardasim - html5 web-sockets

Technology

microsoft technologies

itcamp12 premium conference

itcamp12premium conference

websocket connection

html5 server

wcf traditional wcf

server memory

events web sockets