huly-platform/foundations/hulypulse/scripts/TEST.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>WebSocket JSON Tester</title>
  <style>
    body {
      font-family: sans-serif;
      background: #f5f5f5;
      margin: 2em;
    }
    h1 {
      margin-bottom: 0.5em;
    }
    textarea {
      width: 100%;
      height: 200px;
      font-family: monospace;
      font-size: 14px;
      padding: 1em;
      border: 1px solid #ccc;
      border-radius: 6px;
      background: #fff;
      resize: vertical;
    }
    button {
      margin-top: 1em;
      padding: 0.5em 1.5em;
      font-size: 16px;
      border: none;
      border-radius: 4px;
      background: #007bff;
      color: white;
      cursor: pointer;
    }
    button:hover {
      background: #0056b3;
    }
    #output {
      margin-top: 1.5em;
      padding: 1em;
      background: #222;
      color: #0f0;
      font-family: monospace;
      font-size: 14px;
      border-radius: 6px;
      min-height: 100px;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
  </style>
</head>
<body>

  <h1>WebSocket JSON Tester</h1>

  <textarea id="jsonInput" placeholder='{
  "type": "put",
  "key": "foo/bar",
  "data": "hello from UI",
  "correlation": "abc123"
}'></textarea>

  <br />
  <button onclick="sendMessage()">Send JSON</button>
  <button onclick="pr('clear')">❌clear</button>

  <p>

<button onclick="place()" data='{"correlation": "1", "type":"info"}'>INFO</button>

<button onclick="place()" data='{"correlation": "1", "type":"put", "key":"00000000-0000-0000-0000-000000000001/foo/bar1", "data": "hello 1", "TTL":5}'>PUT 1</button>
<button onclick="place()" data='{"correlation": "1", "type":"put", "key":"00000000-0000-0000-0000-000000000001/foo/bar2", "data": "hello 2", "TTL":9}'>PUT 2</button>

<button onclick="place()" data='{"correlation": "1", "type":"delete", "key":"00000000-0000-0000-0000-000000000001/foo/bar1"}'>DEL 1</button>
<button onclick="place()" data='{"correlation": "1", "type":"delete", "key":"00000000-0000-0000-0000-000000000001/foo/bar2"}'>DEL 2</button>

<button onclick="place()" data='{"correlation": "1", "type":"get", "key":"00000000-0000-0000-0000-000000000001/foo/bar1"}'>GET 1</button>
<button onclick="place()" data='{"correlation": "1", "type":"get", "key":"00000000-0000-0000-0000-000000000001/foo/bar2"}'>GET 2</button>

<button onclick="place()" data='{"correlation": "1", "type":"sub", "key":"00000000-0000-0000-0000-000000000001/foo/bar1"}'>SUB 1</button>
<button onclick="place()" data='{"correlation": "1", "type":"sub", "key":"00000000-0000-0000-0000-000000000001/foo/bar2"}'>SUB 2</button>

<button onclick="place()" data='{"correlation": "1", "type":"unsub", "key":"00000000-0000-0000-0000-000000000001/foo/bar1"}'>UNSUB 1</button>
<button onclick="place()" data='{"correlation": "1", "type":"unsub", "key":"00000000-0000-0000-0000-000000000001/foo/bar2"}'>UNSUB 2</button>
<button onclick="place()" data='{"correlation": "1", "type":"unsub", "key":"*"}'>UNSUB *</button>

<button onclick="place()" data='{"correlation": "1", "type": "sublist" }'>SUBLIST</button>


  <div id="output">Waiting for server response...</div>

  <script>

    const output = document.getElementById("output");
    const textarea = document.getElementById("jsonInput");

    function pr(s) {
	if(s=="clear") return output.textContent = "";
	output.textContent = s+"\n\n"+output.textContent;
    }

//    const workspace="00000000-0000-0000-0000-000000000001";

    let token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhY2NvdW50IjoiYWFhYWFhYWEtYmJiYi1jY2NjLWRkZGQtZWVlZWVlZWVlZWVlIiwiZXh0cmEiOnsic2VydmljZSI6ImFjY291bnQifSwid29ya3NwYWNlIjoiMDAwMDAwMDAtMDAwMC0wMDAwLTAwMDAtMDAwMDAwMDAwMDAxIn0.ZrwMvv_0CjuKeF2CkmHyMK2vHd9Ro4M3kHZcZBrBxZQ";
    let ws = new WebSocket(`ws://localhost:8099/ws?token=${token}`);

//    let ws = new WebSocket(`ws://localhost:8095/ws`);


    ws.onopen = () => {
	pr("clear");
	pr("✅ WebSocket connected");
    };

    ws.onclose = () => {
	pr("❌ WebSocket closed");
    };

    ws.onmessage = (e) => {
	pr(e.data);
    };

    ws.onerror = (e) => {
      pr("❌ WebSocket error!");
      console.error(e);
    };

    function sendMessage() {
      const json = ( textarea.value || textarea.getAttribute('placeholder') ).trim();

      try {
        const parsed = JSON.parse(json); // validate JSON
        ws.send(JSON.stringify(parsed));
        pr("📤 Sent:\n" + JSON.stringify(parsed, null, 2));
      } catch (e) {
        pr("\n\n⚠️ Invalid JSON:\n" + e.message);
      }

    }

    function place(event) { textarea.value = (event || window.event).target.getAttribute("data"); sendMessage(); }

  </script>

</body>
</html>