Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Real time websites andmobile apps with SignalRRoy CornelissenSoftware Architect, Info Support    @roycornelissen
agenda                                     SignalR           intro     push / pull                                   archi...
modern user interaction…
NServiceBus SignalR                production gateway                 monitorshowcase: real time production monitor
http has a pull model
http pull interactions                                                                “ajax”server           processing   ...
!(realTime)
the push conceptthe server takes theinitiative to senddata to the client
push protocols    irc    smtp   websocket   server sent                                events
today„s push protocols                      • two way, persistent connection, initiated by                        client  ...
but I want it now!                                   Veruca Salt     Willy Wonka & The Chocolate Factory, 1971
other optionsclient 1                      Got msg?                    “message”       Got msg?        “message”server    ...
SignalR to the rescue!
SignalR will abstract away theactual protocol used, and addsa couple of layers on top tomake things even easierSignalR‟s l...
hub                                            persistent connectionSignalR 1.0                                         pr...
my connection                            override Task OnConnected       persistent      connection            override Ta...
hubs
client/server boundaries fade• hubs let you provide a sematic API between client and  server• SignalR creates a proxy betw...
sharing state        client (javascript)                         servervar chat = $.connection.chatHub;   class ChatHub: H...
other platforms
SignalR clients JavaScript
JavaScript             .NET
JavaScript   .NET   Windows    Phone
WindowsJavaScript   .NET                     Phone  Silverlight
WindowsJavaScript   .NET             Silverlight                     Phone        WinRT
WindowsJavaScript   .NET             Silverlight   WinRT                     Phone
NServiceBus SignalR                production gateway                 monitorshowcase: real time production monitor
app architecture       WinRT                        WPF                    iOS      (data binding)             (data bindi...
beyond websites                               clients                     WindowsJavaScript   .NET              Silverligh...
scaling out via backplanes       B
www.nuget.orgwww.github.com/signalrwww.github.com/gshackles/signalr
@roycornelissenroyc@infosupport.comroycornelissen.wordpress.com          thanks!
Real time websites and mobile apps with SignalR
Real time websites and mobile apps with SignalR
Upcoming SlideShare
Loading in …5
×

Real time websites and mobile apps with SignalR

5,454 views

Published on

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.

Published in: Technology
  • Be the first to comment

Real time websites and mobile apps with SignalR

  1. 1. Real time websites andmobile apps with SignalRRoy CornelissenSoftware Architect, Info Support @roycornelissen
  2. 2. agenda SignalR intro push / pull architecture multi beyond implement platform websites
  3. 3. modern user interaction…
  4. 4. NServiceBus SignalR production gateway monitorshowcase: real time production monitor
  5. 5. http has a pull model
  6. 6. 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 lifetimeclient 1 Got msg? Nope Got msg? Nope Got msg? “message”server process process process process POST “message”client 2 polling
  7. 7. !(realTime)
  8. 8. the push conceptthe server takes theinitiative to senddata to the client
  9. 9. push protocols irc smtp websocket server sent events
  10. 10. 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
  11. 11. but I want it now! Veruca Salt Willy Wonka & The Chocolate Factory, 1971
  12. 12. other optionsclient 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
  13. 13. SignalR to the rescue!
  14. 14. SignalR will abstract away theactual protocol used, and addsa couple of layers on top tomake things even easierSignalR‟s layers of abstraction
  15. 15. hub persistent connectionSignalR 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
  16. 16. 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
  17. 17. hubs
  18. 18. 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) servervar 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
  19. 19. sharing state client (javascript) servervar chat = $.connection.chatHub; class ChatHub: Hub { public void message(string text)chat.message(“test”); {... Clients.Caller.yourTicket = “123”;alert(chat.state.yourTicket); } } dynamic
  20. 20. other platforms
  21. 21. SignalR clients JavaScript
  22. 22. JavaScript .NET
  23. 23. JavaScript .NET Windows Phone
  24. 24. WindowsJavaScript .NET Phone Silverlight
  25. 25. WindowsJavaScript .NET Silverlight Phone WinRT
  26. 26. WindowsJavaScript .NET Silverlight WinRT Phone
  27. 27. NServiceBus SignalR production gateway monitorshowcase: real time production monitor
  28. 28. app architecture WinRT WPF iOS (data binding) (data binding) (INotifyPropertyChanged) ViewModels SignalR proxy & data contracts
  29. 29. beyond websites clients WindowsJavaScript .NET Silverlight WinRT iOS Android Phone ServiceASP.NET OWIN Custom SQL Redis Bus hosts backplanes
  30. 30. scaling out via backplanes B
  31. 31. www.nuget.orgwww.github.com/signalrwww.github.com/gshackles/signalr
  32. 32. @roycornelissenroyc@infosupport.comroycornelissen.wordpress.com thanks!

×