Web client will initial per request to server and get response considerate as normal HTTP’s round trip. As you could discovery that the request always raise from client, but how about if our server would like to notice all clients or partial client(s) for specific purposes?
You might think about that creating timer and polling(requesting) what you are interest from server per intervals. Yet, this was a kind of solution for watching resource(s) between server and client. But this approach seems not an efficiency way for data synchronization.
So came out the new technology called: SignalR. The base ideal of SignalR would be:
Client(s) don't ask, server will inform you while if data need re-synchronizationSignalR takes advantage of HTML5 WebSocket API that provide full duplex communication between server and client. Invoke method(s) just like RPC (Remote Procedure Call) make exchange data more easily and efficiency.
SignalR has been introduced to Microsoft.AspNetCore.App (Since SDK 2.2). That means if we create standard Asp.Net Core project we have SignalR function built-in already😃.
For demonstrate how to build up a simple SignalR application, we created empty Asp.Net Core project, and we need bind SignalR to sever and hook each client setup connection to server via Javascript library for completed whole process.
Server side
Image that we have dashboard monitoring system that will display some events coming from back-end to font-end in real time. This kinds of applications would be good example to take leverage of SignalR.
Beginning for introduce SignalR, we could always create a Hub first.
For Hub you could think that it's data center that bridge communicate among server and client. (With Hub Protocol will help us serialize and deserialize different formats)Inside Startup.cs, add below code snippet:
Create service for sending mock events to all client(s) during a period of time.
Client side
Install client library via below command:
npm install @aspnet/signalrWrite down simple html page: index.html
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SignalR Lab</title>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<!--include library of signalr.js-->
<script type="text/javascript" src="lib/signalr.min.js"></script>
</head>
<body>
<div>
<ul id="events"></ul>
</div>
<script>
$(function () {
<!--Connect to server hub: eventHub, transport type default would be: websocket-->
var connection = new signalR.HubConnectionBuilder()
.withUrl("/eventHub")
.build();
<!--Hook callback for listening message from server side->
<!--Please notice that the name must exactly same with function declare on server side-->
connection.on("SendNoticeEventToClient", function (message) {
$("#events").append("<li>" + message + "</li>");
});
<!--error logging-->
connection.start().catch(function (err) {
return console.error(err.toString());
});
});
</script>
</body>
</html>Demonstrate
Running the lab application.
You could also find the complete source code here⬇
https://github.com/tocalai/SignalR.Lab
Reference
