/** * @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);