Real-Time ASP.NET Core 3 Apps with SignalR Succinctly^®
by Dirk Strauss

CHAPTER 12

The JavaScript Code Explained

The chat.js file’s code we created in the chat application (Code Listing 13) functions similarly to the charting.js file’s code. I would suggest opening up both files and comparing them side by side to see how they are similar and where they differ.

In the first section (Code Listing 31) in the charting.js code, we create a new line chart object called lineChart using Chartist. You will notice that it references the <div> called chartArea by using its jQuery #id selector, #chartArea.

Code Listing 31

var lineChart = new Chartist.Line('#chartArea', {

labels: [],

series: [[]]

{

low: 0,

showArea: true

});

Next, we need to build a new SignalR HubConnection, as seen in Code Listing 32. You will notice that the withUrl("/chartHub") matches the endpoints.MapHub<ChartHub>("/chartHub") specified in the Configure method of the Startup.cs file. This was added to the Startup.cs file to map the incoming requests with the specified path to the specified SignalR Hub.

Code Listing 32

var connection = new signalR.HubConnectionBuilder().withUrl("/chartHub").build();

The next section of code in Code Listing 33 adds an event listener on the sendButton click. This will run the code every time you click the button to add a value. It gets the text value and ensures it is parsed to a float.

Note: You might want to do some more validation here, but for this demo, I didn’t add any.

The code then invokes the method on the server called ValueSender. This is the method we created in our ChartHub hub.

Code Listing 33

document.getElementById("sendButton").addEventListener("click", function (event) {

var strValue = document.getElementById("valueInput").value;

var chartValue = parseFloat(strValue);

connection.invoke("ValueSender", chartValue).catch(function (err) {

return console.error(err.toString());

});

event.preventDefault();

});

It might also be a good idea to add an event listener on the Enter key just after the user has added a value in the valueInput text box. Here in Code Listing 34, I’m using the jQuery #id selector again.

If the key being pressed equals 13, then the Enter key has been pressed. I then call the button click event of the Enter Value button, called sendButton.

Code Listing 34

$('#valueInput').keypress(function (e) {

var key = e.which;

if (key === 13) // the enter key code.

{

$('#sendButton').click();

return false;

}

});

When the ValueSender method on the ChartHub has been invoked, it in turn calls the ValueReceiver method on all connected clients (Code Listing 35). This checks to see if the chart value passed to it is a number and has a value.

It then pushes this value onto the lineChart object and updates the chart. Then it clears the text box and sets the focus to that text box, ready to receive the next value.

Code Listing 35

connection.on("ValueReceiver", function (chartValue) {

if (chartValue && !isNaN(chartValue)) {

lineChart.data.series[0].push(chartValue);

lineChart.update();

document.getElementById("valueInput").value = "";

document.getElementById("valueInput").focus();

}

});

The rest of the code in the charting.js file is self-explanatory. Let’s run the application and see the line chart in action.

Build modern ASP.NET Core apps

using Syncfusion® ASP.NET Core control suite.

80+ high-performance ASP.NET Core controls, including DataGrid, Charts, and Scheduler.
Lightweight and responsive.
Modular and touch-friendly.
Built-in themes.

Get Your Free Trial Now

The JavaScript Code Explained

DISCLAIMER: Web reader is currently in beta. Please report any issues through our support system. PDF and Kindle format files are also available for download.