SignalR with
Upcoming SlideShare
Loading in...5

SignalR with



My presentation about SignalR for my colleagues.

My presentation about SignalR for my colleagues.



Total Views
Views on SlideShare
Embed Views



1 Embed 3 3



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

SignalR with SignalR with Presentation Transcript

  • Welcome 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/2  Html 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/2  Comet(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 Architecture Diagram
  • SignalR API  SignalR 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 SignalR  SignalR.Client - .Net client for SignalR  SignalR.Ninject – Ninject dependency resolver for SignalR
  • Communication with SignalR Picture was taken from
  • Server Side – Hub 1/2  Top layer of PersistentConnection  Can connect with 1-N clients  Can send messages and call methods  Routes automatically mapped  SignalR handle the binding of complex object and arrays of objects automatically  Communication is serialized by JSON  Hubs 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/2 public 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 = function (name, message) { //Omitted }; //Start the connection (function () { $("#sendMessage").click(function () { //Call the Send method on the hub chat.server.send($("#displayName").val(), $("#message").val()); }); }); }); </script>
  • Client Side 2/3  Exposing methods from the server - The JavaScript client can declare methods that the server can invoke. Method – name of the client side method Callback – 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/3  JavaScript API  $.connection.hub – The connection for all hubs  $ – 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 routing  Register the route for generated SignalR hubs  Register 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 demos Chat Shape move Stock ticker
  • What’s it good for?  Dashboards  Monitoring  Collaborative tools  Job progress  Real-time form  Web games  Trading  Traffic systems, etc.
  • SignalR requirements  OS:  Windows Server 2012  Windows Server 2008 R2  Windows 8/7  Windows Azure  IIS – 7/7.5(with Extensionless URL(2)); 8/8 Express  .Net – 4.5 framework  Browser -
  • SignalR with SharePoint 2013  There is a way: the-real-time-web-is-coming
  • References  1.) Comet -  2.) ISS with Extesionless url support –  3.) Hub api giude server - api-guide-server