<html>
<body>
<input type="text" size="20" id="websocket" placeholde="websocket url" value="wss://cloudvars.br0tkasten.de">
<input type="text" size="20" id="projectID" placeholder="project_id" value="p4-@cloud.sb3">
<button id="read" name="read">read</button>
<ul id="data"></ul>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
let socket;
let projectID;
$("#read").click(function() {
$("#data").empty();
projectID = $("#projectID").val();
socket = new WebSocket($("#websocket").val());
socket.onopen = function(e) {
console.log("connection established");
socket.send(JSON.stringify({
method: "handshake",
project_id: projectID,
user: "testClient"+Math.random()
}));
};
function setVariable(name, value) {
console.log(`Setting variable: ${name} = ${value}`);
socket.send(JSON.stringify({
method: "set",
// project_id: projectID,
name,
value
}));
};
socket.onmessage = function(event) {
console.log(event.data);
for (const message of event.data.split("\n")) {
console.log(`${message}`);
const obj = JSON.parse(message);
if (obj.method === "set") {
obj_id = obj.name.replace(/[^0-9A-Za-z]/g,'_');
console.log(obj_id + ":" + $(`#${obj_id}`).length)
if($(`#${obj_id}`).length > 0) {
$(`#${obj_id}`).html(`<b>${obj.name}:</b> ${obj.value}`);
} else {
$('#data').append(`<li id="${obj_id}"><b/>${obj.name}:</b>${obj.value}</li>`);
}
}
}
};
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>