Real time websites and mobile apps with SignalR

by Roy Cornelissen

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

modern user interaction…

Slide 5

Slide 5 text

demo Real time communication

Slide 6

Slide 6 text

SignalR gateway NServiceBus production monitor showcase: real time production monitor

Slide 7

Slide 7 text

http has a pull model

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

!(realTime)

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

push protocols irc smtp websocket server sent events

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

but I want it now! Veruca Salt Willy Wonka & The Chocolate Factory, 1971

Slide 14

Slide 14 text

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 display(“message”); forever frame POST “message” display(“message”);

Slide 15

Slide 15 text

SignalR to the rescue!

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

demo Getting started and persistent connections

Slide 20

Slide 20 text

hubs

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

demo Hubs

Slide 24

Slide 24 text

other platforms

Slide 25

Slide 25 text

JavaScript SignalR clients

Slide 26

Slide 26 text

.NET JavaScript

Slide 27

Slide 27 text

Windows Phone JavaScript .NET

Slide 28

Slide 28 text

Silverlight JavaScript .NET Windows Phone

Slide 29

Slide 29 text

WinRT JavaScript .NET Windows Phone Silverlight

Slide 30

Slide 30 text

JavaScript .NET Windows Phone Silverlight WinRT

Slide 31

Slide 31 text