AskaEth/TurboSu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: UDP data forwarding to multiple downstream devices

Browse Source 
- DataForwarder class in listener: sends raw packets to all enabled targets
- REST API: GET/PUT /api/forward for managing targets
- Settings page: add/remove/edit forward targets with host/port/name/enabled
- Status endpoint includes forward_active count
- Config persisted in data/config.json via forward_targets array
This commit is contained in:
AskaEth
2026-07-25 18:07:48 +08:00
parent 8d7cf09bb5
commit 858a5b4b93
4 changed files with 139 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/pages/settings.js
+80 -131
View File
@@ -8,10 +8,20 @@ const PageSettings = {
async render() {
const cfg = await API.getConfig();
const games = await API.getGames();
this._el.innerHTML = this._template(cfg, games);
const forwards = await this._getForwards();
this._el.innerHTML = this._template(cfg, games, forwards);
this._bindEvents();
},
async _getForwards() {
try { const res = await fetch('/api/forward'); return await res.json(); }
catch (e) { return []; }
},
async _saveForwards(targets) {
await fetch('/api/forward', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ targets }) });
},
_bindEvents() {
document.getElementById('settings-telemetry-port')?.addEventListener('change', async (e) => {
await API.updateConfig({ telemetry_port: parseInt(e.target.value) || 20777 });
@@ -19,166 +29,105 @@ const PageSettings = {
});
document.getElementById('settings-restart-telemetry')?.addEventListener('click', async () => {
await API.stopTelemetry();
await API.startTelemetry();
await API.stopTelemetry(); await API.startTelemetry();
Toast.show('遥测监听已重启', 'success');
});
document.getElementById('btn-add-forward')?.addEventListener('click', () => this._addForward());
document.getElementById('forward-list')?.addEventListener('click', async (e) => {
if (e.target.closest('.btn-del-forward')) {
e.target.closest('.forward-row').remove();
this._collectAndSave();
}
});
document.getElementById('btn-save-forwards')?.addEventListener('click', () => this._collectAndSave());
document.getElementById('btn-import-plugin')?.addEventListener('click', () => {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.tsp';
const input = document.createElement('input'); input.type = 'file'; input.accept = '.tsp';
input.onchange = async (e) => {
const file = e.target.files[0];
if (!file) return;
const formData = new FormData();
formData.append('file', file);
try {
const res = await fetch('/api/games/install', { method: 'POST', body: formData });
const data = await res.json();
if (data.ok) { Toast.show('游戏插件安装成功', 'success'); this.render(); }
else Toast.show('安装失败', 'error');
} catch (err) { Toast.show('安装失败', 'error'); }
};
input.click();
const file = e.target.files[0]; if (!file) return;
const fd = new FormData(); fd.append('file', file);
const res = await fetch('/api/games/install', { method: 'POST', body: fd });
const data = await res.json();
if (data.ok) { Toast.show('插件安装成功', 'success'); this.render(); }
else Toast.show('安装失败', 'error');
}; input.click();
});
document.getElementById('btn-reload-plugins')?.addEventListener('click', async () => {
await API.reloadGamePlugins();
Toast.show('插件已重新加载', 'success');
this.render();
await API.reloadGamePlugins(); Toast.show('插件已重新加载', 'success'); this.render();
});
document.getElementById('settings-game-list')?.addEventListener('click', async (e) => {
const exportBtn = e.target.closest('.btn-export-plugin');
const removeBtn = e.target.closest('.btn-remove-plugin');
if (exportBtn) {
const pluginId = exportBtn.dataset.pluginId;
const a = document.createElement('a');
a.href = `/api/games/${pluginId}/export`;
a.download = `${pluginId}.tsp`;
a.click();
Toast.show('正在下载 .tsp 文件...', 'info');
const pid = exportBtn.dataset.pluginId;
const a = document.createElement('a'); a.href = '/api/games/' + pid + '/export'; a.download = pid + '.tsp'; a.click();
}
if (removeBtn) {
const pluginId = removeBtn.dataset.pluginId;
if (confirm('确定移除这个游戏插件？')) {
await API.removeGamePlugin(pluginId);
Toast.show('插件已移除', 'info');
this.render();
}
if (confirm('移除？')) { await API.removeGamePlugin(removeBtn.dataset.pluginId); Toast.show('已移除', 'info'); this.render(); }
}
});
document.getElementById('btn-import-dashboard')?.addEventListener('click', () => {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.tsd';
const input = document.createElement('input'); input.type = 'file'; input.accept = '.tsd';
input.onchange = async (e) => {
const file = e.target.files[0];
if (!file) return;
const formData = new FormData();
formData.append('file', file);
try {
const res = await fetch('/api/dashboards/import', { method: 'POST', body: formData });
const data = await res.json();
if (data.ok) Toast.show('仪表盘导入成功', 'success');
else Toast.show('导入失败', 'error');
} catch (err) { Toast.show('导入失败', 'error'); }
};
input.click();
const file = e.target.files[0]; if (!file) return;
const fd = new FormData(); fd.append('file', file);
const res = await fetch('/api/dashboards/import', { method: 'POST', body: fd });
const data = await res.json();
Toast.show(data.ok ? '导入成功' : '导入失败', data.ok ? 'success' : 'error');
}; input.click();
});
},
_gamePluginListHtml(games) {
if (!games || games.length === 0) {
return '<p style="color:var(--text-tertiary);font-size:13px;">暂无游戏插件</p>';
}
return games.map(g => `
<div class="glass-card" style="padding:16px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;">
<div>
<div style="font-weight:600;">${g.name}</div>
<div style="font-size:12px;color:var(--text-tertiary);">
${g.description || ''} | v${g.version} | ${g.author || ''}
<span class="badge ${g.is_builtin ? 'badge-info' : 'badge-success'}" style="margin-left:6px;">
${g.is_builtin ? '内置' : '社区'}
</span>
</div>
</div>
<div style="display:flex;gap:6px;">
<button class="btn btn-sm btn-secondary btn-export-plugin" data-plugin-id="${g.id}">导出 .tsp</button>
${!g.is_builtin ? `<button class="btn btn-sm btn-danger btn-remove-plugin" data-plugin-id="${g.id}">移除</button>` : ''}
</div>
</div>
`).join('');
_addForward() {
const list = document.getElementById('forward-list');
const row = document.createElement('div');
row.className = 'forward-row glass-card';
row.style.cssText = 'padding:12px;margin-bottom:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap';
row.innerHTML = '<input class="fw-host" placeholder="IP/域名" style="flex:2;min-width:120px"><input class="fw-port" type="number" placeholder="端口" style="flex:1;min-width:70px" min="1" max="65535"><input class="fw-name" placeholder="名称" style="flex:1;min-width:80px"><label style="display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-secondary);white-space:nowrap"><input type="checkbox" class="forward-toggle" checked> 启用</label><button class="btn btn-sm btn-danger btn-del-forward">×</button>';
list.appendChild(row);
},
_template(cfg, games) {
return `
<div class="animated">
<h2 style="font-size:24px;font-weight:700;margin-bottom:24px;">设置</h2>
_collectAndSave() {
const rows = document.querySelectorAll('#forward-list .forward-row');
const targets = [];
rows.forEach(r => {
const host = r.querySelector('.fw-host')?.value?.trim();
const port = parseInt(r.querySelector('.fw-port')?.value) || 0;
const name = r.querySelector('.fw-name')?.value?.trim() || '';
const enabled = r.querySelector('.forward-toggle')?.checked !== false;
if (host && port > 0) targets.push({ host, port, name, enabled });
});
this._saveForwards(targets).then(() => Toast.show('已保存 ' + targets.length + ' 个转发目标', 'success'));
},
<div class="settings-section">
<h3>连接设置</h3>
<div class="settings-row">
<div>
<div class="settings-label">遥测监听端口</div>
<div class="settings-desc">游戏内设置的数据输出端口 (默认 20777)</div>
</div>
<div class="settings-control">
<input type="number" id="settings-telemetry-port" value="${cfg.telemetry_port || 20777}" min="1024" max="65535">
</div>
</div>
<div class="settings-row">
<div>
<div class="settings-label">重启遥测监听</div>
<div class="settings-desc">修改端口或切换游戏后需要重启</div>
</div>
<div class="settings-control">
<button id="settings-restart-telemetry" class="btn btn-secondary btn-sm">重启监听</button>
</div>
</div>
</div>
_forwardListHtml(forwards) {
if (!forwards || forwards.length === 0) return '<p style="color:var(--text-tertiary);font-size:13px;padding:8px 0">暂无转发目标，点击下方添加</p>';
return forwards.map(f => '<div class="forward-row glass-card" style="padding:12px;margin-bottom:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap"><input class="fw-host" placeholder="IP/域名" style="flex:2;min-width:120px" value="' + (f.host||'') + '"><input class="fw-port" type="number" placeholder="端口" style="flex:1;min-width:70px" value="' + (f.port||'') + '" min="1" max="65535"><input class="fw-name" placeholder="名称" style="flex:1;min-width:80px" value="' + (f.name||'') + '"><label style="display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-secondary);white-space:nowrap"><input type="checkbox" class="forward-toggle" ' + (f.enabled!==false?'checked':'') + '> 启用</label><button class="btn btn-sm btn-danger btn-del-forward">×</button></div>').join('');
},
<div class="settings-section">
<h3>仪表盘管理</h3>
<div style="display:flex;gap:8px;margin-bottom:16px;">
<button id="btn-import-dashboard" class="btn btn-secondary btn-sm">导入 .tsd</button>
<span style="font-size:12px;color:var(--text-tertiary);display:flex;align-items:center;">
右键点击仪表盘卡片即可导出
</span>
</div>
</div>
_gamePluginListHtml(games) {
if (!games || games.length === 0) return '<p style="color:var(--text-tertiary);font-size:13px;">暂无游戏插件</p>';
return games.map(g => '<div class="glass-card" style="padding:16px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between"><div><div style="font-weight:600">' + g.name + '</div><div style="font-size:12px;color:var(--text-tertiary)">' + (g.description||'') + ' | v' + g.version + ' | ' + (g.author||'') + '<span class="badge ' + (g.is_builtin?'badge-info':'badge-success') + '" style="margin-left:6px">' + (g.is_builtin?'内置':'社区') + '</span></div></div><div style="display:flex;gap:6px"><button class="btn btn-sm btn-secondary btn-export-plugin" data-plugin-id="' + g.id + '">导出 .tsp</button>' + (g.is_builtin?'':'<button class="btn btn-sm btn-danger btn-remove-plugin" data-plugin-id="' + g.id + '">移除</button>') + '</div></div>').join('');
},
<div class="settings-section">
<h3>游戏插件管理</h3>
<div style="display:flex;gap:8px;margin-bottom:16px;">
<button id="btn-import-plugin" class="btn btn-secondary btn-sm">导入 .tsp</button>
<button id="btn-reload-plugins" class="btn btn-secondary btn-sm">重新加载</button>
</div>
<div id="settings-game-list">
${this._gamePluginListHtml(games)}
</div>
<div class="glass-card" style="padding:16px;margin-top:12px;font-size:12px;color:var(--text-tertiary);line-height:1.6;">
<strong style="color:var(--text-secondary);">社区插件开发指南：</strong><br>
1. 创建包含 <code>manifest.json</code> + <code>parser.py</code> 的文件夹<br>
2. <code>manifest.json</code> 定义元信息，<code>parser.py</code> 需有 <code>get_parser()</code> 函数<br>
3. 返回对象实现 <code>game_id()</code> 和 <code>parse(data, addr)</code> 方法<br>
4. 打包时只需要 zip 这两个文件，重命名后缀为 <code>.tsp</code> 即可导入<br>
5. 完整的 <code>TelemetryData</code> 字段参考见 <code>server/telemetry/data.py</code>
</div>
</div>
_template(cfg, games, forwards) {
return '<div class="animated"><h2 style="font-size:24px;font-weight:700;margin-bottom:24px">设置</h2>' +
<div class="settings-section">
<h3>关于</h3>
<div class="settings-row">
<div>
<div class="settings-label">TurboSu</div>
<div class="settings-desc">赛车遥测仪表盘 v1.0.0 · Yei.J. (AskaEth)</div>
</div>
</div>
</div>
</div>`;
'<div class="settings-section"><h3>数据转发</h3><p style="font-size:12px;color:var(--text-tertiary);margin-bottom:12px">将收到的游戏原始 UDP 数据包完整转发到下游物理外设</p><div id="forward-list">' + this._forwardListHtml(forwards) + '</div><div style="display:flex;gap:8px;margin-top:8px"><button id="btn-add-forward" class="btn btn-sm btn-secondary">+ 添加目标</button><button id="btn-save-forwards" class="btn btn-sm btn-primary">保存并生效</button></div></div>' +
'<div class="settings-section"><h3>连接设置</h3><div class="settings-row"><div><div class="settings-label">遥测监听端口</div><div class="settings-desc">游戏内 UDP 输出端口 (默认 20777)</div></div><div class="settings-control"><input type="number" id="settings-telemetry-port" value="' + (cfg.telemetry_port||20777) + '" min="1024" max="65535"></div></div><div class="settings-row"><div><div class="settings-label">重启遥测监听</div><div class="settings-desc">修改端口或切换游戏后</div></div><div class="settings-control"><button id="settings-restart-telemetry" class="btn btn-secondary btn-sm">重启监听</button></div></div></div>' +
'<div class="settings-section"><h3>仪表盘管理</h3><div style="display:flex;gap:8px;margin-bottom:16px"><button id="btn-import-dashboard" class="btn btn-secondary btn-sm">导入 .tsd</button><span style="font-size:12px;color:var(--text-tertiary);display:flex;align-items:center">右键卡片导出</span></div></div>' +
'<div class="settings-section"><h3>游戏插件管理</h3><div style="display:flex;gap:8px;margin-bottom:16px"><button id="btn-import-plugin" class="btn btn-secondary btn-sm">导入 .tsp</button><button id="btn-reload-plugins" class="btn btn-secondary btn-sm">重新加载</button></div><div id="settings-game-list">' + this._gamePluginListHtml(games) + '</div><div class="glass-card" style="padding:16px;margin-top:12px;font-size:12px;color:var(--text-tertiary);line-height:1.6"><strong style="color:var(--text-secondary)">社区插件开发指南：</strong><br>1. 创建包含 manifest.json + parser.py 的文件夹<br>2. manifest.json 定义元信息，parser.py 实现 get_parser() 函数<br>3. 返回对象实现 game_id() 和 parse(data, addr) 方法<br>4. 打包 zip 改后缀 .tsp 即可导入<br>5. TelemetryData 字段参考 server/telemetry/data.py</div></div>' +
'<div class="settings-section"><h3>关于</h3><div class="settings-row"><div><div class="settings-label">TurboSu</div><div class="settings-desc">赛车遥测仪表盘 v1.0.0 · Yei.J. (AskaEth)</div></div></div></div>' +
'</div>';
}
};