Building and Deploying a SignalR Chat Application – Part 2

by

Introduction

In previous post we discussed the frontend component of SignalR chat application. Today our focus will be on the backend side of the application. Previous posts can be accessed from the following links

All the source code is available from GitHub repository (signalrchat branch).

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

Recap

Following picture from previous post shows how the code folders are structured

and here is the picture showing the frontend part for the reference:

With this information, lets continue with the backend code in next sections.

Backend Code

Lets see how the solution is structured for the backend part:

Its a standard .NET6 based WebAPI.

The red-arrows above points to code related to chat functionality. Lets explore a little bit code from these files.

Program.cs

This contains the startup code for our application and here we’ve wired-up SignalR Hub and some other chat related code:

Lets explore these components next.

PresenceTracker

This class provides a basic mechanism is to track online users in-memory and some helper methods as shown below:

This is registered as a singleton in the application. Code is very basic and hopefully self explanatory. However, feel free to updated as per your requirements..

ChatHub

ChatHub is the main class where BrowserClient will connect. PresenceTracker is injected via constructor injection.

Override methods onConnectedAsync() and onDisconnectedAsync() are triggered when a user connects with the hub or when they are disconnected.

Join() ,Say() and GetHistory() are the methods which triggered when called via the UI. We’ve covered these client-side parts in the previous post. Following is the screenshot of relevant JavaScript code your reference:

ChatHubLogFilter

Following picture shows the ChatHubLogFilter class which is wired-up along with ChatHub.

  • HubFilters Allow custom code to be executed before and after Hub methods are invoked.
  • HubFilters works in similar way of middlewares. They provide an easy way to plug into every message.
  • Example Use cases: Logging conversations in a chat app. or filtering and validating incoming data etc.

For more information check this page from Microsoft.

ChatEvent and EventType

Every user action is represent as a ChatEvent as shown below:

For example in ChatHub class, when user send a chatmessge to backend, it creates a new instance of ChatEvent with appropriate data for further usage. EventType enum helps with event classification. See the usage in following code block from ChatHub –>Say() method:

ChatRoom

ChatRoom class models a simple chatroom on the backend:

This is also registered as singleton in startup and used as the central location to store chat-message in memory.

Following is how the class looks like:

This class is used by ChatHub for storing incoming messages or get the history of message etc.

Dependency Diagram

Following is the dependency diagram generated using NDepend.

That’s all for the backend code part. You can check the source code for more details.

Source code is available from GitHub repository (signalrchat branch).

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

In next post, we will cover the deployment topic.

Summary

In this post, we cover the backend building blocks of SignalR application.

We saw that Hub is the main component when using SignalR. It is wiredup in application.cs class to an endpoint which a client application can use (e.g. frontend JavaScript code).

We also configured a HubFilter, which are similar to middleware and provides an easy way to plugin to every message.

We also saw simple ways to model and ChatRoom and different ChatEvents on the backend and a simple mechanism to track online users.

In the next post, we will see the deployment options.

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