Stream Web API Transactions Using SignalR

In the new world of APIs and microservices, it is absolutely correct to say that things have started moving really quickly;  .i.e., the process of transforming an idea into a product. But with all this agility comes a lot of moving parts, which sometimes results in serious overhead and in some cases failure of the sole product.

In order to execute an API/microservice oriented design we need to be vigilant about the performance; i.e., request/response transaction time and logs produced by these components. As for any API if the transaction time grows, the life expectancy for the API dramatically falls. If we take on an API build under any technology it's like a black box engine room -- the highest level of details about what is happening inside can only be retrieved from the log files. There are ways these log files can be machine read, such as Slack and other tools. But in most cases they are expensive if they are easy to use or too complicated to configure as with most of the open source tools.

With all the above problem statements, I started thinking of how  we can visualize/extract what is happening inside the engine room in real-time and with the least possible effort. This led to a thought about SignalR integration with Web API. I am using ASP.NET Web API for blog purposes but you can use the same technique for any  technology.

In the video below I am capturing an API request and publishing it to SignalR for display purposes.

Now if you are excited, let's do it :)

1. Create a new project in Visual Studio
   
   
   
   
2. Select Web API project
   
   
   
   
3. Add SignalR Nuget Packages
   
   

   package id="Microsoft.AspNet.SignalR" version="2.2.0" targetFramework="net45"
   package id="Microsoft.AspNet.SignalR.Core" version="2.2.0" targetFramework="net45"
   package id="Microsoft.AspNet.SignalR.JS" version="2.2.0" targetFramework="net45"
   package id="Microsoft.AspNet.SignalR.SystemWeb" version="2.2.0" targetFramework="net45"

4. Enable SignalR by adding to AppBuilder in Startup class

   public class Startup
    {
    public void Configuration(IAppBuilder app)
    {
       app.MapSignalR();
     }
    }
   }

5. Create a Hub class. Hub class is the bridge between client side script such as Jquery and server side C# code. Hub class looks for best the possible connection mechanism to make an RPC call from server to connected clients.
   

   using Microsoft.AspNet.SignalR;
   namespace SignalRLogging
   {
    public class Requestlog:Hub
    {
     public static void PostToClient(string data)
      {
       try
        {
          var chat = GlobalHost.ConnectionManager.GetHubContext("Requestlog");
           if (chat != null)
           chat.Clients.All.postToClient(data);
         }
         catch
          {
          }
        }
     }
    }

6. Now we need to create a listener which will be available to all the API controllers. The controllers can publish the message using this listener for the hub, which then publishes the message to all the connected clients. In order to implement this we will add delegate DelLogMessage to WebApiConfig. Also bind the delegate to PostToClient method of Hub Class, so that when the listener receives a message it is automatically published to Hub PostToClient method.
   

   namespace SignalRLogging
   {
    public static class WebApiConfig
    {
    public static void Register(HttpConfiguration config)
    {
    // Web API configuration and services
    // Web API routes
    config.MapHttpAttributeRoutes();
   config.Routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{id}",
    defaults: new { id = RouteParameter.Optional }
    );
    Global.LogMessage = Requestlog.PostToClient;
    config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
    }
    }
    public class Global
    {
    public delegate void DelLogMessage(string data);
    public static DelLogMessage LogMessage;
    }
   }

7. Let's publish a message to the listener from API Controller. What I am trying to portray here is how your message gets broadcast and published to all clients. This is not the ideal way to go, so a few options how it should be done in production project are:
   
   Created an extended DelegatingHandler, which is used to capture all incoming requests to the hosted API using OWIN where you can tap in the request pipeline, filter the required message body and publish to Hub.
   

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Net;
   using System.Net.Http;
   using System.Web.Http;</pre>
   namespace SignalRLogging.Controllers
   {
    public class ValuesController : ApiController
    {
    // GET api/values
    public IEnumerable  Get()
    {
    Global.LogMessage("Data from Controller");
    return new string[] { "value1", "value2" };
    }
   
   // GET api/values/5
    public string Get(string id)
    {
    Global.LogMessage("Request param : " + id);
    return "value";
    }
    }
   }

8. Lastly, let's create the client which will present Hub Messages. Add an html file to your project. In the code below we have referred SignalR.js, compatible jquery and /signalr/hubs. If you will look in the folders you will not find the hub file anywhere. Hub file is a proxy which is generated dynamically by the server once the browser request first reaches the server.
   

   <!DOCTYPE html>
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <title>SignalR Message</title>
   </head>
   <body>
       <div>
           <ul id="discussion"></ul>
       </div>
       <script src="Scripts/jquery-1.6.4.min.js"></script>
       <script src="Scripts/jquery.signalR-2.0.0.js"></script>
       <script src="/signalr/hubs"></script>
       <script type="text/javascript">
           $(function () {
   
               var chat = $.connection.requestlog;
               $.connection.hub.start().done(function () {
   
               });
               chat.client.postToClient = function (data) {
                   $('#discussion').append('Message' + data + '<br />');
               };
           });
       </script>
   </body>
   </html>

Source Code is available @Github.

Summary

This article just covers the tip of iceberg. There is wide range of avenues where SignalR can be of great help. In one of the projects I have used SignalR for notifying Window agents about the availability of new patch when user used to create a new entry for patch on portal. SignalR is great tool is used wisely and in appropriate usecase.