80 lines
1.6 KiB
HTML
80 lines
1.6 KiB
HTML
<!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>
|