Untitled

<html>
<style>
  body,
  html {
    height: 100%;
    width: 99.9%;
    margin: auto;
    padding: 0.1px;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #312f2f;
  }
</style>
<body>
  <script src="jquery-3.3.1.min.js"></script>
  <script src="socket.io.js"></script>
  <script>
    var imgSrcs = ["background.png", "error.jpeg"];
    var myImages = [], img;
    for (var i = 0; i < 2; i++) {
      img = new Image();
      img.src = imgSrcs[i];
      myImages[i] = img;
    }

    var socket = io('http://192.168.1.14:9000');
    socket.on('connect', function () {
      socket.on('metrics', function (data) {
            console.log(data);
            var status = data.find(item => item.name === 'status');
            if (status != undefined) {
              var statusVal = status.metrics[status.metrics.length - 1].data;
              console.log("Status: " + statusVal);
              if (statusVal == "1") {
                document.body.style.backgroundImage = "url(" + myImages[0].src + ")";
              } else {
                document.body.style.backgroundImage = "url(" + myImages[1].src + ")";
              }
            } else {
              document.body.style.backgroundImage = "url(" + myImages[1].src + ")";
            }
            sessionStorage.clear();
      });
  });
  socket.on('disconnect', function () {
    document.body.style.backgroundImage = "url(" + myImages[1].src + ")";
    sessionStorage.clear();
  });
  </script>
</body>
</html>