You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
2.5 KiB
77 lines
2.5 KiB
<!-- 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 wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
const statusSocket = new WebSocket(
|
|
`${wsProtocol}//${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>
|
|
|