Real time websites and mobile apps with SignalR

My session about building real time websites and mobile apps using the SignalR framework. Delivered on Microsoft TechDays Netherlands 2013.

Transcript

2. Real time websites and mobile apps with SignalR Roy Cornelissen Software Architect, Info Support @roycornelissen
3. intro agenda SignalR architecture push / pull implement multi platform beyond websites
4. modern user interaction…
5. demo Real time communication
6. SignalR gateway NServiceBus production monitor showcase: real time production monitor
7. http has a pull model
8. http pull interactions client server read file read file processing render page lifetime GET default.aspx GET a.jpg GET b.js client 2 server POST “message” client 1 process GET x.ashx?... process POST “ajax” Got msg? process Nope Got msg? process Nope process Got msg? process “message” polling
9. !(realTime)
10. the push concept the server takes the initiative to send data to the client
11. push protocols irc smtp websocket server sent events
12. today‘s push protocols • two way, persistent connection, initiated by client • W3C draft, worked on my IETF • support (partial) in some browsers • “pub/sub” like protocol over http • also still a W3C draft • one-way, client needs extra channel for send • proxies need to know about content-type:text/event-stream websocket server sent events
13. but I want it now! Veruca Salt Willy Wonka & The Chocolate Factory, 1971
14. other options client 2 server POST “message” client 1 Got msg? “message” long polling POST “message” Got msg? “message” client 2 server POST “message” client 1 GET /forever <script> display(“message”); </script> forever frame POST “message” <script> display(“message”); </script> <iframe src=“/forever”>
15. SignalR to the rescue!
16. SignalR’s layers of abstraction SignalR will abstract away the actual protocol used, and adds a couple of layers on top to make things even easier
17. protocols persistent connection hub 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 SignalR 1.0
18. my connection persistent connection override Task OnConnected 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. demo Getting started and persistent connections
20. hubs
21. 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) var chat = $.connection.chatHub; … chat.server.message(“hi!”); … chat.client.notify = function(text) { // do something with text } server class ChatHub: Hub { public void message(string text) { Clients.All.notify(text); } } proxy dynamic
22. sharing state client (javascript) var chat = $.connection.chatHub; chat.message(“test”); ... alert(chat.state.yourTicket); server class ChatHub: Hub { public void message(string text) { Clients.Caller.yourTicket = “123”; } } dynamic
23. demo Hubs
24. other platforms
25. JavaScript SignalR clients
26. .NET JavaScript
27. Windows Phone JavaScript .NET
28. Silverlight JavaScript .NET Windows Phone
29. WinRT JavaScript .NET Windows Phone Silverlight
30. JavaScript .NET Windows Phone Silverlight WinRT
31. SignalR gateway NServiceBus production monitor showcase: real time production monitor
32. app architecture SignalR proxy & data contracts ViewModels WinRT (data binding) WPF (data binding) iOS (INotifyPropertyChanged)
33. demo Multi-platform & patterns for reuse
35. beyond websites JavaScript .NET Windows Phone Silverlight WinRT iOS Android ASP.NET OWIN Custom SQL Redis Service Bus clients hosts backplanes
36. scaling out via backplanes B
37. www.nuget.org www.github.com/signalr www.github.com/gshackles/signalr
38. @roycornelissen royc@infosupport.com roycornelissen.wordpress.com thanks!