Windows Performance

Performance Slowdown

Everyone at some point encounters the frustration of a slow PC. PC slowdown is something that can be very hard to pinpoint the exact cause of as some of the analysis required indepth understanding of hardware and software fundamentals and analysis.

The solution cycle usually usually consists of the following steps

Performance Fix cycle
Performance Fix cycle

We need to categorize and characterize the problems

Frequency:
Continually, Hourly, Daily?

Duration:
Seconds, Minutes, Hours?

Severity:
Sluggish, Crawling, Totally Locked-up?

Which Resources are affected:
CPU, Memory, Disk, Network?

Perception:
How does the user understand the problem?

Types of Performance Monitoring

Real Time Interactive Analysis

  • Task Manager
  • resource Monitor
  • Perfmon

Detailed Analysis via logs

  • Perfmon Binary Logs (BLG files)
  • Windows performance toolkit event trace logs (ETL files)

DHTMLX Gantt with Angular 4 and Socket.io

In this demo I’m going to be looking at using the Gantt Chart from DHTMLX inside an Angular 4 app using Socket IO to synchronize connected clients.

The DHTMLX Gantt is a component from DHTMLX who produce third pary components, one of which is the Gantt chart we’ll be using.

DHTMLX Gantt Chart Basic
DHTMLX Gantt Chart Basic

We’ll be using Socket.io which according to the website “Socket.IO enables real-time bidirectional event-based communication” – we’ll be using that to synchronize clients that are using the Gantt Chart real time. This means that if user A changes a task, user B will see those changes reflected real time.

socket.io
socket.io

