Post on 18-Jan-2015
description
SignalR with ASP.NetWelcome to the Real-time world of web
Martin Bodocky
What’s SignalR?SignalR is an asynchronous signaling library
for ASP.Net, to help build real-time multi-user web application.
SignalR is a compete client and server side solution with JavaScript(jQuery) on client and ASP.Net on the back end to create these kinds of application.
How does it work? 1/2Html 5 transports
WebSocket – It establishes a true persistent, two-way connection. It should be supported on server and client. Just latest versions of IE, Google Chrome and Mozilla FireFox, only partly implemented on Opera and Safari. Ideal transport technology, it makes the most
efficient use of server memory, has the lowest latency.
Server Sent Events (EventSource) – it supports by all browser who supports HTML5 expect Internet Explorer
How does it work? 2/2Comet(1) transports (when HTML5 is not
supported)Forever Frame (IE only) – It creates a hidden
IFrame on which is executing scripts, those are continually sending from server.
Ajax long polling – It doesn’t create a persistent connection, but instead polls the server with a request that stays open until the server responds, at which point the connection closes, and a new connection is requested immediately.
Picture was taken from http://www.asp.net/signalr
Architecture Diagram
SignalR APISignalR provides a simple API for creating
server-to-client remote procedure calls (RPC) that call JavaScript functions in client browsers from server-side .Net code. SignalR package is available by NuGet:
SignalR – A meta package that brings in SignalR.Server and SignalR.Js (this is necessary)
SignalR.Server – Server side components needed to build SignalR endpoints
SignalR.Js – Javascript client for SignalRSignalR.Client - .Net client for SignalRSignalR.Ninject – Ninject dependency resolver for
SignalR
Communication with SignalR
Picture was taken from http://www.asp.net/signalr
Server Side – Hub 1/2Top layer of PersistentConnectionCan connect with 1-N clientsCan send messages and call methodsRoutes automatically mappedSignalR handle the binding of complex object
and arrays of objects automaticallyCommunication is serialized by JSONHubs are per call, which means, each call
from client to the hub will create a new hub instance. Don’t setup static event handlers in hub methods.(3)
Server Side – Hub 2/2public class ChatHub : Hub{
public void Send(string name, string message) { //Call the broadcast message method
//to update all clients Clients.All.broadcastMessage(name, message); }}
Client Side 1/3<script src="Scripts/jquery-1.8.2.min.js" ></script><script src="Scripts/jquery.signalR-1.0.0.min.js" ></script><script src="/signalr/hubs" ></script> <script type="text/javascript"> $(function () { //Declare a proxy to reference the hub var chat = $.connection.chatHub; //Create a function that the hub can call to broadcast messages chat.client.broadcastMessage = function (name, message) { //Omitted };
//Start the connection $.connection.hub.start().done(function () { $("#sendMessage").click(function () { //Call the Send method on the hub chat.server.send($("#displayName").val(), $("#message").val());
}); }); }); </script>
Client Side 2/3Exposing methods from the server - The
JavaScript client can declare methods that the server can invoke.
my.Hub.{method} = callback
Method – name of the client side methodCallback – A function to execute when the server invokes the method- If you misspell names you will not get any warnings or notifications even when logging is enabled. On server side is method call hosted on dynamic property (Clients)
Client Side 3/3JavaScript API
$.connection.hub – The connection for all hubs$.connection.hub.id – The client id for the hub
connection$.connection.hub.logging – Set to true to
enable logging.$.connection.hub.start() – Starts the
connection for all hubs.
Hub routingRegister the route for generated SignalR hubsRegister on server side in Application_Start on global class:
public class Global : System.Web.HttpApplication{ protected void Application_Start(object sender, EventArgs e) { //Register the default hubs route: ~/signalr/hubs RouteTable.Routes.MapHubs(); }}
Register on client side:
<script src="/signalr/hubs" ></script>
Some demosChatShape moveStock ticker
What’s it good for?DashboardsMonitoringCollaborative toolsJob progressReal-time formWeb gamesTradingTraffic systems, etc.
SignalR requirementsOS:
Windows Server 2012Windows Server 2008 R2Windows 8/7Windows Azure
IIS – 7/7.5(with Extensionless URL(2)); 8/8 Express
.Net – 4.5 frameworkBrowser - http://caniuse.com/#
feat=websockets
SignalR with SharePoint 2013
There is a way:http://melcher.it/2012/12/signalr-in-sharepoint-2013-the-real-time-web-is-cominghttp://spsignalr.codeplex.com/
References 1.) Comet -
http://en.wikipedia.org/wiki/Comet_(programming)
2.) ISS with Extesionless url support – http://support.microsoft.com/kb/980368
3.) Hub api giude server - http://www.asp.net/signalr/overview/hubs-api/hubs-api-guide-server