Refreshing List of news using SignalR

Question

I have an asp.net MVC 4.0 application. In one of my views, I wish to display a list of current news (IEnumerable<News>) coming from a Web API.

The thing is that the list of news may or may not be updated frequently. In other words, on an average day, the backend team may have to enter from 5 to 45 news using the backend CMS.

I need to figure out a way to refresh the user’s list of news within his browser without, of course, refreshing the entire web page.

My initial thought would have been to add a JavaScript setInterval() method that would call the Web API every X milliseconds thus pulling the information and refreshing the list of news.

Although this would work, I would like to use a different approach and use SignalR since I believe the requirement fits with what SignalR has to offer.

After reading and looking at some examples on SignalR, I’m starting to understand the idea behind it but I’m still a bit confused.

The examples I see are Chat rooms and games where users can click stuff which triggers a call to the hub.

In my task, the user WILL NOT have anything to click. The hub (server) should be responsible of calling the client every X milliseconds to update the list of news.

In terms of performance, it would be ridiculous to send the entire list of news at each X milliseconds and overwrite the UI.

I would need a way to compare the list of news currently showing in the user’s browser with the new list of news inside the hub. Once the compare is done, only send the new compared list of news.

Does anyone have any example of such a scenario or can give me some pointers on how to get this started?

Thanks

Answer 1

I have made a lib called SignalR.EventAggregatorProxy

It serves has a proxy between a backend service bus or event aggregator and seamlessly forwards all or selected events to the client. The client subscribes to certain events but you can also create custom constraints so that the user only receives a selection of said event.

Check the wiki for how to set it up

https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/wiki

Install using nuget

Install-Package SignalR.EventAggregatorProxy 

Once configured fire a event when a news article is added or updated, you can fire it anywhere in your backend, domain, DAL, etc, as long as your service bus can pick it up my proxy will pick it up too.

For the UI use Knockout or Angular to create a dynamic list that can push changes to the UI . Load the initial data first time the user connects and add a listener to the event. Once a event come in check if the item is in the list, if it is update it, if its not add it.

SqlDependency that Lin suggests is fine for trivial systems, but once your system grows you do not want to have that kind of coupling directly to SQL

Answer 2

You can use SqlDependency with Signalr to get database change notification, then bind IEnumerable<News> with knockout observable array to auto refresh the page.

More about SqlDependency with Signalr, take a look at the following link:

http://techbrij.com/database-change-notifications-asp-net-signalr-sqldependency

Knockout observable array:

http://knockoutjs.com/documentation/observableArrays.html