Last active
July 25, 2023 01:34
-
-
Save daviddwlee84/536a51ae8d8f17fa7eb9932851ccf587 to your computer and use it in GitHub Desktop.
Python websocket logging to web UI https://chat.openai.com/share/5be124cc-8183-4432-803a-d88e047b2a74
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Execution Log Monitor</title> | |
</head> | |
<body> | |
<div id="log-container"></div> | |
<script> | |
const logContainer = document.getElementById("log-container"); | |
const logQueue = []; // Queue to store log entries | |
const maxLogs = 10; // Maximum number of log entries to show | |
function addLogEntry(logMessage) { | |
const logEntry = document.createElement("p"); | |
logEntry.textContent = logMessage; | |
logContainer.appendChild(logEntry); | |
logQueue.push(logEntry); | |
// Check if we exceeded the maximum number of log entries | |
if (logQueue.length > maxLogs) { | |
const removedLog = logQueue.shift(); // Remove the oldest log entry | |
logContainer.removeChild(removedLog); | |
} | |
// Set the expiration time (in milliseconds) for the log entry | |
const expirationTime = 5000; // 5 seconds (adjust this value as needed) | |
// Schedule removal of the log entry after the expiration time | |
setTimeout(() => { | |
logQueue.shift(); // Remove the log entry from the queue | |
logContainer.removeChild(logEntry); // Remove the log entry from the DOM | |
}, expirationTime); | |
} | |
function connectWebSocket() { | |
const socket = new WebSocket("ws://localhost:8765/"); | |
socket.onopen = () => { | |
console.log("WebSocket connection established."); | |
}; | |
socket.onmessage = event => { | |
const logMessage = event.data; | |
addLogEntry(logMessage); | |
}; | |
socket.onclose = event => { | |
console.log(`WebSocket connection closed with code: ${event.code}, reason: ${event.reason}`); | |
console.log("Reconnecting..."); | |
setTimeout(connectWebSocket, 1000); // Retry connection after 1 second | |
}; | |
socket.onerror = error => { | |
console.error("WebSocket error:", error); | |
console.log("Reconnecting..."); | |
setTimeout(connectWebSocket, 1000); // Retry connection after 1 second | |
}; | |
} | |
connectWebSocket(); | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import asyncio | |
import websockets | |
i = 0 | |
async def log_callback(websocket, path): | |
global i | |
while True: | |
# Dummy implementation: Replace this with the actual log messages you want to send | |
log_message = f"Log message here... {i}" | |
i += 1 | |
await websocket.send(log_message) | |
await asyncio.sleep(1) # Adjust this value to control the log update frequency | |
if __name__ == "__main__": | |
start_server = websockets.serve(log_callback, "localhost", 8765) | |
asyncio.get_event_loop().run_until_complete(start_server) | |
asyncio.get_event_loop().run_forever() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
There is a bug in the
maxLogs
count that didn't correctly limited the logs to desire showing amount.