102 lines
4.3 KiB
HTML
Executable File
102 lines
4.3 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>JSON WebSocket Sender</title>
|
|
</head>
|
|
<body>
|
|
<h2>JSON WebSocket Sender</h2>
|
|
|
|
<label for="jsonType">Wähle ein JSON-Telegramm:</label>
|
|
<select id="jsonType" onchange="updateFormFields()">
|
|
<option value="typeA">Typ A</option>
|
|
<option value="typeB">Typ B</option>
|
|
<option value="typeC">Typ C</option>
|
|
</select>
|
|
|
|
<form id="jsonForm">
|
|
<div id="formFields"></div>
|
|
<button type="button" onclick="sendJson()">Senden</button>
|
|
</form>
|
|
|
|
<h3>Gesendete Nachricht:</h3>
|
|
<pre id="output"></pre>
|
|
|
|
<script>
|
|
const socket = new WebSocket("ws://localhost:8080"); // WebSocket-Server-Adresse
|
|
|
|
socket.onopen = () => console.log("WebSocket verbunden");
|
|
socket.onerror = (error) => console.error("WebSocket Fehler:", error);
|
|
socket.onmessage = (event) => console.log("Antwort erhalten:", event.data);
|
|
|
|
const jsonTemplates = {
|
|
typeA: { key1: "Wert A1", key2: "Wert A2", nested: { subKey1: "SubWert A1", subKey2: "SubWert A2", deepNested: { deepKey1: "DeepWert A1" } } },
|
|
typeB: { id: "123", name: "Beispielname", details: { age: "30", city: "Berlin", address: { street: "Hauptstraße 1", zip: "12345" } } },
|
|
typeC: { sensor: "Temperatur", timestamp: "2025-02-23T12:00:00Z", data: { value: "22.5", unit: "Celsius", meta: { source: "Sensor A", accuracy: "0.1" } } }
|
|
};
|
|
|
|
let savedJson = { typeA: {}, typeB: {}, typeC: {} };
|
|
|
|
function createInputFields(parentElement, obj, prefix = "") {
|
|
for (const key in obj) {
|
|
if (typeof obj[key] === "object" && obj[key] !== null) {
|
|
const fieldset = document.createElement("fieldset");
|
|
const legend = document.createElement("legend");
|
|
legend.textContent = key;
|
|
fieldset.appendChild(legend);
|
|
createInputFields(fieldset, obj[key], `${prefix}${key}.`);
|
|
parentElement.appendChild(fieldset);
|
|
} else {
|
|
const label = document.createElement("label");
|
|
label.textContent = key + ": ";
|
|
const input = document.createElement("input");
|
|
input.type = "text";
|
|
input.id = `${prefix}${key}`;
|
|
input.name = `${prefix}${key}`;
|
|
input.value = obj[key];
|
|
parentElement.appendChild(label);
|
|
parentElement.appendChild(input);
|
|
parentElement.appendChild(document.createElement("br"));
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateFormFields() {
|
|
const selectedType = document.getElementById("jsonType").value;
|
|
const formContainer = document.getElementById("formFields");
|
|
formContainer.innerHTML = "";
|
|
|
|
const template = savedJson[selectedType] && Object.keys(savedJson[selectedType]).length ? savedJson[selectedType] : jsonTemplates[selectedType];
|
|
createInputFields(formContainer, template);
|
|
}
|
|
|
|
function retrieveFormValues(obj, prefix = "") {
|
|
const result = {};
|
|
for (const key in obj) {
|
|
if (typeof obj[key] === "object" && obj[key] !== null) {
|
|
result[key] = retrieveFormValues(obj[key], `${prefix}${key}.`);
|
|
} else {
|
|
result[key] = document.getElementById(`${prefix}${key}`).value;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function sendJson() {
|
|
const selectedType = document.getElementById("jsonType").value;
|
|
const jsonMessage = retrieveFormValues(jsonTemplates[selectedType]);
|
|
|
|
savedJson[selectedType] = jsonMessage; // Speichere das letzte gesendete JSON für den Typ
|
|
console.log("Gespeichertes JSON:", savedJson);
|
|
console.log("Gesendetes JSON:", jsonMessage);
|
|
socket.send(JSON.stringify(jsonMessage));
|
|
document.getElementById("output").textContent = JSON.stringify(jsonMessage, null, 2);
|
|
}
|
|
|
|
// Initial Formularfelder setzen
|
|
updateFormFields();
|
|
</script>
|
|
</body>
|
|
</html>
|