Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ITCamp 2012 - Florin Cardasim - HTML5 web-sockets

805 views

Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

ITCamp 2012 - Florin Cardasim - HTML5 web-sockets

  1. 1. ITCamp 2012 sponsors Architecture & Best Practices@ itcampro # itcamp12 Premium conference on Microsoft technologies
  2. 2. Real-time web and Web Sockets in Windows 8 Florin Cardașim, Endava, twitter/@cardasim@ itcampro # itcamp12 Premium conference on Microsoft technologies
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 12. Html5 WebSocket Architecture & Best Practices GET /text HTTP/1.1Client/ Host: www.websocket.org ServerBrowser 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. 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. 14. WebSocket vs Polling Bandwidth Architecture & Best Practices http://websocket.org/quantum.html@ itcampro # itcamp12 Premium conference on Microsoft technologies
  15. 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. 16. WebSocket – The Java Script API Architecture & Best Practices@ itcampro # itcamp12 Premium conference on Microsoft technologies
  17. 17. Browser Support Architecture & Best Practices@ itcampro # itcamp12 Premium conference on Microsoft technologies
  18. 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. 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. 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. 21. WebSockets in ASP.NET Architecture & Best PracticesDeveloper “agrees” to upgrade to a WebSocketconnection 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. 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. 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. 24. Concerns – Adoption Architecture & Best Practices• Use frameworks: – Socket.IO (node.js) – Atmosphere (java) – SignalR (.net)@ itcampro # itcamp12 Premium conference on Microsoft technologies
  25. 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. 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. 27. Q&A How will WebSocket impact the existing WEB programming?@ itcampro # itcamp12 Premium conference on Microsoft technologies
  28. 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

×