itcamp 2012 - alessandro pilotti - web api, web sockets and rsignal

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Building modern web sites with ASP .Net Web API,

WebSockets and RSignal

Alessandro Pilotti

MVP ASP.Net / IIS

Windows Azure Insider

@alexpilotti


Mobile &

Development ITCamp 2012 sponsors


Mobile &

Development

• ASP.Net Web API

• SignalR

• WebSocket

Agenda


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

What’s the deal?


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

HTML5


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

Javascript?


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

SPA


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

And how do we access Data?


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

Great advantages


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

ASP.Net Web API

http://aspnetwebstack.codeplex.com/

http://aspnetwebstack.codeplex.com/


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

RESTful APIs


Mobile &

Development

Action HTTP verb Relative URI

Get a list of all products GET /api/products

Get a product by ID GET /api/products/id

Get a product by category GET /api/products?category=category

Create a new product POST /api/products

Update a product PUT /api/products/id

Delete a product DELETE /api/products/id

RESTful APIs example


Mobile &

Development

jQuery 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>');

});

});

jQuery example


Mobile &

Development

routes.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

ASP.Net Web API routing


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());

HttpMessageHandler


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')

ODATA + Web API


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

CURL


WEB API DEMO


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

SignalR

https://github.com/SignalR/SignalR

https://github.com/SignalR/SignalR


Mobile &

Development Long Polling

1. The client connects via HTTP 2. The server waits for available data 3. The server sends the response 4. Back to step one

A way to simulate push data connections


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}");

Persistent connections (server)


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());

});

});

Persistent connections (client)


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)

PersistentConnection API


Mobile &

Development

• Task Broadcast(object value)

• Task Send(string signal, object value)

IConnection API


Mobile &

Development

var context =

GlobalHost.ConnectionManager.

GetConnectionContext<MyEndPoint>();

context.Connection.Broadcast(message);

• Useful to send messages starting from a server action

External broadcasts


Mobile &

Development

public 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!!

Hub (server)


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();

Hub (client)


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

Look Mama, no global.asax routes


Mobile &

Development

var context =

GlobalHost.ConnectionManager.

GetHubContext<MyHub>();

context.Clients.say(message);

External broadcasts


Mobile &

Development

• appcmd.exe set config /section:serverRuntime /appConcurrentRequestLimit:100000

• In %windir%\Microsoft.NET\Framework\v4.0.30319\aspnet.config

– maxConcurrentRequestsPerCPU="20000”

• In %windir%\Microsoft.NET\Framework\v4.0.30319\Config\machine.config

– <processModel autoConfig="false" requestQueueLimit="250000" />

IIS setup for high loads


SIGNALR DEMO


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!

WebSockets


Mobile &

Development

Request:

GET /mychat HTTP/1.1

Host: server.example.com

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==

Sec-WebSocket-Protocol: chat

Sec-WebSocket-Version: 13

Origin: http://example.com

Response:

HTTP/1.1 101 Switching Protocols

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=

Sec-WebSocket-Protocol: chat

Handshake

http://example.com

http://example.com


Mobile &

Development

• Url: ws://yourhost/etc – wss: when used with SSL/TLS

var socket = new WebSocket('ws://game.example.com:12010/updates');

socket.onopen = function () {

setInterval(function() {

if (socket.bufferedAmount == 0)

socket.send(getUpdateData());

}, 50);

};

Javascript


Mobile &

Development

• IE 10

• Chrome 4

• Firefox 4

• Safari 5

• Opera 11

• Server: IIS 8

Minimum requirements


Mobile &

Development

• Proxies tipically don’t recognize WebSocket

traffic

• By using SSL/TLS the problem is mitigated

– Client uses HTTP CONNECT in this case

Proxy support


Mobile &

Development IIS 8 – enable WebSockets feature


Mobile &

Development WCF 4.5 – HTTP Activation


Mobile &

Development WCF 4.5


Mobile &

Development

• Install-Package Microsoft.WebSockets

RouteTable.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(); } } }

In ASP.Net – updated support


WEBSOCKETS DEMO


Q & A

itcamp 2012 - alessandro pilotti - web api, web sockets and rsignal

Technology

microsoft technologies

itcamp12 premium conference

mobile development web

itcamp12premium conference

web protocol

mobile development javascript

web forms

sponsors mobile development