My session about building real time websites and mobile apps using the SignalR framework. Delivered on Microsoft TechDays Netherlands 2013.
In this session I combined a back end in NServiceBus, a SignalR ASP.NET gateway, and WPF, WinRT and iOS clients (using Xamarin.iOS) to build a real time production monitor.
7. http pull interactions “ajax”
server processing read file read file process process
GET default.aspx GET a.jpg GET b.js GET x.ashx?... POST
client render page lifetime
client 1
Got msg? Nope Got msg? Nope Got msg? “message”
server process process process process
POST “message”
client 2
polling
11. today„s push protocols
• two way, persistent connection, initiated by
client
• W3C draft, worked on my IETF
• support (partial) in some browsers
websocket
• “pub/sub” like protocol over http
• also still a W3C draft
• one-way, client needs extra channel for send
• proxies need to know about
server sent events content-type:text/event-stream
12. but I want it now!
Veruca Salt
Willy Wonka & The Chocolate Factory, 1971
13. other options
client 1
Got msg? “message” Got msg? “message”
server
POST “message” POST “message”
client 2
long polling
<iframe src=“/forever”>
client 1 <script> <script>
GET /forever display(“message”); display(“message”);
</script> </script>
server
POST “message” POST “message”
client 2
forever frame
15. SignalR will abstract away the
actual protocol used, and adds
a couple of layers on top to
make things even easier
SignalR‟s layers of abstraction
16. hub
persistent connection
SignalR 1.0 protocols
web sockets server events long polling forever frame
• Unified programming model
• Deals with connectivity issues (connection slow, reconnect, disconnects)
• Available for multiple types of clients
• Messaging bus
• Utilizes Json.NET for serialization
17. my connection
override Task OnConnected
persistent
connection override Task OnReceived
override Task OnDisconnected
• Base class for your own connection class
• Fires events when clients connect, disconnect or send data
• Allows grouping of connections
• Deals with “raw” (string) data: do your own serialization
• Your class gets instantiated with each new http connection
19. client/server boundaries fade
• hubs let you provide a sematic API between client and
server
• SignalR creates a proxy between the two parties
client (javascript) server
var chat = $.connection.chatHub; class ChatHub: Hub
… {
chat.server.message(“hi!”); proxy public void message(string text)
… {
chat.client.notify = function(text) Clients.All.notify(text);
{ }
// do something with text }
} dynamic
20. sharing state
client (javascript) server
var chat = $.connection.chatHub; class ChatHub: Hub
{
public void message(string text)
chat.message(“test”); {
... Clients.Caller.yourTicket = “123”;
alert(chat.state.yourTicket); }
}
dynamic
Polling is still Pull; Twitter does this. There are some tricks, such as piggy backing results/messages on other requests (responses) but still not real time.