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

CHAPTER 6

Creating the Client Application

In the realtimechat project, expand the Pages folder and edit the Index.cshtml file.

The Index.cshtml File

Figure 23:The Index.cshtml File

You will see the following default HTML code.

Code Listing 11

@page

@model IndexModel

ViewData["Title"] = "Home page";

}

<h1 class="display-4">Welcome</h1>

<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>

</div>

Replace the code in the Index.cshtml file with the code in Code Listing 12.

Code Listing 12

@page

<form>

</div>

<label for="messageInput">Message</label>

</div>

</div>

</form>

<hr />

</div>

</div>

The code in Code Listing 12 simply adds text boxes for the user’s name and the message that they want to send. It also includes a send button. There is also a list called messagesList that will display all the messages received from the SignalR hub.

At the bottom of the code, you will see script references to signalr.js and chat.js. You will recall that we added the signalr.js file when we added the client-side libraries to our project (Figure 21). We have not, however, added the chat.js file to our project yet.

To do this, right-click your js folder and add a new JavaScript file, as illustrated in Figure 24.

Add New Item

Figure 24: Add New Item

Call the file chat.js and click Add. Your solution should now look as illustrated in Figure 25.

Added chat.js File

Figure 25: Added chat.js File

After adding your chat.js file, you should see the blank code editor. Add the following JavaScript code to your chat.js file.

Code Listing 13

"use strict";

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

//Disable send button until connection is established.

document.getElementById("sendButton").disabled = true;

connection.on("MessageReceiver", function (user, message) {

var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");

var encodedMsg = user + ": " + msg;

var li = document.createElement("li");

var currentUser = document.getElementById("userInput").value;

if (currentUser === user) {

li.className = "list-group-item list-group-item-primary";

}

else {

li.className = "list-group-item list-group-item-success";

}

li.textContent = encodedMsg;

document.getElementById("messagesList").appendChild(li);

});

connection.start().then(function () {

document.getElementById("sendButton").disabled = false;

}).catch(function (err) {

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

});

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

var user = document.getElementById("userInput").value;

var message = document.getElementById("messageInput").value;

connection.invoke("MessageSender", user, message).catch(function (err) {

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

});

event.preventDefault();

});

Let’s have a closer look at this JavaScript file. Essentially, it does three things:

It creates and starts a connection.
It creates an event handler for the Submit button that sends messages to the hub.
It adds an event handler to the connection object that receives messages from the hub and adds those received messages to the message list.

Note: I will not go into detail regarding the chat.js file’s code. Later on, we will create a SignalR charting app. This will use a similar JavaScript file called charting.js. I will expand on the JavaScript in the file when we discuss the real-time charting application.

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

Creating the Client Application

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.