/**
* @class NetworkMonitor
* @description 网络监控组件,用于监控系统网络状态和UDP数据抓包
*/
class NetworkMonitor extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.state = {
ip: '127.0.0.1',
port: 54321,
isMonitoring: false,
data: [],
timer: null,
statusMsg: '',
};
}
connectedCallback() {
this.render();
this.initialize();
}
disconnectedCallback() {
if (this.state.timer) {
clearInterval(this.state.timer);
}
}
render() {
this.shadowRoot.innerHTML = `
${this.state.statusMsg}
抓包状态:${this.state.isMonitoring ? '运行中' : '已停止'}
`;
this.shadowRoot.getElementById('startBtn').onclick = () => this.startMonitor();
this.shadowRoot.getElementById('stopBtn').onclick = () => this.stopMonitor();
this.shadowRoot.getElementById('ip').onchange = (e) => {
this.state.ip = e.target.value;
};
this.shadowRoot.getElementById('port').onchange = (e) => {
this.state.port = parseInt(e.target.value, 10);
};
this.renderDataList();
}
renderDataList() {
const dataList = this.shadowRoot.getElementById('dataList');
if (!dataList) return;
if (!this.state.data.length) {
dataList.innerHTML = '暂无数据
';
return;
}
dataList.innerHTML = this.state.data.map(item => `
时间: ${new Date(item.timestamp).toLocaleString()}
来源: ${item.source}
内容: ${typeof item.data === 'object' ? JSON.stringify(item.data, null, 2) : item.data}
`).join('');
}
setStatus(msg) {
this.state.statusMsg = msg;
this.render();
}
async startMonitor() {
this.setStatus('正在启动UDP抓包...');
try {
const res = await fetch('/api/udp-monitor/start', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ ip: this.state.ip, port: this.state.port })
});
const data = await res.json();
if (data.success) {
this.state.isMonitoring = true;
this.setStatus(data.message || 'UDP抓包已启动');
this.startPolling();
} else {
this.state.isMonitoring = false;
this.setStatus(data.error || '启动失败');
}
} catch (e) {
this.state.isMonitoring = false;
this.setStatus('启动UDP抓包失败: ' + e.message);
}
this.render();
}
async stopMonitor() {
this.setStatus('正在停止UDP抓包...');
try {
const res = await fetch('/api/udp-monitor/stop', { method: 'POST' });
const data = await res.json();
this.state.isMonitoring = false;
this.setStatus(data.message || 'UDP抓包已停止');
if (this.state.timer) {
clearInterval(this.state.timer);
this.state.timer = null;
}
} catch (e) {
this.setStatus('停止UDP抓包失败: ' + e.message);
}
this.render();
}
startPolling() {
if (this.state.timer) clearInterval(this.state.timer);
this.state.timer = setInterval(() => this.fetchData(), 1000);
}
async fetchData() {
if (!this.state.isMonitoring) return;
try {
const res = await fetch('/api/udp-monitor/data');
const data = await res.json();
if (data.success) {
if (Array.isArray(data.data) && data.data.length > 0) {
this.state.data = this.state.data.concat(data.data);
// 最多只保留1000条
if (this.state.data.length > 1000) {
this.state.data = this.state.data.slice(-1000);
}
this.renderDataList();
}
this.state.isMonitoring = data.isMonitoring;
this.shadowRoot.getElementById('monitorStatus').textContent = data.isMonitoring ? '运行中' : '已停止';
}
} catch (e) {
this.setStatus('获取UDP数据失败: ' + e.message);
}
}
initialize() {
this.setStatus('请设置IP和端口后点击开始抓包');
// 检查当前监控状态
fetch('/api/udp-monitor/status').then(res => res.json()).then(data => {
if (data.success && data.isMonitoring) {
this.state.isMonitoring = true;
this.state.ip = data.ip || this.state.ip;
this.state.port = data.port || this.state.port;
this.setStatus('UDP抓包已在运行');
this.startPolling();
this.render();
}
});
}
reactivate() {
this.initialize();
}
}
customElements.define('network-monitor', NetworkMonitor);