In my last article, we discussed about the concept of
SignalR and how we can use it to create a simple web based group chat. It included a good deal of explanation of what and why
SignalR is a good candidate to create a real time application. We will not get into details again and before you start with it, I would recommend you to read my previous article here. Our this discussion will be another practical implementation of what we had learnt in the last article.
Let’s create another sample application to demonstrate the use of
SignalR. This application will be an html page, which displays some data from the database. At the back-end of this sample, we will have another application, say any form, windows service or RSS feed, which will insert the new data into the database. As soon as the new data is added to the database, that will be reflected on this html page.
An important point before we start the discussion is that this example will not only use the
SignalR, but also the concept of
SqlDependency, so that our server hub get’s notified about any change in the database and broadcast the latest data to the users. To describe the logic briefly, our hub will subscribe to
SqlServer for any change in its data in the database, get notified, fetch the latest data and broadcast it to the html page. So our application will consist of following 3 separate components.
- Sample table called
Usersin a Sql database, with its
- An application with a html page to display the list of users from the database. This will also include a
webapiwhich receive data from a third application and save it into the database and a
SignalRcomponent to broadcast the latest data to the users.
- An application with an html page to submit new data to the database by making calls to the webapi.
So our overall application flow will be like the following:
Database setup: Create a new table named
Users, in a sample database. In order to use the
SqlDepedency, we need to enable the
ServiceBroker for the database. This can be done by using the following command:
ALTER DATABASE Database_Name SET ENABLE_BROKER
or, from the UI by selecting the database, right click on its properties, go to the
Options, navigate to the
Service Broker section and change the value to
Broker Enabled property.
Create the main application: This application will consist of following components:
Webapi to receive the data from the data feed application and save into the database.
html page to display the data from the database.
SignalR component which will refresh the html page with latest data, as soon as the new data is added to the database.
Let’s create a
Webapi which can receive the data from the user and store it in the database. For this, we add the references to the
OWIN packages, using the nuget package manager. Once the references are added, we add a new class file of type
Web API Controller class. Let’s call it
DataFeedController.cs. Add a
POST method to receive the data from the user and store it in the database, using the entity framework
.So our controller would look like below
Now in order to host the
SignalR, we add a file named
Startup.cs and add the routing template for
Webapi and register both the
SignalR to the
OWIN pipeline. When we start the application, it will result in hosting of the
Webapi at the back-end.
Now in order to add the real-time functionality to the application we add a class named
RealtimeDataHub.cs, derived from the
Hub class and will be used as a middleware between the database and the
html page (which is used to display the data). We will not get into what this hub class is and its role, as we discussed about it in the previous discussion here. This class will have a method named
GetUsers() which will get the data from the database and broadcast it to the connected users. Inside this method, the hub also subscribes to the sql for getting notifications for change in the database, using the
OnDependency change event of the
SqlDependency class. See the code below:
Create data feed application: Create a new empty project and add an html page to it. This html page will have 3 textboxes and a button to store the data in the database, by calling the
WebApi created in step 1 above. We will call it as data feeder application. In a real time scenario, we can have any windows service which is fetching data using some api and storing it in the database. So our html mark up will be like below:
Next, use the ajax call to send the data to the webapi controller, which stores it in the database.
Note that here we have used the localhost url to refer to the location where the web api is hosted. You can replace it with the actual url of the
So our setup is complete now. In order to start the application, first run the html page of the main application, which displays the data from the database. When this application is started, its corresponding web api also gets hosted. First time, there will be no data. So let’s start the data feeder application also and add some data. Add the new data and Save it. As soon as the new data is added, it immediately gets reflected in the main applications home page. See below:
So now need to use timer based calls. Use the
SignalR functionality and create real time applications. Hope you enjoyed reading it. Happy coding…!!!