ITCamp 2012 - Florin Cardasim - HTML5 web-sockets
0 likes602 views
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.
ITCamp 2012 - Florin Cardasim - HTML5 web-sockets
- 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