优化了实现,采用websocket

This commit is contained in:
zjk
2025-02-27 22:37:21 +08:00
parent 9cc3140651
commit 1e295aeeb3
9 changed files with 204 additions and 213 deletions
+1 -2
View File
@@ -5,5 +5,4 @@ ProcessConfig = pPowerManger
{
AppTick = 5
CommsTick = 4
}
}
+73 -76
View File
@@ -24,82 +24,86 @@ document.getElementById('download-db').addEventListener('click', function() {
});
});
// 更新页面数据的函数
function updateData() {
// 获取状态机数据
fetch('/api/state')
.then(response => response.json())
.then(stateData => {
// 更新状态机面板
const stateInfo = `
<span>更新时间</span> ${stateData.time}
<span>状态ID</span> ${stateData.state_id}
<span>状态名称</span> ${stateData.state_name}
<span>事件</span> ${stateData.event}
<span>事件ID</span> ${stateData.event_id}
<span>故障代码</span> ${stateData.fault_code}
<span>备注</span> ${stateData.note}
`;
document.getElementById('state-machine-state').innerHTML = stateInfo;
})
.catch(error => console.error('Error fetching state data:', error));
// WebSocket连接
let ws = null;
let reconnectAttempts = 0;
const maxReconnectAttempts = 5;
const reconnectDelay = 5000;
// 获取其他系统状态
fetch('/api/status')
.then(response => response.json())
.then(data => {
// 更新DIS系统状态
document.getElementById('dis-sys-state').textContent = JSON.stringify(data.disSys, null, 2);
// 更新CCU状态
document.getElementById('ccu-state').textContent = JSON.stringify(data.ccuState, null, 2);
// 更新运行日志
document.getElementById('log-data').textContent = data.logs.join('\n');
})
.catch(error => console.error('Error fetching system data:', error));
// 初始化WebSocket连接
function initWebSocket() {
ws = new WebSocket('ws://' + window.location.host + '/ws/state');
ws.onopen = () => {
console.log('WebSocket连接已建立');
reconnectAttempts = 0;
};
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
updateUI(data);
};
ws.onclose = () => {
console.log('WebSocket连接已关闭');
if (reconnectAttempts < maxReconnectAttempts) {
setTimeout(() => {
reconnectAttempts++;
console.log(`尝试重新连接 (${reconnectAttempts}/${maxReconnectAttempts})`);
initWebSocket();
}, reconnectDelay);
}
};
ws.onerror = (error) => {
console.error('WebSocket错误:', error);
ws.close();
};
}
// 检查MOOS数据库连接状态
function checkMoosDbConnection() {
fetch('/api/moos-db')
.then(response => response.json())
.then(data => {
// 更新UI
function updateUI(data) {
// 更新数据库状态
if (data.db_status) {
const dbStatus = document.getElementById('db-status');
if (dbStatus) {
dbStatus.className = data.db_status.connected ? 'db-status connected' : 'db-status disconnected';
dbStatus.innerHTML = `<i class="fas fa-database"></i><span>已连接到数据库:${data.db_status.database}</span>`;
}
}
// 更新MOOS数据库状态
if (data.moos_db_status) {
const moosDbStatus = document.getElementById('moos-db-status');
if (data.connected) {
if (data.moos_db_status.connected) {
moosDbStatus.className = 'db-status connected';
moosDbStatus.innerHTML = `<i class="fas fa-database"></i><span>已连接到MOOS数据库:${data.host}:${data.port}</span>`;
moosDbStatus.innerHTML = `<i class="fas fa-database"></i><span>已连接到MOOS数据库:${data.moos_db_status.host}:${data.moos_db_status.port}</span>`;
} else {
moosDbStatus.className = 'db-status disconnected';
moosDbStatus.innerHTML = `<i class="fas fa-database"></i><span>MOOS数据库连接失败</span>`;
}
})
.catch(error => {
const moosDbStatus = document.getElementById('moos-db-status');
moosDbStatus.className = 'db-status disconnected';
moosDbStatus.innerHTML = `<i class="fas fa-database"></i><span>MOOS数据库连接错误</span>`;
});
}
}
// 检查本地数据库连接状态
function checkDbConnection() {
fetch('/api/db-status')
.then(response => response.json())
.then(data => {
const dbStatus = document.getElementById('db-status');
if (data.connected) {
dbStatus.className = 'db-status connected';
dbStatus.innerHTML = `<i class="fas fa-database"></i><span>已连接到数据库:${data.database}</span>`;
} else {
dbStatus.className = 'db-status disconnected';
dbStatus.innerHTML = `<i class="fas fa-database"></i><span>数据库连接失败</span>`;
}
})
.catch(error => {
const dbStatus = document.getElementById('db-status');
dbStatus.className = 'db-status disconnected';
dbStatus.innerHTML = `<i class="fas fa-database"></i><span>数据库连接错误</span>`;
});
// 更新状态机面板
const stateInfo = `
<span>更新时间</span> ${data.state.time}
<span>状态ID</span> ${data.state.state_id}
<span>状态名称</span> ${data.state.state_name}
<span>事件</span> ${data.state.event}
<span>事件ID</span> ${data.state.event_id}
<span>故障代码</span> ${data.state.fault_code}
<span>备注</span> ${data.state.note}
`;
document.getElementById('state-machine-state').innerHTML = stateInfo;
// 更新DIS系统状态
document.getElementById('dis-sys-state').textContent = JSON.stringify(data.status.disSys, null, 2);
// 更新CCU状态
document.getElementById('ccu-state').textContent = JSON.stringify(data.status.ccuState, null, 2);
// 更新运行日志
document.getElementById('log-data').textContent = data.status.logs.join('\n');
}
// MOOS通知功能
@@ -140,14 +144,7 @@ function sendMoosNotify() {
document.getElementById('moos-send-btn').addEventListener('click', sendMoosNotify);
// 每1秒更新一次数据
setInterval(updateData, 1000);
updateData(); // 初始加载
// 初始化WebSocket连接
initWebSocket();
// 每10秒检查一次数据库连接状态
setInterval(() => {
checkDbConnection();
checkMoosDbConnection();
}, 10000);
checkDbConnection(); // 初始检查
checkMoosDbConnection(); // 初始检查
// 删除旧的定时检查,现在通过WebSocket实时更新