Added Working Prototype for Websocket Communication

2025-12-30 16:19:43 +01:00
parent 2070001f4c
commit 6edf7e6e5f
6 changed files with 536 additions and 0 deletions
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>Alox PowerPods Debug/Test Tool</title>
+	<script defer src="/static/alpinejs.cdn.min.js"></script>
+</head>
+
+<body>
+	<h1>Alox PowerPods Debug/Test Tool</h1>
+
+	<div x-data="websocketApp()">
+
+		<div style="margin-bottom: 1rem;">
+			Status: <span x-text="status" :style="{ color: isConnected ? 'green' : 'red' }"></span>
+		</div>
+
+		<input type="text" x-model="inputMessage" placeholder="Message" @keyup.enter="sendMessage()" />
+		<button @click="sendMessage()" :disabled="!isConnected">Send</button>
+
+		<hr>
+
+		<div id="messages">
+			<template x-for="(msg, index) in messages" :key="index">
+				<p x-text="msg"></p>
+			</template>
+		</div>
+
+	</div>
+
+	<script>
+		function websocketApp() {
+			return {
+				socket: null,
+				inputMessage: '',
+				messages: [],
+				status: 'Disconnected',
+				isConnected: false,
+
+				init() {
+					this.connect();
+				},
+
+				connect() {
+					this.socket = new WebSocket("ws://localhost:8080/cmd");
+
+					this.socket.onopen = () => {
+						this.status = 'Connected';
+						this.isConnected = true;
+						this.addLog('Connected to Server');
+					};
+
+					this.socket.onmessage = (event) => {
+						this.addLog(event.data);
+					};
+
+					this.socket.onclose = () => {
+						this.status = 'Disconnected';
+						this.isConnected = false;
+						this.addLog('Disconnected from Server');
+					};
+				},
+
+				sendMessage() {
+					if (this.inputMessage && this.isConnected) {
+						this.socket.send(this.inputMessage);
+						this.inputMessage = ''; // Input leeren nach Senden
+					}
+				},
+
+				addLog(text) {
+					this.messages.push(text);
+				}
+			}
+		}
+	</script>
+</body>
+
+</html>