An Implementation of SignalR Using Visual Studio 2013 (Dealing With Real Time Data)

Create a MVC web application from the New Project window as follows.



I gave the project the name "SignalRImplementation".

Your project solution will look such as follows.



After this please install Signal into our project solution by right-clicking References and select Manage NuGet packages as follows.



Then in the search window please enter SignalR as follows.



Select the first one Microsoft ASP.NET SignalR" (Version 2.2.0) and click on install. It will install SignalR components as follows.





After installing it will ask you to Accept the terms and conditions, please click on I Accept.

It will install all the components related to SignalR.



Click on Close.

Then please click on Close and please ensure that the SignalR J Query files are there inside the Scripts folder as follows.



After that just add a HTML Page to our solution and name it "index.html" as follows.






Then make sure you referred to jquery and the SignalR files as follows.



After adding a reference to the HTML Page then write a Document Ready function.

Adding a division inside the body with id as follows.



After this add a new item to our solution window and serch for " SignalR Hub Class (v2)" and name it "LiveDataShareHub".



After creating the hub open the HTML page then create a variable in the hub in jQuery as follows:



Remember on more thing. The Server Hub variable name should begin with a lower-case letter the same as your server Hub Name.

  1. var myHub = $.connection.liveDataShareHub;  
And after writing the preceding lines of code open our Server Hub Class named "LiveDataShareHub .cs".



Remove the Hello function and write a Server Method to share the live data to all the clients as follows:



Here a BLOB is a variable consisting of live data and then get into our index.html page and declare the BLOB variable and calling to the server method I am declaring one text box for entering data to update all the user's content inside the division with the id "MainSiganlRcontent" whenever the user enters text and clicks on the Share Live Data button.
  1. on click of Share button onclick="$.connection.liveDataShareHub.server.shareLiveData($('#InPutData').val())" 
That will update all the session user's content as follows:



For the final step you need to update one line of code inside the StartUp.cs file that is there inside our project solution as in the following: 
  1. public void Configuration(IAppBuilder app)  
  2. {  
  3. app.MapSignalR();  
  4. }  


Please follow Procedure step-by-step

Then host this solution then open in different sessions and enter some text and click on the button then see that the contents have been updated in all sessions including yours as well.

I am showing a demo as follows before clicking on the button.



After clicking on the button as follows.



After changing the text and clicking on the button.



It's simple. You can implement the same and you can customize it depending on your requirements.


Similar Articles