156 lines
4.9 KiB
HTML
156 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>WebSocket Test</title>
|
|
|
|
<style>
|
|
footer {
|
|
background-color: #333;
|
|
color: #fff;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.service-box {
|
|
width: 150px;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.service-up {
|
|
background-color: green;
|
|
}
|
|
|
|
.service-down {
|
|
background-color: red;
|
|
}
|
|
</style>
|
|
|
|
|
|
<script>
|
|
|
|
// class Service {
|
|
// constructor(name, status) {
|
|
// this.name = name
|
|
// this.status = status
|
|
// }
|
|
// }
|
|
|
|
var updatedTime = new Date();
|
|
// Initial status of services
|
|
// var serviceA = new Service("234234", 'down');
|
|
// var serviceBStatus = 'down';
|
|
// var serviceCStatus = 'down';
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
// Create WebSocket connection.
|
|
const socket = new WebSocket('ws://localhost:9000');
|
|
|
|
// Connection opened
|
|
socket.addEventListener('open', function (event) {
|
|
console.log("Connected to WebSocket server");
|
|
updatedTime = new Date();
|
|
});
|
|
|
|
// Listen for messages
|
|
socket.addEventListener('message', function (event) {
|
|
console.log('Message from server', event.data);
|
|
let messages = document.getElementById('messages');
|
|
let message = document.createElement('li');
|
|
message.textContent = "Received: " + event.data;
|
|
messages.appendChild(message);
|
|
updatedTime = new Date();
|
|
});
|
|
|
|
// Send a message to the server
|
|
function sendMessage() {
|
|
let message = document.getElementById('messageInput').value;
|
|
socket.send(message);
|
|
console.log('Message sent', message);
|
|
}
|
|
|
|
// This function just sends a ping to make sure the server is there and it is able to responds
|
|
function ping() {
|
|
let message = `{ "call": "send", "type": "log", "data": "This is a ping!!" }`;
|
|
socket.send(message);
|
|
console.log('Message sent', message);
|
|
}
|
|
setInterval(ping, 1500);
|
|
|
|
// setInterval(() => {
|
|
// updateServiceStatus('serviceA', 'down');
|
|
// }, 2000);
|
|
|
|
|
|
// Bind send message function to button click
|
|
document.getElementById('sendMessage').addEventListener('click', sendMessage);
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<h2>WebSocket Test</h2>
|
|
<textarea rows="4" cols="50" id="messageInput" placeholder="Type a message..."> </textarea>
|
|
<button id="sendMessage">Send Message</button>
|
|
<p>Example JSON</p>
|
|
<p>{ "type": "cable_map", "call": "request", "data": { } }</p>
|
|
<p>{ "type": "log", "call": "send", "data": "123123" }</p>
|
|
|
|
<p>Messages/Logs</p>
|
|
<ul id="messages"></ul>
|
|
|
|
<footer>
|
|
<!-- <div id="serviceA" class="service-box"></div>
|
|
<div id="serviceB" class="service-box"></div>
|
|
<div id="serviceC" class="service-box"></div> -->
|
|
<div id="clock"></div>
|
|
|
|
</footer>
|
|
|
|
<script>
|
|
// // Function to update service status
|
|
// function updateServiceStatus(service) {
|
|
// // serviceId, status
|
|
// var serviceElement = document.getElementById(service.serviceId);
|
|
// // updateClock();
|
|
|
|
// if (service.status === 'up') {
|
|
// serviceElement.innerHTML = '<h3>' + service.serviceId + '</h3><p>Running</p>';
|
|
// serviceElement.classList.remove('service-down');
|
|
// serviceElement.classList.add('service-up');
|
|
// } else {
|
|
// serviceElement.innerHTML = '<h3>' + service.serviceId + '</h3><p>Down</p>';
|
|
// serviceElement.classList.remove('service-up');
|
|
// serviceElement.classList.add('service-down');
|
|
// }
|
|
// }
|
|
|
|
|
|
|
|
// // Update service statuses
|
|
// updateServiceStatus('node.js (for this page)', serviceAStatus);
|
|
// updateServiceStatus('Python WebSocket', serviceBStatus);
|
|
// updateServiceStatus('serviceC', serviceCStatus);
|
|
|
|
// Function to update clock
|
|
function updateClock() {
|
|
var now = new Date();
|
|
now = now.getTime() - updatedTime.getTime();
|
|
// console.log(now)
|
|
document.getElementById('clock').textContent = 'Milliseconds Since Update: ' + now.toString().padStart(6, '0');
|
|
}
|
|
|
|
// Update clock every second
|
|
setInterval(updateClock, 100);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |