itcamp 2012 - florin cardasim - html5 web-sockets
TRANSCRIPT
![Page 1: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/1.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Architecture &
Best Practices ITCamp 2012 sponsors
![Page 2: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/2.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Real-time web and Web Sockets in Windows 8
Florin Cardașim, Endava,
twitter/@cardasim
![Page 3: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/3.jpg)
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
![Page 4: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/4.jpg)
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??!!)
• …
![Page 5: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/5.jpg)
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
![Page 6: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/6.jpg)
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
![Page 7: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/7.jpg)
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
![Page 8: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/8.jpg)
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
![Page 9: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/9.jpg)
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
![Page 10: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/10.jpg)
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
![Page 11: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/11.jpg)
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
![Page 12: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/12.jpg)
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
![Page 13: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/13.jpg)
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
![Page 14: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/14.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Architecture &
Best Practices WebSocket vs Polling Bandwidth
http://websocket.org/quantum.html
![Page 15: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/15.jpg)
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
![Page 16: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/16.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Architecture &
Best Practices WebSocket – The Java Script API
![Page 17: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/17.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Architecture &
Best Practices Browser Support
![Page 18: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/18.jpg)
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
![Page 19: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/19.jpg)
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
![Page 20: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/20.jpg)
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
![Page 21: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/21.jpg)
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…); }
![Page 22: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/22.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Architecture &
Best Practices WebSockets in WCF
• WebSocket transport for WCF
• Traditional WCF running over WebSocket
connections
![Page 23: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/23.jpg)
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
![Page 24: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/24.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Architecture &
Best Practices Concerns – Adoption
• Use frameworks:
–Socket.IO
(node.js)
–Atmosphere
(java)
–SignalR
(.net)
![Page 25: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/25.jpg)
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
![Page 26: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/26.jpg)
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
![Page 27: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/27.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Q & A
How will WebSocket impact the existing WEB programming?
![Page 28: ITCamp 2012 - Florin Cardasim - HTML5 web-sockets](https://reader034.vdocuments.site/reader034/viewer/2022052523/55526752b4c9052e1f8b4fb4/html5/thumbnails/28.jpg)
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