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.

2. Real time websites and
mobile apps with SignalR
Roy Cornelissen
Software Architect, Info Support
@roycornelissen

3. agenda
SignalR
intro push / pull
architecture
multi beyond
implement
platform websites

4. modern user interaction…

5. NServiceBus
SignalR
production
gateway
monitor
showcase: real time production monitor

6. http has a pull model

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

8. !(realTime)

9. the push concept
the server takes the
initiative to send
data to the client

10. push protocols
irc smtp websocket server sent
events

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

14. SignalR to the rescue!

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

18. hubs

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

21. other platforms

22. SignalR clients
JavaScript

23. JavaScript
.NET

24. JavaScript .NET
Windows
Phone

25. Windows
JavaScript .NET
Phone
Silverlight

26. Windows
JavaScript .NET Silverlight
Phone
WinRT

27. Windows
JavaScript .NET Silverlight WinRT
Phone

28. NServiceBus
SignalR
production
gateway
monitor
showcase: real time production monitor

29. app architecture
WinRT WPF iOS
(data binding) (data binding) (INotifyPropertyChanged)
ViewModels
SignalR proxy & data contracts

31. beyond websites
clients
Windows
JavaScript .NET Silverlight WinRT iOS Android
Phone
Service
ASP.NET OWIN Custom SQL Redis
Bus
hosts backplanes

32. scaling out via backplanes
B

33. www.nuget.org
www.github.com/signalr
www.github.com/gshackles/signalr

34. @roycornelissen
royc@infosupport.com
roycornelissen.wordpress.com
thanks!