<main class="bd-masthead" id="content" role="main">
  <div class="container navbar-shift spacer-md">

    <div class="dashhead">
      <div class="dashhead-titles">
        <h6 class="dashhead-subtitle">Automation System</h6>
        <h3 class="dashhead-title">Overview </i></h3>
      </div>
      <div class="dashhead-toolbar">

      </div>
    </div>
    <hr class="dashhead-line">
    <div class="row spacer-sm">
      <div class="col-sm-3">
        <div class="statcard statcard-success">
          <i class="fa fa-microchip icon-header" aria-hidden="true"></i>
          <h3 class="statcard-number">ON</h3>
          <span class="statcard-title">Raspberry Pi</span>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="statcard">
          <i class="fa fa-lightbulb-o icon-header" aria-hidden="true"></i>
          <h3 class="statcard-number">OFF</h3>
          <span class="statcard-title">Light</span>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="statcard statcard-success">
          <i class="fa fa-plug icon-header" aria-hidden="true"></i>
          <h3 class="statcard-number">ON</h3>
          <span class="statcard-title">Satelite</span>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="statcard statcard-success">
          <i class="fa fa-plug icon-header" aria-hidden="true"></i>
          <h3 class="statcard-number">ON</h3>
          <span class="statcard-title">WIFI Router</span>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="statcard">
          <i class="fa fa-thermometer-quarter icon-header" aria-hidden="true"></i>
          <h3 class="statcard-number">15ºC</h3>
          <span class="statcard-title">External Temp.</span>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="statcard ">
          <i class="fa fa-thermometer-half icon-header" aria-hidden="true"></i>
          <h3 class="statcard-number">24ºC</h3>
          <span class="statcard-title">Internal Temp.</span>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="statcard ">
          <i class="fa fa-tint icon-header" aria-hidden="true"></i>
          <h3 class="statcard-number">60%</h3>
          <span class="statcard-title">Humidity</span>
        </div>
      </div>
    </div>
    <div class="row spacer-sm">
      <div class="col-sm-6">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>
  </div>

</main>

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost:3100/');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>