<html>
<body>
<div id="data"></div>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
    let socket = new WebSocket("ws://localhost:5000");
    let projectID = "1234"; // hier project ID eintragen

    function setVariable(name, value) {
        console.log(`Setting variable: ${name} = ${value}`);
        socket.send(JSON.stringify({
            method: "set",
            project_id: projectID,
            name,
            value
        }));
    };


    socket.onopen = function(e) {
      console.log("connection established");
      socket.send(JSON.stringify({
        method: "handshake",
        project_id: projectID,
        user: "testClient"+Math.random()
      }));

      setInterval(function() { setVariable('test',Math.random()) }, Math.random(3)*1000);
    };

    socket.onmessage = function(event) {
        for (const message of event.data.split("\n")) {
            console.log(`${message}`);
            const obj = JSON.parse(message);
            if (obj.method === "set") {
                // variable name in obj.name, Wert der Variablen steht in obj.value
              $('#data').html(`<b/>${obj.name}:</b> <pre>${obj.value}</pre>`);
            }
        }
    };

    socket.onclose = function(event) {
      if (event.wasClean) {
        console.log(`connection closed cleanly, code=${event.code} reason=${event.reason}`);
      } else {
        console.log('connection died');
      }
    };

    socket.onerror = function(error) {
      console.log(`[error] ${error.data}`);
    };
</script>
</body>
</html>