JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<meta charset="utf-8" />

<title>WebSocket Test</title>

<h2>Keefox / Keepass WebSocket Test</h2>

<div id="output"></div>

</html>

JavaScript

var wsUri = "ws://localhost:12546/";
  var output;

  function init()
  {
    output = document.getElementById("output");
    testWebSocket();
  }

function IsJson(str) {
    try {
        JSON.parse(str);
    } catch (e) {
        return false;
    }
    return true;
}

  function testWebSocket()
  {
    var ws = window.WebSocket || window.MozWebSocket;
    websocket = new ws(wsUri);
    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)
  {
    writeToScreen("CONNECTED");
    doSend("Testing Connection to Keefox...");
      writeToScreen("NOTE: If the websocket is listening on the keefox side, we should see an error like:  {\"protocol\":\"error\",\"srp\":{\"securityLevel\":0},\"version\":....<HR>");
  }

  function onClose(evt)
  {
    writeToScreen("DISCONNECTED");
  }

  function onMessage(evt)
  {
    writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
    websocket.close();
      if(IsJson(evt.data)){
          writeToScreen('<span style="color: green;">Keefox returned a json object (this is good)</span>');
          
       replyJSON = JSON.parse(evt.data);       
       writeToScreen('<span style="color: GREEN;">We got a JSON Object back from KeepassRPC:</span> ' + replyJSON.version);
          
      }
      else{
          writeToScreen('<span style="color: RED;">****Couldn\'t verify keepassRPC</span>');
      }
      
  }

  function onError(evt)
  {
    writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
      writeToScreen('<span style="color: red;">Could not connect to KeepassRPC (This is bad)</span>');
      
  }

  function doSend(message)
  {
    writeToScreen("SENT: " + message); 
    websocket.send(message);
  }

  function writeToScreen(message)
  {
    var pre = document.createElement("p");
   ...