Real time websites and
mobile apps with SignalR

Roy Cornelissen
Software Architect, Info Support
    @roycornelissen
agenda
                                     SignalR
           intro     push / pull
                                   architecture




                        multi       beyond
         implement
                      platform      websites
modern user interaction…
NServiceBus
 SignalR
                production
 gateway
                 monitor




showcase: real time production monitor
http has a pull model
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
!(realTime)
the push concept
the server takes the
initiative to send
data to the client
push protocols



    irc    smtp   websocket   server sent
                                events
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
but I want it now!
                                   Veruca Salt
     Willy Wonka & The Chocolate Factory, 1971
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
SignalR to the rescue!
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
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
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
hubs
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
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
other platforms
SignalR clients



 JavaScript
JavaScript




             .NET
JavaScript   .NET




   Windows
    Phone
Windows
JavaScript   .NET
                     Phone




  Silverlight
Windows
JavaScript   .NET             Silverlight
                     Phone




        WinRT
Windows
JavaScript   .NET             Silverlight   WinRT
                     Phone
NServiceBus
 SignalR
                production
 gateway
                 monitor




showcase: real time production monitor
app architecture

       WinRT                        WPF                    iOS
      (data binding)             (data binding)   (INotifyPropertyChanged)




                               ViewModels



                       SignalR proxy & data contracts
beyond websites
                               clients


                     Windows
JavaScript   .NET              Silverlight   WinRT      iOS       Android
                      Phone



                                                                  Service
ASP.NET      OWIN    Custom                   SQL       Redis
                                                                    Bus



             hosts                                   backplanes
scaling out via backplanes


       B
www.nuget.org

www.github.com/signalr

www.github.com/gshackles/signalr
@roycornelissen

royc@infosupport.com

roycornelissen.wordpress.com




          thanks!

Real time websites and mobile apps with SignalR

  • 2.
    Real time websitesand mobile apps with SignalR Roy Cornelissen Software Architect, Info Support @roycornelissen
  • 3.
    agenda SignalR intro push / pull architecture multi beyond implement platform websites
  • 4.
  • 5.
    NServiceBus SignalR production gateway monitor showcase: real time production monitor
  • 6.
    http has apull 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.
  • 9.
    the push concept theserver 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 wantit 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.
  • 15.
    SignalR will abstractaway 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.
  • 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.
  • 22.
  • 23.
  • 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 viabackplanes B
  • 33.
  • 34.

Editor's Notes

  • #10 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.