Building and Deploying a SignalR Chat Application – Part 1

Introduction

In previous post on topic of Real-Time Web using SignalR we discussed how this library simplifies adding real-time web functionality to applications.

Today, we will continue forward from our previous learning and start setup a very simple chat application.

Furthermore, to cover topics on frontend, backend and deployment, following structure is planned:

• Application Introduction and Setup Frontend (HTML, JavaScript, CSS) – Part 1
• Application Backend (.NET6, SignalR) – Part 2
• Application Hosting/Deployment (Docker, AWS Lightsail Container Service) – Part 3

So, lets start with the application overview and Part-1 activities.

What are we Building?

Application is a very basic single-page, web based chat application.

• In this version, it will not require user-registration/authentication.
• Anyone can join the chat application.
• All the chat data will be held in-memory.
• The focus will be to setup a starting point for such applications which can be further extended as needed such as user registration and/or chat-data persistence etc.

Initial Screen

Initially when user visit the application URL, they will see the following initial UI:

As application loads,

• A SignalR connection is established with the backend Hub.
• The SignalR Connection-Id is used as initial identification of the visitor/user .
• At this stage, user is kind of connected in anonymous mode and represented by only connection Id (Item No. 1 in above picture).
• User can see all the on-goin chat messages, but cannot send message to chat channel/group and cannot perform some other functions.

User has option to enter a Nickname/Alias and Join the chat (Item no. 2 in above picture).

Lets see what happens when user join the chat with a nickname in the next section.

User(s) Join Chat

Once user click the Join button, the UI is updated as follows:

• User is now represented with nick/alias (item 1 and 2 in above pic).
• User can send chat-messages to channel.
• Clear button and Chat-history buttons are visible.

Now, same time, multiple users can join the chat (you can simulate it by opening a new tab and joining with a different name) and now a simple chat can be started.

Following screenshot shows the finished application UI.

check the deployed application on https://signalrchat.awsclouddemos.com/

Solution Step

If you haven’t already, I will suggest to read the previous post as we’ll be building on the previous learning and will not go into basics. I am assuming that you are already aware of SignalR basics, like HUB, JavaScript Client and basic communication among those.

Also for the source code I’ll be using the same GitHub repository from earlier post, but I’ve created a new branch signalrchat and that way we’ll manage all the changes related to this application in this branch.

Following picture shows the structure of source-code folders.

Front-End Code (HTML)

Here is the folder structure in VS-Code

index.html contains HTML markup for our User Interface

For data binding, I used KnockoutJS, but you can easily translate it to Angular, React or jQuery code (I have plan to build clients using React and Angular in later posts).

chatArea div is further arranged as follows:

and initially this is rendered as follows:

and once user enters the nickname and click the Join button, the UI is updated as follows:

onlineArea div is structured as follows:

and here is how the UI is updated with the data

Thats all for the HTML markup, lets see the JavaScript part next.

Frontend Code (JavaScript)

index.js (JavaScript)

index.js is the main JavaScript file for our application. There are few imports on the top. DemoApp is an ES6 class, which contains application code and there is some boiler-plate knockout binding code in the ready function:

here is how the ready function is setup

DemoApp

Following screenshot shows the DemoApp Class structure:

constructor is used to initialize properties and SignalR event-wiring as follows:

in picture above, you can see that it is initializing some properties with knockout observable or observableArray.

We also have SignalR connection code in constructor as follows:

in constructor, we also have SignalR event wiring for handler-code blocks which server (.NET 6 Hub) can call on client:

That’s all the code setup in the constructor.

Application Code Flow

Once Index.html page is loaded, ready function inside index.js is called, which calls the star() method on demoApp instance.

if connection is successful, some variables are setup otherwise in catch block try to call the start() method again after few seconds.

Now at this point, there is some processing on the server (HUB), which we’ll cover in details in next post, once Hub does that processing, it calls methods on client with some data:

• Call signalRConnected() method only on the caller client.
• Call chatMsgReceived() method on all connected clients.
• Call onlineUsers() method on all connected clients (here server send all online users list as payload)

Lets see how these methods look on the JavaScript code:

Code is self explanatory, it is basically processing data from server and setting up some properties on the client-side, which knockout binding will reflect on the UI.

as mentioned before, at this stage user is connected to chat, not joined with a nickname yet and therefore is represented with a connection-id as follows:

For Join() Function, once user click the button, JavaScript code make the call to HUB as shown below:

Similar approach for other buttons handler as well, they call some code on the HUB, clearChat() function just clears the local JavaScript array.

Now, backend hub receive these calls and do some processing and then can call different functions on clients as needed. This is the similar communication we discussed earlier.

Here are other methods, which Hub can call on clients:

setNickName() is called in response to user click the Join button on UI.

chatHistRecieved() is called in response to user clicking the ChatHistory button on the UI.

In general any method with signature this.connection.on(“methodname”) is called by the HUB based on requirements.

That’s it for all the JavaScript code part. Go ahead and check index.html and index.js file from repo for details (signalrchat branch). With this we have covered the frontend part of the application.

You can check the deployed online demo at https://signalrchat.awsclouddemos.com/

Summary

In this post, we discussed a simple chat application requirements, its structure and building blocks. We learned the our chat application flow, how user are joined and some basic functionality around chat messages.

We saw the HTML and JavaScript code structure and the wiring between UI and the JavaScript. However we did not covered the backend part yet.

In next posts, we will check details about the .NET6 backend part and simple deployment options.

Let me know if you have some comments or questions. Till next time, Happy coding.

My Recent Books