Jukebox/jukebox-software
10
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases 2 Wiki Activity

Edited test site and added ping

Browse Source
This commit is contained in:
Lucas 2024-03-09 20:13:43 -06:00
parent 0b97079cfd
commit 1a07501d53
2 changed files with 115 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
run.py
View File

@ -89,6 +89,9 @@ def start_server_socket():
while True: while True:
#print("HI") #print("HI")
# Handeling Server Requests Loop, will run forever
if not from_server_queue.empty(): if not from_server_queue.empty():
client_id, message = from_server_queue.get() client_id, message = from_server_queue.get()
fprint(f"Message from client {client_id}: {message}") fprint(f"Message from client {client_id}: {message}")
@ -124,6 +127,10 @@ def start_server_socket():
elif call == "request": elif call == "request":
fprint("") fprint("")
case "ping":
fprint("Pong!!!")
# Lucas' notes # Lucas' notes
# Add a ping pong :) response/handler # Add a ping pong :) response/handler
# Add a get cable response/handler # Add a get cable response/handler

108
websocket_test.html
View File

@ -3,7 +3,51 @@
<head> <head>
<title>WebSocket Test</title> <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> <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 () { document.addEventListener("DOMContentLoaded", function () {
// Create WebSocket connection. // Create WebSocket connection.
const socket = new WebSocket('ws://localhost:9000'); const socket = new WebSocket('ws://localhost:9000');
@ -11,6 +55,7 @@
// Connection opened // Connection opened
socket.addEventListener('open', function (event) { socket.addEventListener('open', function (event) {
console.log("Connected to WebSocket server"); console.log("Connected to WebSocket server");
updatedTime = new Date();
}); });
// Listen for messages // Listen for messages
@ -20,6 +65,7 @@
let message = document.createElement('li'); let message = document.createElement('li');
message.textContent = "Received: " + event.data; message.textContent = "Received: " + event.data;
messages.appendChild(message); messages.appendChild(message);
updatedTime = new Date();
}); });
// Send a message to the server // Send a message to the server
@ -29,6 +75,19 @@
console.log('Message sent', 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 // Bind send message function to button click
document.getElementById('sendMessage').addEventListener('click', sendMessage); document.getElementById('sendMessage').addEventListener('click', sendMessage);
}); });
@ -41,8 +100,57 @@
<button id="sendMessage">Send Message</button> <button id="sendMessage">Send Message</button>
<p>Example JSON</p> <p>Example JSON</p>
<p>{ "type": "cable_map", "call": "request", "data": { } }</p> <p>{ "type": "cable_map", "call": "request", "data": { } }</p>
<p>{ "type": "log", "call": "send", "data": "123123" }</p>
<p>Messages/Logs</p> <p>Messages/Logs</p>
<ul id="messages"></ul> <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> </body>
</html> </html>