When I was tasked with using SignalR to implement the real-time updating of data on a project I was working on, I was excited. Namely because it is a newer technology and I have always welcomed learning new technologies \u2013 especially when there is an immediate need to implement it, as opposed to reading about the technology and then never using it again.<\/p>\n
So I started where everyone else starts: Google. I found out quickly that most, if not all, of the results that I turned up with example code were making use of the same thing: a Chat application. This would have been perfect for me, if that was what I was looking to build\u2026 which it wasn\u2019t.<\/p>\n
So I copied the code, and within five minutes, I had a Chat application up and running. It demonstrated SignalR\u2019s functionality \u2013 how it provides a path for the server to communicate with its clients, and how clients communicate with a server Hub. Unfortunately, it was far from what I was looking to accomplish.<\/p>\n
I have a \u201cwebsite\u201d that is implemented with ExtJS. It then communicates with an \u201cAPI site\u201d implemented in ASP.NET to communicate with the database. I have a page that lists out records that are entered into the website. These records can be entered on this page through my browser, or they could be entered from another browser elsewhere, anywhere.<\/p>\n
The way it is currently updating, and how I have implemented in the past for similar situations, is to send a request to the server at one-minute intervals, and then redraw the list.<\/p>\n
This works fine, but if a record is added to the website from another browser just one second after the list is updated, it will take nearly another minute to see that record on the other browser that is displaying the list of records.<\/p>\n
Enter SignalR and its real-time updating.<\/p>\n
Enough history, here is my implementation:<\/p>\n
1.<\/strong> Using Nuget<\/a>, I installed SignalR and all of its associated packages into my API site.<\/p>\n After it installed, it brought up a README file with the code for the \u201cStartup.cs\u201d file that it instructs you to create.<\/p>\n I created that \u201cStartup.cs\u201d file in the \u201cApp_Start\u201d folder.<\/p>\n I later found that on the ASP.Net website, it describes how to establish a cross-domain (CORS<\/a>) connection, providing this \u201cStartup.cs\u201d file<\/a>, which I am now using. You will need to use Nuget and install the \u201cMicrosoft.Own.Cors\u201d package also.<\/p>\n Here is my \u201cStartup.cs\u201d file:<\/p>\n 2.<\/strong> When SignalR was installed, it created jQuery and SignalR .js files in the \u201cScripts\u201d directory. I first copied those files from the API site to the website for more efficient loading.<\/p>\n I then included those two local .js files in the \u201cViews\/Shared\/_Layout.cshtml\u201d file located on my website, and then a reference to the \u201csignalr\/hubs\u201d virtual directory created by SignalR on the API site:<\/p>\n 3.<\/strong> And then under that, I have the client side code needed to connect to the SignalR \u201cHub,\u201d to define the method that the server will call on each of its connected clients, and some other nice-to-haves, such as to turn client-side logging on and to reconnect to the Hub if it becomes disconnected.<\/p>\n This reconnecting method has really helped me a lot as there are times where SignalR does not connect initially, and then this reconnecting method kicks in. It will try to connect every five seconds until it connects successfully.<\/p>\n Here is that code:<\/p>\n 4.<\/strong> On the API site, I then created a folder named \u201chubs\u201d and created my \u201cHub\u201d file there. To create your Hub file, you will right-click on the folder. Click \u201cAdd\u201d and then choose \u201cSignalR Hub Class (v2)\u201d and name it whatever you want. I named mine \u201cAPIHub.\u201d This will add a default hub with a function that, when called from server side code, would call the function \u201chello()\u201d on all clients that are connected to the hub, which isn\u2019t useful for my purposes, but may be to someone else.<\/p>\n I need to notify clients of new records based on the \u201cLocationId\u201d they are watching. So if a record gets added to the database for that LocationId from any other browser, and I am monitoring that LocationId on my browser, I want my list to update.<\/p>\n This is where using SignalR Groups comes into play. Groups provide a way to map a \u201cconnectionid\u201d that SignalR gives to each connected client to a specific named User, which in my case will represent a LocationId.<\/p>\n This is important in my usage, as you will see later on.<\/p>\n Here is the APIHub.cs file:<\/p>\n 5.<\/strong> As you can see above, my Hub has only a single method, which is called from clients when they want to connect to the Hub, passing the LocationId that they want to monitor. For my purposes, the communication from the server to the client will happen outside of the Hub, therefore I need the \u201cHubUtility\u201d class file.<\/p>\n The reason for this is because it implements an interface that is in the namespace \u201cCore,\u201d which is where my repository class is that will need to trigger the call back to the specific clients that are monitoring a LocationId.<\/p>\n Since I can\u2019t call Hub methods directly from outside of the context of the Client-Hub connection, I must use this HubUtility class and it will make use of SignalR\u2019s ability to use a \u201cHubContext.\u201d It will then use it to trigger the call-back to its connected clients.<\/p>\n I place this HubUtility class in the hubs directory on the API site so it is in the same directory as our Hub file.<\/p>\n Here is the \u201cHubUtility.cs\u201d:<\/p>\n And here is the \u201cIMessageHub.cs\u201d Interface that I placed with the rest of my \u201cCore\u201d files on the API site:<\/p>\n 6.<\/strong> We use \u201cAutofac\u201d in our application so in the API site\u2019s \u201cGlobal.asax.cs,\u201d we need to register the HubUtility so it can be found. If you don\u2019t use Autofac then this will not be necessary.<\/p>\n In the \u201cApplication_Start\u201d method, I added the following under the config register statements:<\/p>\n 7.<\/strong>\u00a0In my repository class file, we use dependency injection to inject an object that is of the interface \u201cIMessageHub\u201d which HubUtility implements.<\/p>\n This will allow me to make my call back to my HubUtility class method passing the appropriate LocationId, which will in turn make use of the \u201cAPIHub\u201d context, and will trigger the client side method call on clients that have connected to the Hub passing that particular \u201cLocationId.\u201d<\/p>\n Here is that pertinent code:<\/p>\n SignalR makes using web sockets very easy to facilitate real-time updating of data on a website. There is also the use of SQL Dependency that would allow the ability to monitor specific data within your database and trigger calls to clients when that data is changed in the database. We chose to not use this method as our data may not always be in the database. In fact, it is changing to be in a remote CRM located elsewhere that we are communicating with using their API.<\/p>\n Doing it the way we have implemented it, using the HubContext, we can trigger the call whether we continue using a local database or some other remote data repository such as a CRM.<\/p>\n I am looking forward to finding new ways to make use of SignalR in the future. I hope this helps at least one other person, with either introducing them to the power of SignalR or demonstrating another possible usage, other than a Chat application.<\/p>\n Although my implementation may have some unique circumstances due to the complexity of how the application was constructed, I am hopeful that it has demonstrated how SignalR can be used outside of just the Client-Hub usage that a Chat application uses, and shows how you can use SignalR to trigger communication with connected clients from deep inside your application.<\/p>\n I feel that I have only scratched the surface of the possibilities that SignalR has to offer. For some more excellent information regarding SignalR please see Brad Trebilcock\u2019s post<\/a>. Anywhere data is displayed and updated, SignalR may possibly hold the answer to a more useful website and, maybe more importantly, a better user experience.<\/p>\nusing Microsoft.Owin;\r\n\tusing Owin;\r\n\tusing Microsoft.Owin.Cors;\r\n\tusing Microsoft.AspNet.SignalR;\r\n\r\n\t[assembly: OwinStartup(typeof(API.Startup))]\r\n\tnamespace API\r\n\t{\r\n\t public class Startup\r\n\t {\r\n\t public void Configuration(IAppBuilder app)\r\n\t {\r\n\t \/\/ THIS IS THE DEFAULT MAPPING TO '\/signalr'\r\n\t \/\/app.MapSignalR();\r\n\r\n\t \/\/ Branch the pipeline here for requests that start with '\/signalr'\r\n\t app.Map('\/signalr', map =>\r\n\t {\r\n\t \/\/ Setup the cors middleware to run before SignalR.\r\n\t \/\/ By default this will allow all origins. You can\r\n\t \/\/ configure the set of origins and\/or http verbs by\r\n\t \/\/ providing a cors options with a different policy.\r\n\t map.UseCors(CorsOptions.AllowAll);\r\n\r\n\t var hubConfiguration = new HubConfiguration\r\n\t {\r\n\t \/\/ You can enable JSONP by uncommenting line below.\r\n\t \/\/ JSONP requests are insecure but some older browsers (and some\r\n\t \/\/ versions of IE) require JSONP to work cross domain\r\n\t \/\/ EnableJSONP = true\r\n\t };\r\n\r\n\t \/\/ Run the SignalR pipeline. We're not using MapSignalR\r\n\t \/\/ since this branch already runs under the '\/signalr' path.\r\n\t map.RunSignalR(hubConfiguration);\r\n\t });\r\n\t }\r\n\t }\r\n\t}<\/pre>\n<script src='\/Content\/scripts\/jquery-1.9.1.js'><\/script>\r\n\t<script src='\/Content\/scripts\/jquery.signalR-2.1.1.min.js'><\/script>\r\n\t<!-- REFERENCE THE AUTO-GENERATED SIGNALR HUB SCRIPT THAT RESIDES ON THE API -->\r\n\t<script src='\/API\/signalr\/hubs'><\/script><\/pre>\n
\r\n<script type='text\/javascript'>\r\n\t$(function () {\r\n\t\t\/\/ ************************************************************************\r\n\t\t\/\/ TURN ON SIGNALR CLIENT-SIDE LOGGING\r\n\t\t$.connection.hub.logging = true;\r\n\r\n\t\t\/\/ METHOD CALLED FROM SERVER-SIDE CODE\r\n\t\t$.connection.APIHub.client.refreshList = function () {\r\n\t\t\t\/\/ DETERMINE IF CLIENT HAS CHECKIN OPEN\r\n\t\t\tvar listOpen = false;\r\n\t\t\tvar windows = Ext.ComponentQuery.query('openitems')[0].items;\r\n\t\t\tfor (var i = windows.items.length - 1; i >= 0; i--) {\r\n\t\t\t\tvar toolbar = windows.items[i];\r\n\t\t\t\tvar target = toolbar.items.items[0].id;\r\n\t\t\t\tlistOpen = target.indexOf('list') > 0 ? true : false;\r\n\t\t\t\tif (listOpen) break;\r\n\t\t\t}\r\n\r\n\t\t\t\/\/ ONLY REFRESH EXTJS STORE IF LIST IS OPEN\r\n\t\t\tif (listOpen) {\r\n\t\t\t\tvar listStore = Ext.getStore('List.store.ListLocations');\r\n\t\t\t\tlistStore.load({ params: { 'locationId': Session.user.LocationId } });\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t\/\/ START CONNECTION USING THE USER'S LOCATION ID\r\n\t\t$.connection.hub.start()\r\n\t\t\t.done(function () {\r\n\t\t\t\tconsole.log('SignalR connected, connection id = ' + $.connection.hub.id);\r\n\t\t\t\tconsole.log('Session.user.LocationId = ' + Session.user.LocationId);\r\n\t\t\t\t$.connection.iCHub.server.connectToHub(Session.user.LocationId);\r\n\t\t\t})\r\n\t\t\t.fail(function (data) {\r\n\t\t\t\tconsole.log('SignalR failed to connect: ' + data);\r\n\t\t});\r\n\r\n\t\t\/\/ REPORT CONNECTION ERROR\r\n\t\t$.connection.hub.error(function (error) {\r\n\t\t\tconsole.log('SignalR error: ' + error);\r\n\t\t});\r\n\r\n\t\t\/\/ IF DISCONNECTED, ATTEMPT RESTART AFTER 5 SECONDS\r\n\t\t$.connection.hub.disconnected(function () {\r\n\t\t\tsetTimeout(function () {\r\n\t\t\t\t$.connection.hub.start()\r\n\t\t\t\t\t.done(function () {\r\n\t\t\t\t\t\tconsole.log('SignalR reconnected, connection id = ' + $.connection.hub.id);\r\n\t\t\t\t\t\t$.connection.iCHub.server.connectForCheckins(Session.user.LocationId);\r\n\t\t\t\t\t})\r\n\t\t\t\t\t.fail(function (data) {\r\n\t\t\t\t\t\tconsole.log('SignalR failed to reconnect: ' + data);\r\n\t\t\t\t});\r\n\t\t\t}, 5000);\r\n\t\t});\r\n\r\n\t\t\/\/ THIS ENSURES CONNECTION IS STOPPED WHEN WINDOW IS UNLOADED\r\n\t\twindow.onbeforeunload = function (e) {\r\n\t\t\t$.connection.hub.stop();\r\n\t\t};\r\n\t\t\/\/ ************************************************************************\r\n\t});\r\n\t<\/script>\r\n<\/pre>\nusing System;\r\n\tusing System.Collections.Generic;\r\n\tusing System.Web;\r\n\tusing Microsoft.AspNet.SignalR;\r\n\r\n\tnamespace API\r\n\t{\r\n\t public class APIHub : Hub\r\n\t {\r\n\t \/\/ CALLED FROM EACH CLIENT THAT CONNECTS TO HUB\r\n\t public void ConnectToHub(string locationId)\r\n\t {\r\n\t \/\/ MAP LOGICAL USER 'LOCATIONID' TO THE 'CONNECTIONID' USING GROUPS.\r\n\t \/\/ THIS ALLOWS US TO SEND TO THE 'GROUP' OUTSIDE OF THE HUB, WHERE THERE\r\n\t \/\/ IS NO CONCEPT OF THE 'CONNECTIONID'\r\n\t Groups.Add(Context.ConnectionId, locationId);\r\n\t System.Diagnostics.Debug.WriteLine('HUB: CONNECTFORCHECKINS: ' + locationId);\r\n\t }\r\n\t }\r\n\t}<\/pre>\nusing System;\r\n\tusing System.Collections.Generic;\r\n\tusing System.Web;\r\n\tusing Microsoft.AspNet.SignalR;\r\n\tusing Core;\r\n\r\n\tnamespace API\r\n\t{\r\n\t public class HubUtility : IMessageHub\r\n\t {\r\n\t public void RefreshListOnClient(string locationId)\r\n\t {\r\n\t \/\/ SETUP HUB CONTEXT TO THE 'APIHUB'\r\n\t var context = Microsoft.AspNet.SignalR.GlobalHost.ConnectionManager.GetHubContext<APIHub>();\r\n\r\n\t \/\/ TRIGGER METHOD ON APPROPRIATE CLIENTS THAT CONNECTED WITH 'LOCATIONID'\r\n\t context.Clients.Group(locationId).refreshList();\r\n\r\n\t \/\/ OUTPUT THAT METHOD WAS TRIGGERED AND FOR WHAT 'LOCATIONID'\r\n\t System.Diagnostics.Debug.WriteLine('HUB: RefreshListOnClient: ' + locationId);\r\n\t }\r\n\t }\r\n\t}<\/pre>\nusing System;\r\n\r\n\tnamespace ityCity.Core\r\n\t{\r\n\t public interface IMessageHub\r\n\t {\r\n\t void RefreshCheckinListOnClient(string client);\r\n\t }\r\n\t}<\/pre>\nvar builder = new ContainerBuilder();\r\nbuilder.RegisterType<HubUtility>().AsImplementedInterfaces().InstancePerApiRequest();<\/pre>\n
...\r\n\t\/\/ INSTANCE VARIABLE\r\n\tprivate IMessageHub _messageHub;\r\n\t...\r\n\t\/\/ DI INTO CONSTRUCTOR\r\n\tpublic Repository(..., IMessageHub messageHub)\r\n\t{\r\n\t\t...\r\n\t\tthis._messageHub = messageHub;\r\n\t}\r\n\t...\r\n\t\/\/ WITHIN SPECIFIC METHOD TO COMMUNICATE THAT RECORD WAS ADDED TO SITE\r\n\tthis._messageHub.RefreshListOnClient( record.locid );<\/pre>\nConclusion<\/h2>\n