SimpleWebSocketServer/websocket.html

<!DOCTYPE html>

<meta charset="utf-8" />

<title>WebSocket Test</title>

<script language="javascript" type="text/javascript">
// ansi color -> html; https://github.com/mmalecki/ansispan
var ansispan = function (str) {
  Object.keys(ansispan.foregroundColors).forEach(function (ansi) {
    var span = '<span style="color: ' + ansispan.foregroundColors[ansi] + '">';
    str = str.replace(
      new RegExp('\033\\[' + ansi + 'm', 'g'),
      span
    ).replace(
      new RegExp('\033\\[1;' + ansi + 'm', 'g'),
      span
    );
  });
  return restoreURI(str.replace(/\033\[0m/g, '</span>'));
};

ansispan.foregroundColors = {
  '36': 'cyan',
  '90': 'gray',
  '92': 'mediumspringgreen',
  '93': 'yellow',
  '91': 'red',
  '95': 'darkred'
};

// replace start
var tagsToReplace = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;'
};

function replaceTag(tag) {
    return tagsToReplace[tag] || tag;
}

function safe_tags_replace(str) {
    return str.replace(/[&<>]/g, replaceTag);
}
function restoreURI(str) {
    return str.includes('<span style="color: cyan">majordomo</span>') ? decodeURI(str) : str;
}
// replace end

  function doConnect()
  {
    websocket = new WebSocket("ws://" + document.myform.url.value + ":7999/");
    websocket.onopen = function(evt) { onOpen(evt) };
    websocket.onclose = function(evt) { onClose(evt) };
    websocket.onmessage = function(evt) { onMessage(evt) };
    websocket.onerror = function(evt) { onError(evt) };
  }

  function onOpen(evt)
  {
    writeToScreenMsg("connected");
	document.myform.connectButton.value = "Disconnect";
	websocket.send(document.myform.ws_token.value);
	websocket.send('remote_log');
  }

  function onClose(evt)
  {
	writeToScreenMsg("disconnected");
	document.myform.connectButton.value = "Connect";
  }

  function onMessage(evt)
  {
    writeToScreenLog(evt.data);
  }

  function onError(evt)
  {
	writeToScreenMsg('error: ' + evt.data);
	websocket.close();
	document.myform.connectButton.value = "Disconnect";
  }

  function writeToScreenMsg(message)
  {
	writeToScreen('<span style="color: darkorange">' + message + '</span>');
  }
  
  function writeToScreenLog(message)
  {
	writeToScreen(ansispan(safe_tags_replace(message)));
  }
  
  function writeToScreen(message)
  {
	remote_log.innerHTML += message + "<br>";
	remote_log.scrollTop = remote_log.scrollHeight;
  }

   function sendText() {
		doSend( document.myform.inputtext.value );
   }

  function clearText() {
        document.getElementById("outputtext").innerHTML = "";
   }

   function doDisconnect() {
		websocket.close();
   }
   
   function doConnectDisconnect() {
        (document.myform.connectButton.value == "Connect") ? doConnect() : doDisconnect()
   }


</script>
<style>
    .outputtext {
    background-color: black;
    color: aliceblue;
    overflow-y: auto;
    overflow-x: hidden;
    width: 50%;
    height: 400px;
    font-family: monospace;
    border-color: black;
    padding: 2px;
    border-width: thick;
    border-style: solid;
    }
</style>
<form name="myform">
<p>
token: <input type="text" name="ws_token" size="20" value="token_is_unset"></input>
ip: <input type="text" name="url" size="20" value="127.0.0.1"></input>
<input type="button" name=clearButton value="Clear" onClick="clearText();">
<input type="button" name=connectButton value="Connect" onClick="doConnectDisconnect();">
</p>
</form>
<div id="outputtext" class="outputtext"></div>
<script language="javascript" type="text/javascript">
var remote_log = document.getElementById("outputtext");
</script>
</html> 