@jeli/dev-cli/lib/utils/snippet/livereload.html

Jeli cli devtool

<!-- 
    LiveReload client snippet
    Powered by jeli-dev-server 
-->
<script type="text/javascript">
  if ('WebSocket' in window) {
    (function() {
      'use strict';
      var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
      var address = protocol + window.location.host + window.location.pathname + '/ws';
      var socket = null;
      var retryTimer = 1000;
      var retryCount = 0;

      function ConnectSocket() {
        if (retryCount) {
          console.log(`trying to reconnect... count-> ${retryCount}`);
          if (retryCount > 10) {
            retryTimer = 60000;
            retryCount = 0;
          }
        }
        var socket = new WebSocket(address);
        socket.addEventListener('close', function() {
          retryCount++;
          setTimeout(ConnectSocket, (retryTimer * retryCount));
        });

        socket.addEventListener('open', function() {
          if (retryCount) {
            window.location.reload();
          }
        });

        var modal = null;
        socket.onmessage = function(msg) {
          switch (msg.data.toUpperCase()) {
            case ('RELOAD'):
              window.location.reload();
              break;
            case ('COMPILING'):
              console.log('jws -> compiling...');
              break;
            case ('ERROR'):
              createErrorWindow();
              break;
          }
        };
      }

      console.log('Live reload enabled.');

      function createErrorWindow() {
        // remove the modal if it already exists
        if (modal) {
          modal.parentNode.removeChild(modal);
        }
        modal = document.createElement('div');
        modal.style.width = "100%";
        modal.style.height = "100%";
        modal.style.background = "#000";
        modal.style.opacity = ".8";
        modal.style.left = "0px";
        modal.style.position = "fixed";
        modal.style.top = "0px";
        modal.style.zIndex = "10000";
        document.body.appendChild(modal);
        modal.innerHTML = '<h2 style="color:red;padding:5%">Error in compilation</h2>';

      }
      ConnectSocket();
    })();
  }
</script>