Your SlideShare is downloading. ×
ITCamp 2012 - Alessandro Pilotti - Web API, web sockets and RSignal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

ITCamp 2012 - Alessandro Pilotti - Web API, web sockets and RSignal

763
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
763
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Building modern web sites with ASP .Net Web API, WebSockets and RSignal Alessandro Pilotti MVP ASP.Net / IIS Windows Azure Insider @alexpilotti@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 2. ITCamp 2012 sponsors Mobile & Development@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 3. Agenda Mobile & Development• ASP.Net Web API• SignalR• WebSocket@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 4. What’s the deal? Mobile & Development• The web app designer’s holy grail: – Reach the usability level of a desktop app• The web app designer’s curse: – Lack of standard API on the browser’s side• Until recently the only way out was a RIA framework: – Flash / Silverlight@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 5. HTML5 Mobile & Development• HTML5 is changing the game• Great set of new browser features: – Application cache – Web storage – WebSockets – WebWorkers – Geolocation – Drag&Drop – Multiple file uploads – Inline SVG – History management – … and that Video thing@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 6. Javascript? Mobile & Development• Javascript is getting a huge boost – There’s more than meets the eye – Its prototyping nature and flexibility is great • The rest sucks • An enormous amount of frameworks are available today, e.g: – JQuery / JQuery UI – Knockout.js – Backbone.js – Underscore.js – History.js – …And a gazillion more@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 7. SPA Mobile & Development• Single Page Applications – A single HTML is loaded in the browser – History (aka back button) is managed via Javascript – Templates are used to load and render in the DOM content on demand • Some Ajax might be useful for that – Offline usage • Application cache • Web storage@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 8. And how do we access Data? Mobile & Development• Web pages communicate with the server via asynchronous calls – XmlHttpRequest (as in ajax) – JSON serialization • Way faster than XML • Originally decoded with “eval” • Modern browsers provide native encoding / deconding – JSON.parse(…) / JSON.stringify(…) – Even faster! – RESTful APIs – WebSockets • Where supported@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 9. Great advantages Mobile & Development• Faster web sites• Lower traffic• Clear separation – UI – Services / BL• Enhanced testability – Unit tests for the server API – MVVM in Javascript (e.g. Knockout.js)• Enhanced portability – E.g. Mobile UI@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 10. ASP.Net Web API Mobile & Development• ASP.Net Web API – Comes with MVC4 – Provides a new RESTful Web API framework – ODATA support – Very easy – Great IoC support – EF integration (DbDataController<T>) – Can be also installed on MVC3 or Web Forms • Install-Package AspNetWebApi• All the ASP.Net Stack is open source!! – http://aspnetwebstack.codeplex.com/• Alternative: WCF – RESTful support – More control • Complicated bindings configuration@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 11. RESTful APIs Mobile & Development• Use of HTTP verbs: – GET – POST – PUT – DELETE• Great for CRUD operations• Errors use HTTP semantics – E.g. not found => 404• Uses custom routing• A lot less bloated than SOAP@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 12. RESTful APIs example Mobile & DevelopmentAction HTTP verb Relative URIGet a list of all products GET /api/productsGet a product by ID GET /api/products/idGet a product by category GET /api/products?category=categoryCreate a new product POST /api/productsUpdate a product PUT /api/products/idDelete a product DELETE /api/products/id@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 13. jQuery example Mobile & DevelopmentjQuery does all the dirty job, the result is neat and clean:$.getJSON( "api/products", function(data) { $.each(data, function(index, value) { $("#products").append(<li> + value.Name + </li>); }); });@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 14. ASP.Net Web API routing Mobile & Developmentroutes.MapHttpRoute( name: "API Default", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional });• Avoids conflicts with MVC routing• Naming Convention – GetAllProducts, DeleteProduct, etc• Explicit action attributes: – [HttpGet], [HttpPost], [HttpPut], [HttpDelete], [NonAction]• User "api/{controller}/{action}/{id}” for RPC style routing – Needs explicit verb attributes@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 15. HttpMessageHandler Mobile & Development• ASP.Net Web API is based on a pipeline• Inherit from DelegatingHandler to create your handlers – E.g. check an API key• Add with: – config.MessageHandlers.Add(new ApiKeyHandler());@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 16. ODATA + Web API Mobile & Development• Open Data Protocol – A web protocol for querying and updating data• Enable ODATA queries on your Web API – Just return an IQueriable<T>• Examples – http://localhost:1702/api/Products?$filter=Enabled%2 0eq%20true – http://localhost:1702/api/Products?$orderby=Name% 20desc – http://localhost:1702/api/Products?$filter=startswith( Name,’whatever)@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 17. CURL Mobile & Development• Great tool for troubleshooting• curl -i -H "Accept: application/json" http://localhost:1823/api/Products• curl -i -H "Content-Type: application/json" -H "Accept: application/json" -X POST -d @data.json http://localhost:1823/api/Product@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 18. WEB API DEMO@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 19. SignalR Mobile & Development• A framework that provides some magic for: – Persistent connections • LongPolling • WebSockets • Examples: chat, stock ticker updates – Dynamic proxy generation for Javascript code • Hubs – JSON serialization• Asynchronous model• Supports self hosting• Unrelated to MVC or Web Forms• Install-package SignalR – Or: https://github.com/SignalR/SignalR@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 20. Long Polling Mobile & Development A way to simulate push data connections 1. The client connects via HTTP 2. The server waits for available data 3. The server sends the response 4. Back to step one@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 21. Persistent connections (server) Mobile & Development public class MyConnection : PersistentConnection { protected override Task OnReceivedAsync(IRequest request, string connectionId, string data) { // Broadcast data to all clients return Connection.Broadcast(data); } }Routing setup in global.asax:RouteTable.Routes.MapConnection<MyConnection>("echo", "echo/{*operation}");@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 22. Persistent connections (client) Mobile & Development $(function () { var connection = $.connection(/echo); connection.received(function (data) { $(#messages).append(<li> + data + </li>); }); connection.start(); $("#broadcast").click(function () { connection.send($(#msg).val()); }); });@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 23. PersistentConnection API Mobile & Development• Task OnConnectedAsync(IRequest request, string connectionId)• Task OnReconnectedAsync(IRequest request, IEnumerable groups, string connectionId)• Task OnReceivedAsync(IRequest request, string connectionId, string data)• Task OnDisconnectAsync(string connectionId)• Task OnErrorAsync(Exception error)@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 24. IConnection API Mobile & Development• Task Broadcast(object value)• Task Send(string signal, object value)@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 25. External broadcasts Mobile & Developmentvar context =GlobalHost.ConnectionManager.GetConnectionContext<MyEndPoint>();context.Connection.Broadcast(message);• Useful to send messages starting from a server action@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 26. Hub (server) Mobile & Developmentpublic class Chat : Hub { public void Send(string message) { // Call the addMessage method on all clients Clients.addMessage(message); } }• Methods can have any name, the client resolves the names via proxy• Clients is a dynamic object – addMessage is defined in Javascript!!@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 27. Hub (client) Mobile & Development var chat = $.connection.chat; // Declare a function on the chat hub so the server can invoke it chat.addMessage = function(message) { $(#messages).append(<li> + message + </li>); }; $("#broadcast").click(function () { // Call the chat method on the server chat.send($(#msg).val()) .done(function() { console.log(Success!); }) .fail(function(e) { console.warn(e); }); }); // Start the connection $.connection.hub.start();@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 28. Look Mama, no global.asax routes Mobile & Development• SignalR’s AspNetBootStrapper defines – [assembly: PreApplicationStartMethod(typeof(AspNetBootstrapper), "Initialize")] – Initialize calls: RouteTable.Routes.MapHubs(); • Mapping the /signalr route• No need for: – Explicit global.asax route mapping – Web.config settings@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 29. External broadcasts Mobile & Developmentvar context =GlobalHost.ConnectionManager.GetHubContext<MyHub>();context.Clients.say(message);@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 30. IIS setup for high loads Mobile & Development• appcmd.exe set config /section:serverRuntime /appConcurrentRequestLimit:100000• In %windir%Microsoft.NETFrameworkv4.0.30319 aspnet.config – maxConcurrentRequestsPerCPU="20000”• In %windir%Microsoft.NETFrameworkv4.0.30319 Configmachine.config – <processModel autoConfig="false" requestQueueLimit="250000" /> technologies@ itcampro # itcamp12 Premium conference on Microsoft
  • 31. SIGNALR DEMO@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 32. WebSockets Mobile & Development• TCP/IP communication style model – Handshake resembles HTTP• Interoperable• Standard W3C (still in draft) – Older browsers support old versions• Bidirectional communications• Supports cross domain access!@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 33. Handshake Mobile & DevelopmentRequest:GET /mychat HTTP/1.1Host: server.example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==Sec-WebSocket-Protocol: chatSec-WebSocket-Version: 13Origin: http://example.comResponse:HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=Sec-WebSocket-Protocol: chat@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 34. Javascript Mobile & Development• Url: ws://yourhost/etc – wss: when used with SSL/TLSvar socket = newWebSocket(ws://game.example.com:12010/updates);socket.onopen = function () { setInterval(function() { if (socket.bufferedAmount == 0) socket.send(getUpdateData()); }, 50);};@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 35. Minimum requirements Mobile & Development• IE 10• Chrome 4• Firefox 4• Safari 5• Opera 11• Server: IIS 8@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 36. Proxy support Mobile & Development• Proxies tipically don’t recognize WebSocket traffic• By using SSL/TLS the problem is mitigated – Client uses HTTP CONNECT in this case@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 37. IIS 8 – enable WebSockets feature Mobile & Development@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 38. WCF 4.5 – HTTP Activation Mobile & Development@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 39. WCF 4.5 Mobile & Development@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 40. In ASP.Net – updated support Mobile & Development• Install-Package Microsoft.WebSocketsRouteTable.Routes.Add(new ServiceRoute("connect", new WebSocketServiceHostFactory(), typeof(GameService)));public class GameService : WebSocketService { private static GameServer server = new GameServer(); private GameConnection connection; public override void OnOpen() { string nickname = QueryParameters["nickname"]; int gameSize = int.Parse(QueryParameters["gamesize"]); connection = server.JoinGame(this, nickname, gameSize); } public override void OnMessage(string message) { connection.ProcessCommand(message); } protected override void OnClose() { if(connection != null) connection.Disconnect(); } }}@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 41. WEBSOCKETS DEMO@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 42. Q&A@ itcampro # itcamp12 Premium conference on Microsoft technologies