Introduction to SignalR“Persistent connection” between clients and server in ASP.NET

Introduction to SignalR

Why real-time & how ?

Users want the latest info, NOW !

Introduction to SignalR

Introduction to SignalR

HTTP request/response

It is a unidirectional protocol stateless

Never designed for real-time communications

Where are we ? On the web !

Introduction to SignalR

Introduction to SignalR

HTML5 WebSockets

Extension to HTTPProvide raw sockets over HTTPFull-duplexTraverses proxies

Not every browser supports itNot every proxy server supports itNot every webserver supports itThey are raw sockets !

Introduction to SignalR

SignalR

Create a “persistent connection” between client and server allowing you to push data from server to client.

Abstracts away the transport

Provides just one programming model

Not an official Microsoft project yet

For more details: https://github.com/SignalR/SignalR

Introduction to SignalR

The connection between clients & server is persisted over best possible transport mechanism, which could be a combination of long polling, periodic polling & sockets. In this way transport layer is abstracted to provide a seamless persistent connection

Introduction to SignalR

Two connection models

Hubs (high level)Can communicate with 1..N clientsAbstraction over PersistentConnectionRoute automatically mapped (/signalr/hubs)Can send messages and call methodsSignalR defines the protocol

PersistentConnection (low level)Can communicate with 1..N clientsIs an IHttpHandlerRequires a route to be definedLimited to sending messagesYou define the “protocol”

Introduction to SignalR

<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="Scripts/jquery.signalR.min.js" type="text/javascript"></script> <script src="signalr/hubs" type="text/javascript"></script>

SignalR registers some code to run at application start time that finds all hubs in your application. On the first request to signalr/hubs, the proxy is generated and cached for the lifetime of the application.

If you navigate to signalr/hubs in your browser, you'll see a script that is dynamically generated based on the hubs declared on the server. Each hub on the server will become a property on the client side $.connection.myHub / $.connection.

Introduction to SignalR

$(function () { // Proxy created on the fly var chat = $.connection.hubChat1;

// Declare a function on hub so the server can invoke it chat.addMessage1 = function (message) { $('#messages').append('<li>' + message + '</li>'); };

// Call the chat method on the server $("#broadcast").click(function () { chat.send1($('#msg').val()); });

// Start the connection $.connection.hub.start();});

Hubs (high level)

Introduction to SignalR

public class HubChat1 : Hub { // Call the chat method on the server public void Send1(string message) { // Call the addMessage method on all clients Clients.addMessage1(message); } }

Invoking methods on the Clients property will broadcast that message to all connected clients (see above). But there are some cases where we want to send a message to specific clients. We can use the indexer on the Clients object to specify a connection id.

Clients[Context.ConnectionId].addMessage(data);

Hubs (high level)

Introduction to SignalR

public class PaginaController : Controller{ public ActionResult Index() { return View(); }

public ActionResult Command() { var context = GlobalHost.ConnectionManager.GetHubContext<HubChat1>(); context.Clients.addMessage1(“Hello world”); return null; } }

If you call an action method into the controller, you can also call a javascript callback. To get the context object for a hub, use this method.

GlobalHost.ConnectionManager.GetHubContext<T>()

Hubs (high level)

Introduction to SignalR

DEMO

Introduction to SignalRPersistentConnection (low level)

$(function () { var connection = $.connection('/echo');

connection.received(function (data) { $('#messages').append('<li>' + data + '</li>'); });

$("#broadcast").click(function () { connection.send($('#msg').val()); });

connection.start();});

The "PersistentConnection" requires a route to be defined, it is limited to sending messages and you must define the protocol.

Introduction to SignalRPersistentConnection (low level)

public class MyEndPoint : PersistentConnection { protected override Task OnConnectedAsync(IRequest request, string connId) { return Connection.Broadcast("Connection " + connectionId + " connected"); }

protected override Task OnReceivedAsync(IRequest request, string connId, string data) { return Connection.Broadcast("Connection " + connectionId+ " sent " + data); }

protected override Task OnDisconnectAsync(string connId) { return Connection.Broadcast("Connection " + connectionId+ " disconncted"); }}

Introduction to SignalR

DEMO

Introduction to SignalR

You can download the demo code at this link: http://sdrv.ms/RJgdUp

There is also a video on YouTube: http://youtu.be/qUG0BQYfmLM