Sharing Top Content from the Angular-sphere.

Real-time server monitoring app with Angular 4 , NodeJS & Chart.js

  • We will be creating two code repos, the first is a node application that will monitor the OS parameters and sends it via websocket to the second app which is an Angular 4 application, the Angular app will utilize Chart.js to represent the server status graphically.
  • Let’s create our server app, by running the following commands in our terminal

    We want our server to run Ubuntu 16.04, have a static IP address and have NodeJS installed, so replace the content of with

    and create a provisioning script named with the content

    In the script above, we first update the apt repository and then we install NodeJS from a private PPA, install which is required by some NodeJS modules and install which helps us keep a node script running forever.

  • No we start the vagrant server with th command:

    Lets create a file with the content below in our directory

    Our contains 3 dependencies, –a very simple monitor for the built-in os module in Node.js, –monitor for any changes in your node.js application and automatically restart the server – perfect for development, and –enables real-time bidirectional event-based communication.

  • * which is an instance of the client

    * currently undefined, but will be assigned as an instance of from Chart.js

    * currently undefined, but will be assigned as an instance of from Chart.js

    * and will be used to store the variables returned from the section of the server code highlighted below

    Here we create an Doughnut chart to be used to display the free memory.

  • Finally let us run the Angular app, there is a server view in Angular IDE, in order to open it, select ‘Window’ then then , right click on and click , Angular IDE serves the application on localhost port 4200 by default, so open up in your browser to see the running app.

In this, Tutorial we will use Angular 4, Node.js & chart.js for building a real time server monitor that allows observing some OS parameters, such as free

@dunebook: Real-time server monitoring app with Angular 4 , NodeJS & Chart.js #nodejs #angularjs #angular4 #js #javascript #css

In this article we will be building a very simple monitor that allows to observe some OS parameters, such as free memory available. In this article we will be using the NodeJS, Angular 4 and Chart.js, so ensure you have node and Angular studio IDE installed. To create our development server we will be using vagrant, so check here for instructions to install vagrant on your operating system.

We will be creating two code repos, the first is a node application that will monitor the OS parameters and sends it via websocket to the second app which is an Angular 4 application, the Angular app will utilize Chart.js to represent the server status graphically.

Let’s create our server app, by running the following commands in our terminal

which helps us keep a node script running forever. No we start the vagrant server with th command:

–enables real-time bidirectional event-based communication.

) to the client.

to the client.

Let’s ssh into the vagrant server, install the node modules and start the web server

. In the opened terminal type the following commands to install Socket.io and Chart.js

Our client app looks like the image below, we’ll now go on to discuss the sections of the code.

life cycle hook called by Angular to indicate that Angular is done creating the component. Finally, we created some class variables to be used in the succedding sections.

Here we create a line chart to be used to display the 15 minute cpu load average.

server.

Here we empty the dataset for the doughnut chart and push new values, then we update the chart.

in your browser to see the running app.

Real-time server monitoring app with Angular 4 , NodeJS & Chart.js

Comments are closed, but trackbacks and pingbacks are open.