Update UI with SignalR and Knockout when manually updating DB

Question

I have had a search around SO for this, but didn\'t come across anything obvious. I have a dashboard of jobs, and their status continually changes throughout the day and I\'m t

Answer 1

Update I've extracted my code and put it on Github/nuget https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy

To install to a MVC proejct

Install-Package SignalR.EventAggregatorProxy

Old answer

I just did this for one of my customers project, I used this EventAggregator that I created for a open source project called FreePIE

https://github.com/AndersMalmgren/FreePIE/tree/master/FreePIE.Core/Common/Events

Quick read up on EventAggregators http://codebetter.com/jeremymiller/2009/07/22/braindump-on-the-event-aggregator-pattern/

The repository code looks look like this

public class FooRepository : Repository<Foo> 
{
   private readonly IEventAggregator eventAggregator;

   public FooRepository(IEventAggregator eventAggregator) {
      this.eventAggregator = eventAggregator;
   }

   public void SaveFoo(Foo foo)
   {
      //save foo
      this.eventAggregator.Publish(new FooSavedEvent(foo));
   }
}

In the event aggregator hub (SignalR) i do

public class ClientEventAggregator : Hub
{
   public ClientEventAggregator (IEventAggregatorClientProxy proxy)
   {
      //This is just a way of injecting the singleton proxy for the first hub connection
   }
}

Proxy that handles all backend events fired by the EventAggregator.
IHandle<object> can be changed to for example a base class IHandle<ForwardToClientEvent> this way you can choose which backend events to forward to client

public class EventAggregatorClientProxy : IEventAggregatorClientProxy, IHandle<object>
{
   public EventAggregatorClientProxy(IEventAggregator eventAggregator) 
   {
      eventAggregator.Subscribe(this);
   }

   public void Handle(object event)
   {
      var context = GlobalHost.ConnectionManager.GetHubContext<ClientEventAggregator>();
      context.Clients.All.event(new { Type = event.GetType().Name, Event = event });
   }
}

In my example all events will be sent to all clients you could implement rules for that and change context.Clients.All

On the client I re publish the event using this little event aggreagator that i wrote for another SO question http://jsfiddle.net/wJtun/4/

MyApp.MasterViewModel = function() {
    var event = $.connection.clientEventAggregator;

    event.client.event = this.onEvent.bind(this);

    $.connection.hub.start().done();
    });
};
MyApp.MasterViewModel.prototype = {
   onEvent: function(event) {
      var type = MyApp.Events[event.type];          
      MyApp.eventAggregator.publish(new type(event.event));
   }
};

var type = MyApp.Events[event.type]

Note that this requires that you have defined a javascript class MyApp.Events.FooSavedEvent. Or that you dynamically create a JS that contains all Events that can be published (You can look at the SignalR code how they create the Hub proxy).

Disclaimer: All code above was written directly in the SO editor out of memory, it can contain errors

Answer 2

this makes sense, the application has no idea that data in the DB has changed. You need some trigger/notification to inform the application to query the database.

ideally you would not update the database manually/directly. You would use some service to query consume the data, process/validate the data, push the data to the database. send notifications to other systems that data was imported. (lots of different was to do this.)

in this case your website could receive a notification data was imported and kick off the dashboard queries.