52 lines
1.5 KiB
HTML
52 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="stuff"></div>
|
|
<script>
|
|
const socket = new WebSocket(`ws://${window.location.host}/iem`);
|
|
socket.onopen = () => {
|
|
const newDiv = document.createElement('div');
|
|
newDiv.innerText = "WebSocket connection opened";
|
|
document.getElementById('stuff').prepend(newDiv);
|
|
|
|
};
|
|
socket.onclose = () => {
|
|
const newDiv = document.createElement('div');
|
|
newDiv.innerText = "WebSocket connection closed";
|
|
document.getElementById('stuff').prepend(newDiv);
|
|
|
|
};
|
|
socket.onmessage = (event) => {
|
|
const data = JSON.parse(event.data);
|
|
if (!data.type) return;
|
|
switch (data.type) {
|
|
case "iem-message":
|
|
const explanation = `Event: ${JSON.stringify(data.event)}, Channel: ${JSON.stringify(data.channel)}, Station: ${data.station}`;
|
|
console.log(explanation);
|
|
const newDiv = document.createElement('div');
|
|
newDiv.innerText = explanation;
|
|
document.getElementById('stuff').prepend(newDiv);
|
|
break;
|
|
case "internal-response":
|
|
const messageBox = document.createElement('textarea');
|
|
messageBox.value = data.data.message;
|
|
messageBox.style.width = "100%";
|
|
messageBox.style.height = "100px";
|
|
document.getElementById('stuff').prepend(messageBox);
|
|
break;
|
|
}
|
|
|
|
};
|
|
|
|
socket.send(JSON.stringify({ type: "subscribe", channel: "*" }));
|
|
</script>
|
|
</body>
|
|
|
|
</html> |