SignalR with


Published on

My presentation about SignalR for my colleagues.

Published in: Technology

SignalR with

  1. 1. Welcome to the Real-time world of web Martin Bodocky
  2. 2. 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.
  3. 3. 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
  4. 4. 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.
  5. 5. Picture was taken from Architecture Diagram
  6. 6. 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
  7. 7. Communication with SignalR Picture was taken from
  8. 8. 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)
  9. 9. 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); } }
  10. 10. 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>
  11. 11. 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)
  12. 12. 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.
  13. 13. 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>
  14. 14. Some demos Chat Shape move Stock ticker
  15. 15. What’s it good for?  Dashboards  Monitoring  Collaborative tools  Job progress  Real-time form  Web games  Trading  Traffic systems, etc.
  16. 16. 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 -
  17. 17. SignalR with SharePoint 2013  There is a way: the-real-time-web-is-coming
  18. 18. References  1.) Comet -  2.) ISS with Extesionless url support –  3.) Hub api giude server - api-guide-server