This document summarizes a presentation about real-time web technologies and WebSockets. The presentation covers topics like polling, Comet, Server-Sent Events, WebSockets protocols and APIs. It also demonstrates using WebSockets in Windows 8, ASP.NET and WCF. Concerns regarding network topology and adoption are discussed. The presentation concludes with references and announcing another session on building modern web sites with ASP.NET, Web API and SignalR.

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