Untitled

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Image Scanner</title>
  <script type="text/javascript" src="./jquery.min.js"></script>
</head>
<body>
  <h1>Pemindai Gambar</h1>
  <p>
    Klik tombol berikut untuk mulai pemindaian.
  </p>
  <p>
    <button id="btnScan" onclick="scan();">Pindai</button>
  </p>
  <p>
    <img id="imgScanResult" style="margin: auto;" />
  </p>
  <script type="text/javascript">
    var ws_available = false;
    var socket = null;

    if (window.WebSocket) {
      console.log('WebSocket is supported by your browser.');
      ws_available = true;
    }
    else {
      console.log('Websocket is not supported by your browser.');
      $('#btnScan').attr('disabled', 'disabled');
      ws_available = false;
    }

    function sendcmd(cmd) {
      if (socket != null) {
        socket.send(cmd);
      }
    };

    function closews() {
      socket.close();
    }

    function openws(cmd) {
      if (socket != null) closews();
      if (ws_available) {
        var serviceUrl = 'ws://localhost:8811/';
        socket = new WebSocket(serviceUrl);
        socket.binaryType = "blob";

        socket.onopen = function () {
          console.log('Connection established!');
          switch (cmd) {
            case 'scan':
              console.log('Scanning image...');
              break;
          }
          sendcmd(cmd);
        };

        socket.onclose = function () {
          console.log('Connection closed!');
        };

        socket.onerror = function (error) {
          console.log('Error occured: ', error);
        };

        socket.onmessage = function (e) {
          if (typeof e.data === "string") {
            console.log(e.data);
          }
          else if (e.data instanceof ArrayBuffer) {
            console.log('ArrayBuffer received: ' + e.data);
          }
          else if (e.data instanceof Blob) {
            console.log('Blob received: ' + e.data.bytes + ' bytes');
          }
          switch (cmd) {
            case 'scan':
              $('#imgScanResult').attr('src', e.data);
              break;
            default:
              console.log('Unknown command');
          }
          closews();
          socket = null;
        };
      }
    }

    function scan() {
      openws('scan');
    }

  </script>

</body>