Monitoring server load

In this section we will present a simple way to monitor the load of a single application. We will accomplish this by adding a route which will dump the active SpawnInfo objects from our Spawner. Add the status method to your Spawner class:

status(req, res) {
  let spawns = [];

  this.activeSpawns.forEach((spawnInfo) => {
        spawns.push({
          id: spawnInfo.spawnId,
          port: spawnInfo.wsPort,
          rendererType: spawnInfo.rendererType,
          startTime: spawnInfo.startTime
        });
  });

  res.status(200).json(spawns);
}

Next, bind the route to the status method in Spawner.start:

this.expressApp.get("/status", this.status.bind(this));

Note that the status method is bound to a GET request as opposed to a POST request. To quickly see this in action, restart your Node.js application and use the front end to create a few viewers. Create a new browser tab and navigate to http://localhost:8082/status. You will see data for each one of your running instances.

The final task is to expose this data on our front end. We first will add a method in index.html to get the JSON data from our application server and instantiate an instance-template for each running instance:

async function updateServerStatus() {
  let instanceJson = await $.getJSON("http://localhost:8082/status");

  let $serverinstances = $("#server-instances");
  $serverinstances.empty();

  for (instance of instanceJson) {
        let templateText = $("#instance-template").html();
        templateText = templateText.replace(/{{id}}/g, instance.id)
        templateText = templateText.replace(/{{port}}/g, instance.port)
        templateText = templateText.replace(/{{rendererType}}/g, instance.rendererType)
        templateText = templateText.replace(/{{startTime}}/g, instance.startTime)

        $("#server-instances").append(templateText);
  }
}

For the purposes of our demo, we will call updateServerStatus at an interval of 1 second using the setInterval method when the page loads:

$(document).ready(() => { setInterval(updateServerStatus, 1000); });

When you reload the index.html page, you will see information about the running viewers populate the right column of the page as viewers are created and removed. If you want more granular updates you can reduce the interval time.