SignalRSimplest way to achieve real-time web functionality

Agenda

• Introduction• Hubs• Scale Out / Backplane• Self Host

Intro to SignalR

• A library for real-time web functionality• Built on OWIN(SignalR 2.x)• Open Web Interface for .Net

• Open source on Github

Intro to SignalR

• Built on persistent connections• Remote Procedure Call(RPC)• Server push • Transports• Web Socket• Server Sent Event• Forever Frame• Long Polling

• Fallback

Transports

comet HTML 5

Long Polling Forever FrameServer Sent

EventWeb Socket

Long Polling

• Response when server data changed

Forever Frame

• Hidden iframe• Only for IE

Server Sent Event

• HTML5 EventSource • One way communication

(Server to client)• Except IE

Web Socket

• Persistent full-duplex bi-directional connection• Criteria are met for both

server and client side

Web Browser Transport Requirements

TransportInternet Explorer

Chrome(Windows or iOS)

FirefoxSafari (OSX or iOS)

Android

WebSockets 10+ current - 1 current - 1 current – 1 N/A

Server-Sent Events

N/A current - 1 current - 1 current - 1 N/A

ForeverFrame 8+ N/A N/A N/A 4.1

Long Polling 8+ current – 1 current - 1 current - 1 4.1

Core Architecture

• pub/sub• Publish-Subscribe pattern

Core Architecture

publisher

message cache

worker worker worker

client client client client client

message bus

1.Message serialized, saved to cache

associated with signal, topic is marked for

delivery, publish call returns

2. Worker is scheduled for a signal, selects a waiting subscriber,

retrieves message from cache

3. Worker sends message to client as bytes over a

transport

Watch out

• Sending large messages• Memory leaks – all hub instances are transient• Session – don’t use it from SignalR, at all, ever (no support)

Platform Support

• OS• Windows 2008 r2 to 2012• Windows 7+• Windows Azure(No support Web Socket)

• .Net framework• .Net 4.5+(Web Socket support)• .Net 4

• IIS• IIS 8(Web Socket support)• IIS 7 and IIS 7.5

Hubs

• Least developer work• Monitor network transport• Specifying network technology• Accept/Return simple type, complex type• Complex objects serialized to/from JSON

Hubs-Server side

• Register in Startup.cs• HubName attribute • Broadcast• Clients.All.dynamic• Clients.Caller.dynamic• Clients.Others.dynamic• Clients.Caller(Context.ConnectionId).dynamic• Clients.AllExcept(connectionId, connectionId).dynamic• Clients.User(userId).dynamic

PM> Install-Package Microsoft.AspNet.SignalR

public partial class Startup { public void Configuration(IAppBuilder app) {

app.MapSignalR(); } }

[HubName("alias")]public class NewHub : Hub{}

Hubs-Client side

• jQuery base

• $.connection.hubName -> Camelcase• $.connection.hub.start()• $.connection.hub.start({ transport: [‘webSockets’,

‘longPolling’] })• $.connection.hub.logging = true -> Debugging• hub.server.serverMethod• hub.client.dynamicMethod

<script src="~/scripts/jquery-1.6.4.min.js"></script><script src="~/scripts/jquery.signalR-2.2.0.js"></script><script src="~/SignalR/hubs"></script>

PM> Install-Package Microsoft.AspNet.SignalR.JS

Hubs

• Server• OnConnected• OnReconnected• OnDisconnected

• Client• $.connection.hub.start• $.connection.hub.reconnecting• $.connection.hub.disconnected• $.connection.hub.connectionSlow

DEMO: First SignalR

Hubs

• Groups• Send message to particular groups• Not persisted on server

• Server side• Groups.Add(Context.ConnectionId, groupName)• Groups.Remove(Context.ConnectionId, groupName)

• Broadcast• Clients.Group(groupName).dynamic• Clients.Group(groupName, connectionId,

connectionId).dynamic• Clients.OthersInGroup(groupName).dynamic

DEMO: UKWL with SignalR

Scale out

• Problem

client

Server 1 Server 2

Scale out + Backplane

Backplane

client

Server

client

client

client

client

client

Server

client

client

client

client

client

Server

client

client

client

client

Backplane

• HOW TO• Nuget + ONE line code

• Limitation• Much slower than single server • Lower rate

Load patterns

• Server broadcast – low rate, message to all clients• Server push – low rate, message to unique clients• User event driven – broadcast on client action• High frequency – fixed high rate, unique messages

Backplane

• Redis• SQL Server• Azure Service Bus

PM> Install-Package Microsoft.AspNet.SignalR.Redis

public partial class Startup{ public void Configuration(IAppBuilder app) {

app.MapSignalR(); }}

GlobalHost.DependencyResolver.UseRedis("server", port, "password",

"AppName");

DEMO: Scale out with Redis

Self host

• Normally hosted in IIS• WHY self-hosted• No IIS• Performance issue

• Console / Windows Form Application

Self host - Server

class Program{ static void Main(string[] args) { using (WebApp.Start("http://localhost:8080")) { Console.ReadLine(); } }}class Startup{ public void Configuration(IAppBuilder app) { app.UseCors(CorsOptions.AllowAll); app.MapSignalR(); }}

PM> Install-Package Microsoft.AspNet.SignalR.SelfHost

PM> Install-Package Microsoft.Owin.Cors

Self host - Client

<script type="text/javascript"> $(function () { $.connection.hub.url = "http://localhost:8080/signalr"; });</script>

PM> Install-Package Microsoft.AspNet.SignalR.JS

<script src="~/scripts/jquery-1.6.4.min.js"></script><script src="~/scripts/jquery.signalR-2.2.0.js"></script><script src="http://localhost:8080/signalr/hubs"></script>

Q & A