parent
ab1713b29e
commit
ae51d0c5c8
@ -0,0 +1,76 @@ |
|||||||
|
<!-- templates/status.html --> |
||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<title>WebSocket Status</title> |
||||||
|
<style> |
||||||
|
.status-card { |
||||||
|
border: 1px solid #ddd; |
||||||
|
padding: 20px; |
||||||
|
margin: 20px; |
||||||
|
border-radius: 8px; |
||||||
|
max-width: 500px; |
||||||
|
} |
||||||
|
.status-indicator { |
||||||
|
display: inline-block; |
||||||
|
width: 12px; |
||||||
|
height: 12px; |
||||||
|
border-radius: 50%; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
.connected { background-color: #4CAF50; } |
||||||
|
.disconnected { background-color: #f44336; } |
||||||
|
</style> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="status-card"> |
||||||
|
<h2>WebSocket Status</h2> |
||||||
|
<div> |
||||||
|
<span class="status-indicator" id="connection-indicator"></span> |
||||||
|
<span id="connection-status">Connecting...</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<p>Active Connections: <span id="active-connections">0</span></p> |
||||||
|
<p>Channel Layer Type: <span id="channel-layer-type">-</span></p> |
||||||
|
<p>Last Updated: <span id="last-updated">-</span></p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<script> |
||||||
|
const statusSocket = new WebSocket( |
||||||
|
'ws://' + window.location.host + '/ws/status/' |
||||||
|
); |
||||||
|
|
||||||
|
function updateConnectionStatus(connected) { |
||||||
|
const indicator = document.getElementById('connection-indicator'); |
||||||
|
const status = document.getElementById('connection-status'); |
||||||
|
|
||||||
|
indicator.className = 'status-indicator ' + (connected ? 'connected' : 'disconnected'); |
||||||
|
status.textContent = connected ? 'Connected' : 'Disconnected'; |
||||||
|
} |
||||||
|
|
||||||
|
statusSocket.onopen = function(e) { |
||||||
|
updateConnectionStatus(true); |
||||||
|
}; |
||||||
|
|
||||||
|
statusSocket.onmessage = function(e) { |
||||||
|
const data = JSON.parse(e.data); |
||||||
|
document.getElementById('active-connections').textContent = data.active_connections; |
||||||
|
document.getElementById('channel-layer-type').textContent = data.channel_layer_type; |
||||||
|
document.getElementById('last-updated').textContent = new Date().toLocaleTimeString(); |
||||||
|
}; |
||||||
|
|
||||||
|
statusSocket.onclose = function(e) { |
||||||
|
updateConnectionStatus(false); |
||||||
|
// Try to reconnect every 5 seconds |
||||||
|
setTimeout(function() { |
||||||
|
window.location.reload(); |
||||||
|
}, 5000); |
||||||
|
}; |
||||||
|
|
||||||
|
statusSocket.onerror = function(e) { |
||||||
|
updateConnectionStatus(false); |
||||||
|
}; |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
Loading…
Reference in new issue