MVC real time Diagnosis using SignalR

UPDATED 2014.04.12: latest version of SignalR used and all other packages.

The idea of this example is to create a simple SignalR service, so that all Log messages can be sent to a client browser in real time.

In the example, EventSource classes are used to send the logs to the ETW. Semantic Logging OUT-OF-PROCESS is then used to log to the database. The SignalR framework will be added to the application and the EventSource class will be extended.


The example continues on from the code found here:
Part 3 Enterprise Library 6, Unity 3 and MVC 4, Registration by Convention Part 3

Or direct from github

Step 1: Add SignalR using nuget:

Step 2: In the Global.asax add RouteTable.Routes.MapHubs(); to the Application_Start method

protected void Application_Start()

Step 3: Create a new Startup class for the OWIN config, SignalR start method:

using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(MvcUnityBootstrapperTest.Startup))]

namespace MvcUnityBootstrapperTest
    public class Startup
        public void Configuration(IAppBuilder app)

Step 4: Create a SignalR Hub class. This class requires no methods as the log only pushes to the clients, no clients push to the server.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace MvcUnityBootstrapperTest.Logging
    public class DiagnosisEventSourceService : Hub

Step 5: Extend the EventSource class. Add a IHubContext

 private IHubContext hubContext = GlobalHost.ConnectionManager.GetHubContext<DiagnosisEventSourceService>();

And in each event add a hubContext.Clients.All.addDiagnosisMessage method. The addDiagnosisMessage now needs to be defined in javascript on the client.

                "CreateUnityMessage: " + message + " EventLevel.Informational");

Step 6: Create a Diagnosis view. Add the following:

    ViewBag.Title = "SignalR Diagnosis Example";

<h2>SignalR Diagnosis Example</h2>

<div class="container">
    <ol id="discussion">

@section scripts {
    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-2.0.3.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="~/signalr/hubs"></script>
    <!--SignalR script to update the chat page and send messages.--> 
        $(function () {
            // Reference the auto-generated proxy for the hub.  
            var signalRService = $.connection.diagnosisEventSourceService;

            // Create a function that the hub can call back to display messages.
            signalRService.client.addDiagnosisMessage = function (providerName, timestamp, eventId, message) {
                // Add the message to the page. 
                $('#discussion').append('<li><strong>' + htmlEncode(providerName) + '</strong>: '
                    + htmlEncode(timestamp) + ', ' + htmlEncode(eventId) + ', ' + htmlEncode(message) + '</li>');

            // Start the connection.
        // This optional function html-encodes messages for display in the page.

        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;

Now all Events will be sent to the diagnosis view in real time when the view is opened.


One comment

  1. Maybe using DIAGNOSIS USING SIGNALR, with Serilog in NET 6 minimal API and Blazor Server App ?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: