270 lines
9.5 KiB
HTML
270 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Meshtastic 消息 - meshgo</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f0f2f5; color: #333; }
|
|
header { background: #1677ff; color: #fff; padding: 16px 24px; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
|
|
.back-btn { color: #fff; text-decoration: none; font-size: 14px; opacity: 0.8; }
|
|
.back-btn:hover { opacity: 1; }
|
|
.container { max-width: 1400px; margin: 24px auto; padding: 0 16px; }
|
|
|
|
.toolbar { background: #fff; border-radius: 8px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.08); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
|
|
.toolbar label { font-size: 14px; color: #666; }
|
|
.toolbar .count { margin-left: auto; font-size: 14px; color: #666; }
|
|
.refresh-info { font-size: 12px; color: #aaa; text-align: right; margin-top: 8px; padding: 0 20px 16px; }
|
|
|
|
.msg-list { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.08); overflow: hidden; }
|
|
.msg-item { padding: 14px 20px; border-bottom: 1px solid #f0f0f0; }
|
|
.msg-item:last-child { border-bottom: none; }
|
|
.msg-item:hover { background: #fafafa; }
|
|
.msg-item.encrypted { background: #fffbe6; }
|
|
.msg-item.encrypted:hover { background: #fff7cc; }
|
|
.msg-item.decrypted { background: #f6ffed; }
|
|
.msg-item.decrypted:hover { background: #d9f7be; }
|
|
.msg-item.json { background: #e6f4ff; }
|
|
.msg-item.json:hover { background: #bae0ff; }
|
|
|
|
.msg-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
|
|
.msg-time { font-size: 12px; color: #888; font-family: monospace; }
|
|
.msg-topic { font-size: 13px; color: #1677ff; font-family: monospace; }
|
|
.badge { font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: 500; }
|
|
.badge-json { background: #1677ff; color: #fff; }
|
|
.badge-dec { background: #52c41a; color: #fff; }
|
|
.badge-enc { background: #fa8c16; color: #fff; }
|
|
.badge-err { background: #ff4d4f; color: #fff; }
|
|
|
|
.msg-meta { display: flex; gap: 16px; font-size: 12px; color: #666; margin-bottom: 8px; }
|
|
.msg-meta span { display: flex; align-items: center; gap: 4px; }
|
|
.msg-meta .label { color: #999; }
|
|
|
|
.msg-payload { font-family: monospace; font-size: 13px; color: #333; background: #f5f5f5; padding: 10px 12px; border-radius: 6px; white-space: pre-wrap; word-break: break-all; max-height: 300px; overflow-y: auto; }
|
|
.msg-payload.decrypted { background: #f6ffed; border: 1px solid #b7eb8f; }
|
|
.msg-payload.hex { background: #f0f5ff; border: 1px solid #adc6ff; color: #333; }
|
|
|
|
.port-badge { font-size: 11px; padding: 2px 6px; border-radius: 4px; background: #13c2c2; color: #fff; }
|
|
|
|
.empty { text-align: center; padding: 48px; color: #aaa; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<a href="/admin/mqtt" class="back-btn">← 返回</a>
|
|
Meshtastic 消息监控
|
|
</header>
|
|
|
|
<div class="container">
|
|
<div class="toolbar">
|
|
<span class="count" id="count">共 0 条消息</span>
|
|
<span class="refresh-info">每 3 秒自动刷新 | 使用默认 PSK 解密</span>
|
|
</div>
|
|
|
|
<div class="msg-list" id="msgList">
|
|
<div class="empty">暂无消息，等待数据...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// PortNum 名称映射
|
|
const portNames = {
|
|
0: 'Reserved', 1: 'TEXT', 2: 'REMOTE_HW', 3: 'POSITION',
|
|
4: 'NODEINFO', 5: 'ROUTING', 6: 'ADMIN', 7: 'TEXT2',
|
|
8: 'WAYPOINT', 9: 'WIFI', 10: 'MXT_AI', 11: 'RANGE_TEST',
|
|
12: 'DETECTION', 13: 'REPLY', 14: 'IP_TUNNEL', 15: 'SERIAL',
|
|
16: 'STORE_FWD', 17: 'TELEMETRY', 18: 'ZPS', 19: 'SIMULATOR',
|
|
20: 'TRACEROUTE', 21: 'NEIGHBOR', 22: 'AUDIO', 23: 'DUPLICATE',
|
|
24: 'ACK', 25: 'CONFIG', 26: 'IPLY_CONFIG', 27: 'MAP_REPORT',
|
|
28: 'PaxCounter', 32: 'PRIVATE', 256: 'ATAK', 257: 'HALP',
|
|
258: 'RPC', 259: 'XMPP', 260: 'STREAM', 261: 'TUNNEL'
|
|
};
|
|
|
|
function getPortName(num) {
|
|
return portNames[num] || `Port#${num}`;
|
|
}
|
|
|
|
function esc(s) {
|
|
if (!s) return '';
|
|
return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
|
}
|
|
|
|
function formatTime(ts) {
|
|
const d = new Date(ts);
|
|
return d.toLocaleString('zh-CN', {
|
|
year: 'numeric', month: '2-digit', day: '2-digit',
|
|
hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
|
|
});
|
|
}
|
|
|
|
function hexToText(hex) {
|
|
try {
|
|
// 尝试将十六进制字符串转换为文本
|
|
const bytes = new Uint8Array(hex.match(/.{2}/g).map(b => parseInt(b, 16)));
|
|
// 检查是否包含 UTF-8 可打印字符
|
|
let printable = '';
|
|
let allPrintable = true;
|
|
for (let i = 0; i < bytes.length; i++) {
|
|
const c = bytes[i];
|
|
if (c >= 32 && c < 127) {
|
|
printable += String.fromCharCode(c);
|
|
} else if (c >= 0xC0 || (c >= 0x80 && printable.length > 0)) {
|
|
// UTF-8 多字节字符
|
|
printable += String.fromCharCode(c);
|
|
} else if (c === 0) {
|
|
printable += ' ';
|
|
} else {
|
|
allPrintable = false;
|
|
break;
|
|
}
|
|
}
|
|
if (allPrintable) return printable.trim();
|
|
return null;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function toBytes(data) {
|
|
if (data instanceof Uint8Array) return data;
|
|
if (typeof data === 'string') {
|
|
// 可能是 base64 字符串
|
|
const raw = atob(data);
|
|
return new Uint8Array([...raw].map(c => c.charCodeAt(0)));
|
|
}
|
|
return new Uint8Array(data);
|
|
}
|
|
|
|
function formatPayload(data) {
|
|
if (!data || data.length === 0) return '<空>';
|
|
|
|
const bytes = toBytes(data);
|
|
|
|
// 尝试作为文本显示
|
|
try {
|
|
const text = new TextDecoder().decode(bytes);
|
|
if (/^[\x20-\x7E\s]+$/.test(text)) {
|
|
return text;
|
|
}
|
|
} catch {}
|
|
|
|
// 作为十六进制显示
|
|
const hex = Array.from(bytes).map(b => b.toString(16).padStart(2, '0').toUpperCase()).join(' ');
|
|
return `HEX: ${hex}`;
|
|
}
|
|
|
|
function render() {
|
|
const list = document.getElementById('msgList');
|
|
document.getElementById('count').textContent = `共 ${allMessages.length} 条消息`;
|
|
|
|
if (allMessages.length === 0) {
|
|
list.innerHTML = '<div class="empty">暂无消息，等待数据...</div>';
|
|
return;
|
|
}
|
|
|
|
list.innerHTML = allMessages.map(msg => {
|
|
const isJson = msg.topic.includes('/json/');
|
|
let itemClass = 'msg-item';
|
|
let badge, badgeClass;
|
|
|
|
// 检查是否有解密结果
|
|
if (isJson) {
|
|
itemClass += ' json';
|
|
badge = 'JSON';
|
|
badgeClass = 'badge-json';
|
|
} else if (msg.decrypted && msg.decrypted.payload && msg.decrypted.payload.length > 0) {
|
|
itemClass += ' decrypted';
|
|
badge = '已解密';
|
|
badgeClass = 'badge-dec';
|
|
} else if (msg.decrypted) {
|
|
itemClass += ' encrypted';
|
|
badge = msg.decrypted.channel_id ? '加密' : '失败';
|
|
badgeClass = 'badge-err';
|
|
} else {
|
|
itemClass += ' encrypted';
|
|
badge = '原始';
|
|
badgeClass = 'badge-enc';
|
|
}
|
|
|
|
// 构建元数据行
|
|
let metaHtml = '';
|
|
if (msg.decrypted) {
|
|
const d = msg.decrypted;
|
|
metaHtml = `
|
|
<div class="msg-meta">
|
|
${d.channel_id ? `<span><span class="label">频道:</span> ${esc(d.channel_id)}</span>` : ''}
|
|
${d.gateway_id ? `<span><span class="label">网关:</span> ${esc(d.gateway_id)}</span>` : ''}
|
|
${d.packet_id ? `<span><span class="label">ID:</span> ${d.packet_id}</span>` : ''}
|
|
${d.from ? `<span><span class="label">From:</span> 0x${d.from.toString(16)}</span>` : ''}
|
|
${d.port_num ? `<span class="port-badge">${getPortName(d.port_num)}</span>` : ''}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// 构建 payload
|
|
let payloadHtml = '';
|
|
if (isJson) {
|
|
// JSON 消息直接显示
|
|
try {
|
|
const raw = atob(msg.payload);
|
|
payloadHtml = `<div class="msg-payload">${esc(raw)}</div>`;
|
|
} catch {
|
|
payloadHtml = `<div class="msg-payload">${esc(msg.payload)}</div>`;
|
|
}
|
|
} else if (msg.decrypted && msg.decrypted.payload && msg.decrypted.payload.length > 0) {
|
|
// 解密成功，显示解密后的数据
|
|
const payloadText = formatPayload(msg.decrypted.payload);
|
|
payloadHtml = `<div class="msg-payload decrypted">${esc(payloadText)}</div>`;
|
|
} else if (msg.decrypted && msg.decrypted.gateway_id) {
|
|
// 解密失败，显示错误信息和原始 base64
|
|
const errMsg = esc(msg.decrypted.gateway_id);
|
|
payloadHtml = `<div class="msg-payload hex">
|
|
<span style="color:#ff4d4f;font-size:11px;">解密失败: ${errMsg}</span>
|
|
<br>原始: ${esc(msg.payload)}
|
|
</div>`;
|
|
} else {
|
|
// 没有解密，显示原始
|
|
try {
|
|
const raw = atob(msg.payload);
|
|
const hex = Array.from(raw).map(b => b.toString(16).padStart(2, '0').toUpperCase()).join(' ');
|
|
payloadHtml = `<div class="msg-payload hex">${esc(hex)}</div>`;
|
|
} catch {
|
|
payloadHtml = `<div class="msg-payload">${esc(msg.payload)}</div>`;
|
|
}
|
|
}
|
|
|
|
return `<div class="${itemClass}">
|
|
<div class="msg-header">
|
|
<span class="msg-time">${formatTime(msg.time)}</span>
|
|
<span class="msg-topic">${esc(msg.topic)}</span>
|
|
<span class="badge ${badgeClass}">${badge}</span>
|
|
</div>
|
|
${metaHtml}
|
|
${payloadHtml}
|
|
</div>`;
|
|
}).join('');
|
|
}
|
|
|
|
let allMessages = [];
|
|
|
|
function fetchMessages() {
|
|
fetch('/admin/meshtastic/api/messages')
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
if (res.code === 0) {
|
|
allMessages = res.data;
|
|
render();
|
|
}
|
|
})
|
|
.catch(err => console.error('fetch error:', err));
|
|
}
|
|
|
|
fetchMessages();
|
|
setInterval(fetchMessages, 3000);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|