1. ITCamp 2012 sponsors Architecture &
Best Practices
@ itcampro # itcamp12 Premium conference on Microsoft technologies

2. Real-time web and
Web Sockets in Windows 8
Florin Cardașim, Endava,
twitter/@cardasim
@ itcampro # itcamp12 Premium conference on Microsoft technologies

3. Agenda Architecture &
Best Practices
Real-time web SSE, WebSockets Q&A
Comet/long polling WebSockets in
ASP.NET and WCF
@ itcampro # itcamp12 Premium conference on Microsoft technologies

4. Real-Time Web Architecture &
Best Practices
• 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

5. Implementing Real-Time Web Architecture &
Best Practices
• 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

6. Polling Architecture &
Best Practices
Browser connect Server
no message
connect
no message
event
connect
event
connect
no message
connect
no message event
connect
event
@ itcampro # itcamp12 Premium conference on Microsoft technologies

7. Architecture &
Polling Best Practices
• 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

8. Comet/Long Polling Architecture &
Best Practices
Browser Server
connect
wait
event
event
connect
wait
event
event
connect
wait
@ itcampro # itcamp12 Premium conference on Microsoft technologies

9. Comet/Long Polling Architecture &
Best Practices
• Real-time user experience
• High pressure on server memory, bandwidth,
threads/processes
• DEMO
@ itcampro # itcamp12 Premium conference on Microsoft technologies

10. Html5 Server-Sent Events Architecture &
Best Practices
Browser Server
open event stream
<EventSource>
event event
onmessage
event
onmessage event
event
onmessage event
@ itcampro # itcamp12 Premium conference on Microsoft technologies

11. Html5 Server-Sent Events
Architecture &
Best Practices
• 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

12. Html5 WebSocket
Architecture &
Best Practices
GET /text HTTP/1.1
Client/ Host: www.websocket.org Server
Browser 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

13. Html5 WebSocket
Architecture &
Best Practices
• 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

14. WebSocket vs Polling Bandwidth
Architecture &
Best Practices
http://websocket.org/quantum.html
@ itcampro # itcamp12 Premium conference on Microsoft technologies

15. WebSocket – The Protocol Architecture &
Best Practices
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

16. WebSocket – The Java Script API
Architecture &
Best Practices
@ itcampro # itcamp12 Premium conference on Microsoft technologies

17. Browser Support
Architecture &
Best Practices
@ itcampro # itcamp12 Premium conference on Microsoft technologies

18. Server Side Support Architecture &
Best Practices
• 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

19. WebSockets in Windows 8
Architecture &
Best Practices
Your code!
WCF high level
abstractions
ASP.NET high level
WCF WebSocket transport
abstractions
System.Net.WebSockets
ASP.NET HTTP Pipeline
HttpListener IIS (iiswsock.dll)
http.sys
@ itcampro # itcamp12 Premium conference on Microsoft technologies

20. WebSockets in Windows 8 Architecture &
Best Practices
• DEMO
• IE 10
• Windows 8, IIS 8
• ASP.NET 4.5
• WCF 4.5
@ itcampro # itcamp12 Premium conference on Microsoft technologies

21. WebSockets in ASP.NET
Architecture &
Best Practices
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

22. WebSockets in WCF Architecture &
Best Practices
• WebSocket transport for WCF
• Traditional WCF running over WebSocket
connections
@ itcampro # itcamp12 Premium conference on Microsoft technologies

23. Concerns – Network Topology Architecture &
Best Practices
• 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

24. Concerns – Adoption Architecture &
Best Practices
• Use frameworks:
– Socket.IO
(node.js)
– Atmosphere
(java)
– SignalR
(.net)
@ itcampro # itcamp12 Premium conference on Microsoft technologies

25. References Architecture &
Best Practices
• 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

26. Other WebSockets sessions @ITCamp Architecture &
Best Practices
• Building modern web sites with ASP .Net
Web API, WebSockets and SignalR
– 14:45
– Alessandro Pilotti
@ itcampro # itcamp12 Premium conference on Microsoft technologies

27. Q&A
How will WebSocket impact the
existing WEB programming?
@ itcampro # itcamp12 Premium conference on Microsoft technologies

28. I’d love to hear you feedback –
please fill the evaluation forms
Thank you!
Florin Cardașim, Endava,
twitter/@cardasim
@ itcampro # itcamp12 Premium conference on Microsoft technologies