Building a Custom Frontend: Extending Aria2::GUI for Advanced Users
Overview
Short plan and goals: create a modern custom frontend that controls aria2 via its RPC (JSON-RPC over HTTP/WebSocket), adds task filtering/templating, session persistence, auth, and optional WebSocket push for real‑time updates.
Architecture (recommended)
- Backend: lightweight proxy/server (Node.js/Express or Python/Flask) that:
- Forwards authenticated requests to aria2 JSON-RPC.
- Stores user presets, cookies, secrets (optional).
- Normalizes multiple aria2 instances.
- Frontend: SPA (React/Vue/Svelte) using componentized UI for task lists, queues, and settings.
- Transport: JSON-RPC over HTTP for commands; WebSocket (aria2 websocket or server push) for real‑time status.
- Storage: localStorage or IndexedDB for client prefs; backend DB (SQLite/Postgres) for shared state.
Key integration points with aria2
- Enable RPC in aria2: –enable-rpc –rpc-listen-all –rpc-allow-origin-all (or set CORS in proxy).
- JSON-RPC methods to use often:
- aria2.addUri, aria2.addTorrent, aria2.tellActive, aria2.tellWaiting, aria2.tellStopped
- aria2.pause, aria2.unpause, aria2.remove, aria2.getFiles, aria2.getOption, aria2.changeOption
- Use WebSocket endpoint (if aria2 built with WebSocket support) or poll via tellActive/tellWaiting with reasonable interval.
- Session persistence via aria2.saveSession and session file management.
Advanced features to implement
- Multi-server management — add/select multiple aria2 RPC endpoints, show aggregated view.
- Rules & templates — domain/content-based options (max-connection-per-server, split, referer, out).
- Selective file/torrent selection UI (use aria2.getFiles and file index flags).
- Smart retries and error handling — parse error codes, exponential backoff, auto-resume.
- Authentication & security — API key management, HTTPS/TLS for remote aria2, optional proxy to hide RPC from browser.
- Real-time progress — use WebSocket events or delta polling with ETag-like diffs to minimize load.
- Web UI features — filtering, bulk operations, drag-and-drop reordering, speed charts (small timeseries chart lib).
- Desktop/extension integration — native notifications, capture browser downloads (via extension sending JSON-RPC).
- Persistence & backup — export/import session.txt, JSON presets, and configuration sync.
Implementation checklist (practical steps)
- Start aria2 with RPC enabled:
- aria2c –enable-rpc –rpc-listen-all –rpc-secret=“YOUR_SECRET”
- Scaffold backend proxy (example: Node/Express) that forwards POST JSON-RPC to http://localhost:6800/jsonrpc and injects Authorization or secret.
- Scaffold SPA (React + Vite suggested). Implement auth, server selection UI, and RPC client wrapper:
- Request format: { jsonrpc: “2.0”, id: X, method: “aria2.methodName”, params: [ “token:SECRET”, … ] }
- Implement periodic sync: call tellActive/tellWaiting/tellStopped every 2–5s (adjust) or subscribe via WebSocket.
- Add command flows: addUri → show queued task → allow changing options (aria2.changeOption).
- Implement templates/rules engine: store as JSON; on addUri apply matching options before aria2.addUri.
- Add session management: call aria2.saveSession periodically and expose download folder + resume options.
- Harden: use HTTPS, validate user input, limit CORS, rate-limit proxy, and handle large file lists incrementally.
Useful libraries & projects to reuse
- webui-aria2 (ziahamza/webui-aria2) — reference implementation and UI patterns.
- aria2.js / python3-aria2jsonrpc — RPC client helpers.
- charting: Chart.js or lightweight sparkline lib for speed graphs.
- WebSocket polyfills if needed for browsers.
Performance & scaling notes
- For many concurrent tasks, prefer server-side aggregation and WebSocket pushes to avoid browser polling overhead.
- Batch RPC calls where possible; avoid fetching full file lists for every task frequently.
- Limit UI refresh rate (e.g., 1x/sec) and debounce user actions.
Minimal example: JSON‑RPC addUri (JS)
Code
const body = { jsonrpc: “2.0”, id: 1, method: “aria2.addUri”, params: [“token:YOUR_SECRET”, [”https://example.com/file.zip”], { out: “file.zip”, split: “4” }] }; fetch(”https://your-proxy.example/api/jsonrpc”, { method: “POST”, body: JSON.stringify(body) });
Quick pitfalls to avoid
- Exposing aria2 RPC directly to browsers without auth or TLS.
- Too-frequent polling causing high CPU/network load.
- Not handling partial torrent/file selection correctly (use file indexes).
Leave a Reply