Page 59 - MSDN Magazine, April 2018

Figure 2 Members of the Hub Base Class
client framework. You need to have this setup work done in every Razor (or plain HTML) view that interacts with a SignalR endpoint. To communicate with a SignalR endpoint from within a Web browser, the first thing you do is add a reference to the SignalR
JavaScript client library:
<script src="~/scripts/signalr.min.js"> </script>
You can get this JavaScript file in a number of ways. The most recommended is via the Node.js Package Manager (NPM) tool that’s available on nearly any development machine, espe- cially after Visual Studio 2017. Through NPM, you look for the ASP.NET Core SignalR client named @aspnet/signalr and install it. It copies a bunch of JavaScript files to your disk, only one of which is strictly needed in most scenarios. Anyway, it’s a simple matter of linking a JavaScript file and you can get that file in many other ways, including copying it from an older ASP.NET Core SignalR project. However, NPM is the only supported way the team pro- vides for getting the script. Note also that ASP.NET Core SignalR no longer depends on jQuery.
In the client application, you also need another, more specific, segment of JavaScript code. In particular, you need code like this:
var progressConnection =
new signalR.HubConnection("/progressDemo");
progressConnection.start();
You create a connection to the SignalR hub that matches the specified path. More precisely, the name you pass as an argument to HubConnection should be one of the names you mapped to a route in the startup class. Internally, the HubConnection object prepares a URL string that results from the concatenation of the current server URL and the given name. That URL is processed only if it matches one of the configured routes. Note also that if client and server are not the same Web application, then Hub- Connection must be passed the full URL of the ASP.NET Core application that hosts the SignalR hub, plus the hub name.
Member
Description
Clients
Property that exposes the current list of clients managed by the hub.
Context
Property that exposes the current caller context, including information such as the ID of the connection and the claims of the user, if available.
Groups
Property that exposes the various subsets of clients that may have been programmatically defined as groups within the full list of clients. A group is typically created as a way to broadcast specific messages to a selected audience.
OnConnectedAsync
Virtual method invoked whenever a new client connects to the hub.
OnDisconnectedAsync
Virtual method invoked whenever a new client disconnects to the hub.
to show a direct and bidirectional binding between the client and the hub without any sort of intermediation by a controller. In this case, the hub will take a slightly more shaped form:
public class SampleChat : Hub {
// Invoked from outside the hub public void Say(string message) {
// Invoke method on listening client(s)
return Clients.All.InvokeAsync("Said", message); }
Unlike the canonical SignalR chat example that’s rehashed in dozens of blog posts, the example I’ll present here doesn’t really set up a bidirectional conversation between client and server. The connection is established from the client but after that the client won’t send any further requests. The server, instead, will be mon- itoring the progress of a task and pushing back data to the client whenever appropriate. In other words, the
}
hub class needs to have public methods as the previous code only if the use case requires that the client directly calls into them. If it seems a bit obscure, the follow- ing example will shed enough light.
Monitoring a Remote Task
Here’s the scenario: An ASP.NET Core application presents the user some HTML interface for the user to trigger a remote task (say, the creation of a report) that can be lengthy. Because of this, as a developer you want to display a progress bar to pro- vide continuous feedback (see Figure 3).
As you can guess, in this example both the client and the server are setting up a SignalR conversation live in the context of the same ASP.NET Core project. At this stage of development, you have a fully functional MVC project just extended with the startup code of Figure 1. Let’s set up the msdnmagazine.com
Figure 3 Using SignalR to Monitor the Progress of a Remote Task
April 2018 53