Jaliya's Blog: NServiceBus with ASP.NET SignalR

Monday, October 13, 2014

NServiceBus with ASP.NET SignalR

In this post let’s see how we can NServiceBus with ASP.NET SignalR. In detail here what I am going to do is periodically publish a event using NServiceBus. I will have a ASP.NET MVC application as my front end and there I will have a another NServiceBus client which is responsible for capturing event broadcasted by the NServiceBus publisher. Then using ASP.NET SignalR, I will be updating the UI with those captured events content.

I am not going go detail here in with the NServiceBus, as I have wrote following posts. I would really suggest you to read these posts first, so you will have a good understanding about what I am going to do today.

As in both above posts, I have created a NServiceBus Scheduled Task in which I am going to publish a event periodically.

I will start off for today by adding a new ASP.NET MVC application to the solution.

New ASP.NET MVC Application

Now I am running NServiceBus.Host and Microsoft ASP.NET SignalR nuget packages on ASP.NET MVC project using Package Manager Console. NServiceBus.Host will add the EndpointConfig.cs to the project and I am keeping as it is. Now I am creating a folder named “SignalR” inside my project and I am going to add a new class there named “EventMessageHandler”.

public class EventMessageHandler : IHandleMessages<MyMessage>
{
    public void Handle(MyMessage message)
    {
 
    }
}

When NServiceBus has published an event of type “MyMessage”, “Handle” method in “EventMessageHandler” class will handle it. For now, lets keep the “Handle” method empty and let’s add a OWIN Startup class to the project by right clicking on the App_Start folder and selecting a OWIN Startup class template.

OWIN Startup class

Now I am modifying the created OWIN Startup class as follows.

using Owin;
using Microsoft.Owin;
using NServiceBus; 


[assembly: OwinStartup(typeof(NServiceBusSignalRSample.Startup))]
namespace NServiceBusSignalRSample
{
    public class Startup
    {
        public static IBus Bus { get; private set; }
 
        public static void Configuration(IAppBuilder app)
        {
            Bus = Configure
                    .With()
                    .DefaultBuilder()
                    .DefiningEventsAs(t => t.Namespace != null && t.Namespace.StartsWith("NServiceBusSignalRSample.Messages"))
                    .PurgeOnStartup(false)
                    .UnicastBus()
                    .LoadMessageHandlers()
                    .CreateBus()
                    .Start();
 
            app.MapSignalR();
        }
    }
}

Here I have configured my NServiceBus host and I am mapping SignalR hubs to the app builder pipeline. Next step is to create a SignalR hub. For that I am adding the following class to the previously created “SignalR” folder.

public class MyHub : Hub
{
}

Now here I am deriving “MyHub” class from “Hub” and that's it.

Before starting off with the client side code, let’s modify the “Handle” method in “EventMessageHandler” class now to call my client sides' "addNewMessageToPage" which is not yet implemented..

public class EventMessageHandler : IHandleMessages<MyMessage>
{
    public void Handle(MyMessage message)
    {
        IHubContext hubContext = GlobalHost.ConnectionManager.GetHubContext<MyHub>();
        hubContext.Clients.All.addNewMessageToPage(message.Message, "Jaliya");
    }
}

Now I am all set with the back end code. Final thing to be done is to create a view in client side, initiate the hub connection and create a method named “addNewMessageToPage”. For that first I am modifying the “HomeController” and adding a new Action there named “SignalR”.

public ActionResult SignalR()
{
    return View();
}

Now I am right clicking on the Action and creating a new view with the same name “SignalR”. I am modifying the “SignalR” view as follows.

@{
    ViewBag.Title = "SignalR";
}
<h2>SignalR</h2>
 
<div class="container">
    <ul id="output"></ul>
</div>
 
@section scripts {
    <script src="~/Scripts/jquery.signalR-2.1.1.min.js"></script>
    <script src="~/signalr/hubs"></script>
 
    <script>
        $(function () {
            $.connection.hub.logging = true;
            $.connection.hub.start();
            var chat = $.connection.myHub;
 
            chat.client.addNewMessageToPage = function (message, name) {
                $('#output').append('<li>' + message + ' ' + name + '</li>');
            };
        });
    </script>
}