title: Showing live CPU usage via WMI with PHP and Ajax
body: <p>Is there any alternative to a persistent connection with <strong>just</strong> Apache/PHP than setting up another server with WebSockets/Node.js? </p>
  
  <p>At the current moment, I'm running a typical WAMP server with a Laravel application. This laravel application is a sort of dashboard app which can show details (such as CPU/Network usage) of our servers on the network. This application will only be used by a couple of people at a time (it's internal) so it allows me to be quite flexible with performance.</p>
  
  <p>I'm using the COM library in PHP to query the server for information via WMI. I have it set up by using a typical GET route that returns a json string of the CPU usage in percentage of the server from WMI. This is getting refreshed every single second using <code>setInterval()</code>.</p>
  
  <p>Though obviously this is immense load on the server, and CPU goes through the roof when seeing the usage of a network PC.</p>
  
  <p>A picture is below showing what my app looks like. The progress bar will fill to the percentage returned when the ajax request completes. It looks good and works well, but I feel like running an ajax request every single second is bad design, and really want something that can just constantly feed the progress bar rather than request a new value from the server.</p>
  
  <p>Please let me know if you need any code/examples of my current progress. Thanks!</p>
  
  <p>Code as requested:</p>
  
  <p>My route:</p>
  
  <p><code>Route::get('{machine_id}/{field?}', array('as'=&gt;'admin.computer.view.detailed', 'uses'=&gt;'ComputerController@getViewDetailed'));</code></p>
  
  <p>My Controller:</p>
  
  <pre><code>public function getViewDetailed($computer_id, $field = NULL){
      $computer = $this-&gt;machine-&gt;find($computer_id);
  
      if($computer){
          if(!$computer-&gt;type-&gt;type_name == 'Servers'){
              return Redirect::route('admin.computer.index');
          } else{
              if($field){
                  switch($field){
                      case 'cpu':
                          return Response::json(Network::get_cpu_info($computer-&gt;machine_name));
                          break;
                      case 'temp':
                          return Response::json(Network::get_temp_info($computer-&gt;machine_name));
                          break;
                      case 'tcp':
                          return Response::json(Network::get_tcp_info($computer-&gt;machine_name));
                          break;
                  }
              }
              $disks  = Network::get_disk_info($computer-&gt;machine_name);
              $memory = Network::get_memory_info($computer-&gt;machine_name);
              $cpu    = Network::get_cpu_info($computer-&gt;machine_name);
              $tcp    = Network::get_tcp_info($computer-&gt;machine_name);
  
              $this-&gt;layout-&gt;title = 'Viewing Server Details for: '.$computer-&gt;machine_name;
              $this-&gt;layout-&gt;content = View::make('computers.templates.view.detailed')
                  -&gt;with('computer', $computer)
                  -&gt;with('disks', $disks)
                  -&gt;with('memory', $memory)
                  -&gt;with('cpu', $cpu)
                  -&gt;with('tcp', $tcp);
          }
      } else{
          return Redirect::route('admin.computer.index')
              -&gt;with('message', Lang::get('custom.messages.computers.errors.exist'))
              -&gt;with('color','danger');
      }
  }
  </code></pre>
  
  <p>My class requesting WMI Information:</p>
  
  <pre><code>class Cpu {
  
  public static $com_namespace = 'root\\cimv2';
  private $query = 'SELECT Name, CurrentClockSpeed, LoadPercentage From Win32_Processor';
  
  private $cpu = array();
  
  public function info($service, $pc){
      $this-&gt;cpu = $service-&gt;ExecQuery($this-&gt;query);
      return $this-&gt;format($this-&gt;cpu);
  }
  
  public function format($cpu){
      $formatted_cpu = array();
  
      $i = 0;
      foreach($cpu as $entry){
          $formatted_cpu[$i]['name'] = $entry-&gt;Name;
          $formatted_cpu[$i]['current_clock_speed'] = $entry-&gt;CurrentClockSpeed;
          $formatted_cpu[$i]['load'] = $entry-&gt;LoadPercentage;
          $i++;
      }
  
      return $formatted_cpu;
  }
  }
  </code></pre>
  
  <p>My View:</p>
  
  <pre><code>@if($cpu)
  &lt;script type='text/javascript'&gt;
      $(document).ready(function(e) {
          function getCpu(){
              $('.server').each(function(index, element) {
                  var server = $(this);
                  var url = $(this).attr('data-url');
                  var panel = $(this).find('.panel');
                  var progress_bar = $(this).find('.progress-bar');
  
                  $.ajax({
                      url: url,
                      type: 'GET',
                      dataType:"json",
                      success: function(response){
                          if(response){
                              $(progress_bar).html(response[0]['load']+"%").attr('aria-valuenow', response[0]['load']).css('width', response[0]['load']+"%");
  
                              if(response[0]['load'] &gt; 50){
                                  $(panel).removeClass('panel-default').addClass('panel-danger');
                              } else{
                                  $(panel).removeClass('panel-danger').addClass('panel-default');
                              }
                          } else{
                              $(server).css('display', 'none');
                          }
                      }
                  });
              });
  
          }
  
          setInterval(getCpu, 1000);
      });
  &lt;/script&gt;
  
  &lt;div data-url="{{ route('admin.computer.view.detailed', array($computer-&gt;id, 'cpu')) }}" class="server"&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading text-center"&gt;CPU Load&lt;/div&gt;
  
          &lt;div class="panel-body"&gt;
              &lt;div class="progress"&gt;
                  &lt;div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  @endif
  </code></pre>