What is ASP.NET SignalR:
ASP.NET SignalR is a library for ASP.NET developers to add real-time web functionality to their applications. Real-time web functionality is the ability to have server-side code push content to the connected clients as it happens, in real-time.
SignalR takes advantage of several transports, automatically selecting the best available transport given the client’s and server’s best available transport. SignalR takes advantage of WebSocket, an HTML5 API that enables bi-directional communication between the browser and server. SignalR will use WebSockets under the covers when it’s available, and gracefully fall back to other techniques and technologies when it isn’t, while the application code remains the same.
SignalR also provides a simple, high-level API for doing server-to-client RPC (call JavaScript functions in a client’s browser from server-side .NET code) in an ASP.NET application, as well as adding useful hooks for connection management, such as connect/disconnect events, grouping connections, authorization.
How to use ASP.NET SignalR In your Project:
Step 01: Create ASP.NET MVC Project First from Visual Studio.
Step 02: SignalR Developed with JQuery, so at first we need to add the latest JQuery in our project
Step 03: After installing JQuery, we need to add SignalR Library in our Project.
Note: After Install SignalR we will see those packages in out reference
And also see those js files in the scripts section.
Step 04: Update Startup.cs Class
Step 05: Create HUB For Client-Server-Client Connection
Step 06: Update Customer Hub
In this Section we create a Method called CustomerBroadcast, we can create this by any name as we need, and we create an object of HubContext so that we can find all active clients from here and notify them data as well as when we need.
The last line of this method is very important, context.Clients.All.xxxx this (xxxx) this is the method that we will create in our front side and trigger from here when needed, but this method should be started with camel case.
Step 07: Create Customer Model
Step 08: Add Db Context to Communicate with Database by Entity Framework, Add migration and Update Database as well
Step 09: Now we will create an Action (Insert) in Home Controller and Hub Method When Need to Broadcast to Clients. It could be Create/ update/ delete/ etc. and when this method is called, this will automatically invoke client-side function by Running SignalR Hub.js.
Step 10: Create View for Insert Action
Step 11: Create Index View for See Details, add SignalR js Reference from Scripts folder, then add Virtual path for hub connection, and then add our Customer.js File (we will add bellow)
Step 12: Create a new js file for client update.
Note: When our Server side Method (ProjectHub.CustomerBroadcast()) is call from anywhere in our server side,
Then this con.client.getUpdatedData function also called from client side automatically, and we will get updated data.
Update Customer.js File like bellow.
That’s it, now run the application and Go to Insert page, fill up the form and submit.
in Index page, firstly hub.start function will call and we will see the data, but when any server-side data updates, all clients also updated as expected.
Final Output:
For testing, we have opened two browsers, one for insert and another one for See the Customer List. So when we Fill up the insert form and submit the form, all clients will receive those data that server pushed, and updates table by JQuery. so No need to refresh or make another server request, this is the beauty of ASP.NET SignalR. 🙂
Source GitLab: https://gitlab.com/Sraban75/signalrefcf.git
—————————— The End——————————