Message:

Subscribe rss
Blog categories
All | Backendless features
How to monitor Real-Time Connections in an Angular app
June 16, 2018 by Vladimir Upirov

Today we will talk about how to monitor client’s Real-Time Connections in your Angular application. This tutorial continues the guide on how to build Angular apps with Backendless. It is recommended to check out the previous article in this series before you continue for the reason that we will use the application from the previous post as the starting point for this tutorial. Alternatively, if you just want to start working with the it right away, just download the source code from this GitHub commit.

In many cases we want to see how many application users are online or offline, for example, it might be useful in a chat application. For the demo purposes,  in our application we will add a simple counter for count all connected clients. As we explore adding that functionality,  you will meet with Backendless Business Logic, Backendless Counters, Codeless and keep discovering Real-Time features:

image11 - How to monitor Real-Time Connections in an Angular app

The main idea is to have a counter and update it when a new client is either connected or disconnected. For that we will use Backendless Counters, but unfortunately, Backendless Counters do not support Real-Time updates yet, we are planning to add it in the nearest release. For now, we will use Backendless Real-Time database.

Firstly, run our application and make sure that everything works well. Run the following command inside your application directory:

Connections Event Handlers

To monitor client connections we will use Real-Time Event Handlers.  There are several types of Real-Time events handlers, but for the implementation of our feature we need just two of them: afterClientConnected  and clientDisconnected. We will use Codeless logic to demonstrate what precisely happens when these events trigger. You can easily implement the same logic using either JavaScript or Java.  Go to the Business Logic section of Backendless Console, select the Event Handlers tab and add both Real-Time event handlers as shown in the screenshots below:

image14 - How to monitor Real-Time Connections in an Angular app

image10 - How to monitor Real-Time Connections in an Angular app

image8 - How to monitor Real-Time Connections in an Angular app

As you can see, there is the “before|after” dropdown for the clientConnected event. It is because there are two different events: blocking beforeClientConnected and non-blocking afterClientConnected. You can use the beforeClientConnected event for example, to restrict a new incoming connection or add some validation. When a client disconnects, we have only one non-blocking clientDisconnected event, it’s because custom business logic has no influence on the disconnecting process. You can read more about the events in the Developer Guide.

Now, let’s open Codeless Designer and add some logic.

image4 - How to monitor Real-Time Connections in an Angular app

Each time when afterClientConnected is invoked we need to increment our counter, so add logic for it. As I said earlier, we will implement the solution using the Real-Time Database, but for now to see it working, let’s use Backendless Counters:

image5 - How to monitor Real-Time Connections in an Angular app

Specify a name for our counter, in my case it is activeConnections:

image12 - How to monitor Real-Time Connections in an Angular app

Now switch to the clientDisconnected event handler and add logic to decrement the counter:

image15 - How to monitor Real-Time Connections in an Angular app

Deploy the business logic so we can see it in action. Once it deployed, go to the Data screen and select Backendless Counters in the SYSTEM DATA section.

It is important to understand that when you deploy your business logic the first time and had your angular application opened the counter’s value will be wrong. It may happen because the client connected prior to the business logic being in place. As a result, when the app disconnects,  the counter will be decremented and will have a value of -1. To avoid this, close all the browser’s window where the application is running and change the current value to zero in Backendless Counters as shown below:

image3 - How to monitor Real-Time Connections in an Angular app

Open a few browser windows with your application and then refresh the counters table, you can see that value changes according to how many open application instances you have:

image13 - How to monitor Real-Time Connections in an Angular app

Use Data for Counters

As I mentioned earlier, we don’t have Real-Time support for Backendless Counters yet, so instead, let’s use the Real-Time Database.

Create a new Table with name Stats and specify two columns: key and value

image2 - How to monitor Real-Time Connections in an Angular app

Return to Business Logic and add logic for storing current counter value in the Stats table. The table will contain only one record where key is activeConnection and value contains the current value of the counter.

Currently the implementation of Real-Time event handlers in our business logic updates a Backendless counter. So now we would need to modify that logic so it updates a record in the database.  The logic for updating the record is the same for both use-cases: when a client connects or disconnects. The only different is whether we increment or decrement the value. In order to re-use the database update logic for both event handlers, let’s create a custom Codeless Function. Notice the function name is updateActiveConnectionsCounter  (the name is right next to the word “Function” at the top of the very first block in the codeless logic):

image6 - How to monitor Real-Time Connections in an Angular app

Once it is created and saved, let’s use the function inside our event handlers. You can find the custom function block in the Custom Functions menu in the codeless blocks toolbar:

image9 - How to monitor Real-Time Connections in an Angular app

image7 - How to monitor Real-Time Connections in an Angular app

Re-deploy the logic and return to the Data screen. Open/close browser’s window with application and you will see that object in Stats table is changing according to how many opened browser windows with the application you have:

image1 - How to monitor Real-Time Connections in an Angular app

If you have the same result as in the video above, congratulations! Now we are ready to modify our Angular app to display the count of active connections.

Connection Counter in Angular Application

Create a new component and service as we did it before with Angular CLI commands and modify the code for the files shown below:

appcomponent.html:

connections-counter.component.ts

stats.service.ts

That’s all, once your application refreshed you can check this out.

Summary

As you can see, it wasn’t hard to implement a Real-Time Connections Monitor in our Angular app. Now you have experience with Real-Time Event Handlers and it will come very handy when you need to add centralized business logic. All the changes we made today can be found in this GitHub commit. You can take a look at demo app by following this link.

In the upcoming posts, I will show you how to add User Services and setup some Roles Permissions for protect our app data.  

Thank you for reading this post, hope you enjoyed it!

Share this post
Tweet about this on TwitterShare on FacebookGoogle+