First let’s set up and Angular 4 app using the Angular CLI (If you don’t have it follow my tutorial

http://malcolmswaine.com/2017/11/get-angular-4-nodejs-site-running-minutes/

As with most of my other demo’s I like to start in C:\demos on my local machine

Demos Directory
Demos Directory

navigate to the folder using a command prompt

Demos Directory Command
Demos Directory Command

from the command prompt let’s create a new Angular 4 app called ngSocketIOGantt by running the command

ng new ngSocketIOGantt
Angular 4 New Project With CLI tool
Angular 4 New Project With CLI tool

When the command is complete we should have a new Angular 4 project in a folder structure as so

Angular4 SocketIO DXHTML Gantt Folder Stucture
Angular4 SocketIO DXHTML Gantt Folder Stucture

The way we’re going to do this is to have two server processes running – one on port 8080 for servicing Socket IO clients and one other on port 4200 for serving regular static files.

First let’s create the server side bits we need to get up and running.

From the command prompt, drop into the ngSocketIOGantt directory that the Angular CLI tool created for us

cd ngSocketIOGanttOGantt

and install the NPM packages we’ll need to start servicing Socket IO connections.

npm install express socket.io --save
Install SocketIO Express on NodeJS
Install SocketIO Express on NodeJS

When the process has finished, create new file called app.js in the ngSocketIOGantt folder. NodeJS is going use this file to set up Socket IO configuration and event handling.

Create NodeJS App For Socket.IO
Create NodeJS App For Socket.IO

Next edit the app.js file (I’m using sublime text here) add the following script

var express = require('express');
var path = require('path');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var port = 8080;

app.use(express.static(path.join(__dirname, "src")));

io.on('connection', function(socket){
  console.log('new connection made');

  socket.emit('get-model', 
   {
     data: 
     [
       {id: 1, text: "Task #1", start_date: "2017-04-15 00:00", duration: 3, progress: 0.6}, 
       {id: 2, text: "Task #2", start_date: "2017-04-18 00:00", duration: 3, progress: 0.4}
     ],
     links:
     [ 
       {id: 1, source: 1, target: 2, type: "0"} 
     ]
   }
    );

  socket.on('send-model', function(updatedModel){
    console.log(updatedModel);
    socket.broadcast.emit('get-model', updatedModel);
  });
})

server.listen(port, function(){
  console.log("Listening on port " + port);
});

console.log("Node started");

At the top of the script we use require to obtain the Socket.IO library passing server instance we instantiated

var io = require('socket.io')(server);
var port = 8080;

We then declare the port we’re going to listen on

We the handle any connection events

io.on('connection', function(socket){

and upon a client connecting to the service we immedaitely send out some dummy data – obviously we wouldn’t do this in production, we would load from our database, but for the sake of keeping things simple we’ll just pass back hard coded data for now

socket.emit('get-model', 
   {
     data: 
     [
       {id: 1, text: "Task #1", start_date: "2017-04-15 00:00", duration: 3, progress: 0.6}, 
       {id: 2, text: "Task #2", start_date: "2017-04-18 00:00", duration: 3, progress: 0.4}
     ],
     links:
     [ 
       {id: 1, source: 1, target: 2, type: "0"} 
     ]
   }

We then set up and handler for when a client has changed the Gantt Chart and would like to push those changes to all connected clients. In this case we just take the data that been modified by the client and push it back out again to every client except the client that sent it

socket.on('send-model', function(updatedModel){
    console.log(updatedModel);
    socket.broadcast.emit('get-model', updatedModel);
  });

Your complete file should look something like this

Node Socket.IO DHTMLX Server
Node Socket.IO DHTMLX Server

Next let’s move onto the Angular client setup

Before we do anything, let’s add the Gantt packages for Node through NPM

Open up a command prompt and navigate to our newly created angular Project root directory. From there create run the following NPM commands

npm install dhtmlx-gantt --save
npm install @types/dhtmlxgantt --save 
Save NPM DHTMLX Gantt Packages
Save NPM DHTMLX Gantt Packages

Let’s also add the associated styling by including it into our styles.css. Open the file styles.css in the src directory with an editor

Add Gantt style to styles.css
Add Gantt style to styles.css

and add the following code

@import "../node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.css";
DHTML Gantt Style Import
DHTML Gantt Style Import

Next let’s create an Angular Service to connect with our Socket.IO backend to send and receive data. In our src\app directory create a file called gantt.service.ts

Create DHTMLX Gantt Angular4 Service
Create DHTMLX Gantt Angular4 Service

Edit the file and paste in the following TypeScript


import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import * as io from 'socket.io-client';

export class GanttService {
  // Our localhost address that we set in our server code
  private url = 'http://localhost:8080'; 
  private socket;

   sendModel(model)
   {
    this.socket.emit('send-model', model);   
   }

   getModel() 
   {
    let observable = new Observable(observer => {
      this.socket = io(this.url);
      this.socket.on('get-model', (data) => {
        
        console.log('in gantt service get model');
        observer.next(data);   
      });
      return () => {
        this.socket.disconnect();
      }; 
    })    
    return observable;
  } 
}

In summary, we start by importing the necessary Reactive Extensions

import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';

Next I get the socket IO libraries

import * as io from 'socket.io-client';

We declare that we need to connect to the Socket IO server on port 8080

private url = 'http://localhost:8080';

Then we declare a method to take the data that makes up the entries in our Gantt and send it back to the Socket IO server to propagate to anyone else that is listening

sendModel(model)
   {
    this.socket.emit('send-model', model);   
   }

Then we create a method to build and Observable and subscribe to the Socket IO

let observable = new Observable(observer => {
      this.socket = io(this.url);

and handle when the server sends the get-model event

this.socket.on('get-model', (data) => {

calling

observer.next(data);

will cause the any code that has subscribed to the Observable to be called passing the data as a parameter
 

Next let’s add the Gantt inside a new component that we can use as a directive

Create a new file called gantt.component.ts inside the src/app directory

Create New DHTMLX Gantt Component typescript
Create New DHTMLX Gantt Component typescript

Paste the following code into the file


import {Component, ElementRef, OnInit, ViewChild} from "@angular/core";
import "dhtmlx-gantt";
import {GanttService} from "./gantt.service";

import {} from "@types/dhtmlxgantt";

@Component({
    selector: "gantt",
    styles: [
        `
        :host{
            display: block;
            height: 600px;
            position: relative;
            width: 100%;
        }
    `],
    providers: [GanttService],
    template: "<div #gantt_here style='width: 100%; height: 100%;'></div>",
})
export class GanttComponent implements OnInit {
    @ViewChild("gantt_here") ganttContainer: ElementRef;

    connection;

    constructor(private ganttService: GanttService){
    }

    ngOnInit(){
        gantt.config.xml_date = "%Y-%m-%d %H:%i";
        gantt.init(this.ganttContainer.nativeElement);
        var that = this;

        gantt.attachEvent("onAfterTaskUpdate", function(id,item){            
            console.log('onAfterTaskUpdate ' + id);
            let ganttJson = gantt.serialize();
            that.ganttService.sendModel(ganttJson);
        });

       this.connection = this.ganttService.getModel().subscribe(data => {           
            console.log('getModel');
            console.log(data);           
            gantt.parse(data);            
       })
    }
}

I start by importing from Angular Core

  • ElementRef – A Dom reference to an element in our HTML
  • OnInit – We want to run our code when when Angular has finished setting up
  • ViewChild – We want to be able to reference child components

In the component decorator we register our Gantt Service and declare the markup we’re going to use as a template

providers: [GanttService],
template: "<div #gantt_here style='width: 100%; height: 100%;'></div>",

In our class declaration we get a reference to the Gantt we using as a child component

@ViewChild("gantt_here") ganttContainer: ElementRef;

Next we set the date format for the Gantt and initialize it

gantt.config.xml_date = "%Y-%m-%d %H:%i";
gantt.init(this.ganttContainer.nativeElement);

Whenever we change a task we want to propagate the event to the other client that are attached to this service, so handle the event onAfterTaskUpdate, serialize the data that forms the model for the gantt and then call the sendModel method we implemented in the GanttService sending our data. This will then send the same model to all the other gantt charts and they will all be updated with the same corresponding changes

gantt.attachEvent("onAfterTaskUpdate", function(id,item){            
            console.log('onAfterTaskUpdate ' + id);
            let ganttJson = gantt.serialize();
            that.ganttService.sendModel(ganttJson);
        });

Finally we subscribe to whenever socket io want to notify us that another client has changed the model

this.connection = this.ganttService.getModel().subscribe(data => {           
            console.log('getModel');
            console.log(data);           
            gantt.parse(data);            
       })

Edit the Angular app.module file so that we can import the necessary modules for supporting our gantt

Edit Angular App Module
Edit Angular App Module

Paste the following code into the app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { GanttComponent} from "./gantt.component";

@NgModule({
  declarations: [
    AppComponent,
    GanttComponent
  ],
  imports: [
    BrowserModule,
     FormsModule,
     HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Finally let’s add the component deceleration into our HTML. Edit the app.component.html file

and replace the market with the following

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <gantt></gantt>
 </div> 

We should be good to go now

Start the Socket IO we set up by opening a command prompt at the root of the project we created

Change To SocketIO Gantt Directory
Change To SocketIO Gantt Directory

And start node by running

node app.js
Start SocketIO
Start SocketIO

Next start the our second service to run our angular – again from our project root

npm start
NPM Start
NPM Start

This should start a server listening on port 4200

.** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Open two browser windows on the url http://localhost:4200/

Try changing the tasks in one of the windows – the corresponding task in the other window should move real time.

Gantt Socket.IO moves real time
Gantt Socket.IO moves real time

The full source code can be found at

https://github.com/malcolmswainecom/DXHTML-SocketIO-Angular4

How to get Jitsi Meet Client up and running in an Angular 4 app using an External JavaScript Library

In this article I’m going to be getting a bare-bones Jitsi Meet conference up and running inside an Angular 4 app.

If you’re not familiar with Jitsi Meet, it’s an open-source, community-driven video conferencing platform that securely connects users across browsers and devices.

You can access their web resource directly here

I’m also going to be Angular 4 and following on from the last post I created

How to get an Angular 4 NodeJS site up and running in minutes

So let’s get started!

Assuming you have set up your project as in the previous demo …

Let’s set up some directory structure inside the Angular app that we can consume our third-party JavaScript from.

Inside the src directory, create a folder called vendor, and inside the vendor folder create a child folder called jitsi

Angular4 Jisti Meet Vendor Directory



Download the JavaScript we need to get Jitsi up and running into the folder we just created by right click the below link and choosing Save Link As.

http://malcolmswaine.com/wp-content/uploads/2017/11/external_api.js

Jisti Meet Rename Text File
Donwload Jitsi Meet JavaScript API

 

Next open the app.component.ts file in your text editor from src/app directory (C:\demos\basic-angular-4\basicAngular4\src\app in my example)

Edit App Component
Edit App Component

Modify the app.component.ts file so that it looks like the following


import { Component, AfterViewInit } from '@angular/core';
import '../vendor/jitsi/external_api.js';

declare var JitsiMeetExternalAPI: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
   domain:string = "meet.jit.si";
    options: any;
    api: any;

 ngAfterViewInit(): void {
     
    this.options = {
      roomName: "JitsiMeetAPIExample",
      width: 700,
      height: 700,
      parentNode: document.querySelector('#meet')
    }

    this.api = new JitsiMeetExternalAPI(this.domain, this.options);
    }
}

Now we need to make sure that the JavaScript is included into the dependencies of the project, so in the project root open the .angular-cli.json file in an editor and add an entry to the scripts array

"scripts": ["vendor/jitsi/external_api.js"]
Add an Entry to Angular CLI Scripts
Add an Entry to Angular CLI Scripts

As in the previous example, we need do display our conference meeting down an a DOM element that we selected in the options here #meet
Edit the HTML template app.component.html

Edit App Component HTML
Edit App Component HTML

<div style="text-align: center;">
  <h1>Welcome to {{title}}!</h1>
  <div id="meet"></div>
</div>
 

Save Jitsi Meet HTML
Save Jitsi Meet HTML

Now let’s try running the app

Open a command prompt as Administrator and navigate to the Directory created the the Angular 4 CLI tool (in this case C:\demos\basic-angular-4\basicAngular4)

Open Command Promt Angular Jitsi Root
Open Command Promt Angular Jitsi Root

and run the command

npm start
NPM start Angular Jitsi
NPM start Angular Jitsi

Taking note of the host and port number (here it’s localhost:4200) paste the address into a browser window and you will see your Angular 4 Jitsi Client appear.

Jitsi Angular Up And Running In Minutes
Jitsi Angular Up And Running In Minutes

Sorry about the picture – my girlfriend is sleeping and waking her up by getting some good lighting may be dangerous!!

If Jitsi asks to use your Camera and Mic approve as appropriate.

The source for this demo can be found at

https://github.com/malcolmswainecom/Angular4JitsiClient

You will need to restore the NPM packages to get the solution up and running as I haven’t checked them in



How to get an Angular 4 NodeJS site up and running in minutes

In this demo I’ll be showing you how to use the Angular 4 CLI (command line interface) to get an Angular 4 website up and running on Node quickly. This will be the prerequisite for the next Jitsi series of tutorials where I will embed a Jitsi client into and Angular 4 app.

First let’s install the Angular CLI globally so that we can use it in future projects without having to install it again locally.

Open a command prompt (as Administrator) and run the NPM installer

npm install -g @angular/cli
Run Cmd and Administrator
Run Cmd and Administrator
NPM install Angular CLI
NPM install Angular CLI

When the NPM Install has completed open a file explorer window and let’s create a directory for our new files

Basic Angular Folder Structure
Basic Angular Folder Structure



Here I am using the path C:\demos\basic-angular-4

Back in your command window go to the directory you just created

cd C:\demos\basic-angular-4
Angular go to NPM home directory
Angular go to NPM home directory

Now get the Angular CLI tool to create our new project and run it on a Node JS http server

In the command window type

ng new basicAngular4
Angular CLI New Project
Angular CLI New Project

After pressing enter the command will run. It will take a few minutes to set things up, but it will be worth the wait by setting everything you need up to get running quickly.

When the new project creation has finished go to the newly created project directory

cd basicAngular4
Go To New Angular Project Folder
Go To New Angular Project Folder

and get NPM to compile our TypeScript and start a Node JS Web Server instance to serve our angular files.

NPM Start
Angular NG Start New NodeJS Server
Angular NPM Start New NodeJS Server Instance

You will notice that in the screen output it tell you that Node will be serving your files locally on a specific port – on mine it’s 4200

Open Angular Project on Node Port 4200
Open Angular Project on Node Port 4200

Open your web browser and type in the address specified in the NPM start output


http://localhost:4200/
Run Angular App In Browser
Run Angular App In Browser

That’s it!!

In the next demo, I’ll be using existing JavaScript libraries with our Angular Project.



Create a basic Node JS Web Site in minutes

In this post I’m going to show you how to get a basic Node JS site up and running in quickly.

I’m assuming for this example you’re running on windows. If you haven’t already, head over to the NodeJS site and download and install the latest stable version

Download Node
Download Node

With Node installed let’s create a basic site to serve our web pages. First create the directory structure as below and create a file called index.html inside the public_html folder

Node structure
Node structure
Edit the index.html file and copy and paste the HTML  below

<!DOCTYPE html>
<html>
<head>
  <title>Hello Node</title>
</head>
<body>
  <h1>Page served from Node http-server</h1>
</body>
</html>
basic html
basic html

 

Go to the parent of our public_html folder (in this example C:\demos\jitsi) in a command prompt and run

npm init

Just accept all defaults for now by pressing enter at each prompt until the comment has completed

npm-install
npm-install

This will create the package.json file in the respective directory

Next let’s install an http server to handle our request as serve up the index.html we created

In the command window we previously opened, make sure we are still in the same directory where we ran our npm init and created out package.json file (in this example C:\demos\jitsi)

Run the command

npm install http-server
Install node http server
Install node http server

Back in the command prompt drop into the public_html directory we created for our index.html

We want Node to run the web server module that we just downloaded, so we need to locate it and copy the directory path onto the clipbaord so that we can use it in the command window. The path will in your node_modules folder under http-server

copy-node-http-server-path
copy node http-server path

when we have this path on the clipboard go back to the command window and run the command

node C:\demos\jitsi\node_modules\http-server\bin\http-server

I am assuming you have the same directory structure as me here

This will start the http server by default on port 8080.

Node start http-server
Node start http-server

You can now browse the index.html file we created on your browser at using

localhost node server on port 8080
localhost node server on port 8080

Getting Jitsi Meet up and running on NodeJS

If you don’t know about Jitsi, it’s an open source video conferencing suite of tools, both client and server side that facilitates real-time communitication.

In this post I’m going to show how to get the very basics of using the client side Jitsi library working so that we can embed it in our own application. Note that we don’t need any server implementation for this, as Jitsi.org provides a service we can connect to and use as a meeting hub

In this example I am going to be using Node JS to serve up my basic web application. I am then going to insert a JavaScript reference to the Jitsi Meet library hosted in the Jitsi CDN.

When the Jisti JavaScript is loaded I am then going to execute some command to get the bare essentials for an online meeting between two parties A and B.

Node JS
Node JS

 

If you don’t already have a basic Node site up and running to server document then follow my blog at

Create a basic Node JS Web Site in minutes

When you have the basic structure set up open the index.html file in the public_html directory

Edit Index html
Edit Index html

I’m using Sublime Text to edit the file, but you can use whatever editor you choose.

Next add the JavaScript references to Jquery and Jitsi

Add-Jquery-And-Jisti
Add JQuery and Jisti




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://meet.jit.si/external_api.js"></script>

And add the code to execute the Jitsi client using the JQuery OnLoad event

Set JQuery Onload to run Jisti Client
Set JQuery Onload to run Jisti Client

<script>
$(document).ready(function(){
       var domain = "meet.jit.si";
  var options = {
    roomName: "JitsiMeetAPIExample",
    width: 700,
    height: 700,
    parentNode: document.querySelector('#meet')
  }
var api = new JitsiMeetExternalAPI(domain, options);
});
</script>

We just need to add a placeholder into the markup to display our video component

meeting

 

Jisti meet basic javascipt and html
Jisti meet basic javascipt and html

 

You can find the code for this article at

https://github.com/malcolmswainecom/jitsi-meet-basic-web-client/wiki/Getting-Jitsi-Meet-up-and-running-on-Node-JS