1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>aria2</title> </head> <body> <div style="margin-bottom: 32px;"> <input type="text" id="ipt"> 下载进度:<span id="progress"></span> 下载速度:<span id="speed"></span> </div> <button id="start">开始下载</button> <button id="pause">暂停下载</button> <button id="unpause">恢复下载</button> <script> const socket = new WebSocket('ws://localhost:6800/jsonrpc');
socket.addEventListener('open', function (event) { socket.send('Hello Server!'); console.log(event) });
let timer = {} let gid = '' socket.addEventListener('message', function (event) { const data = JSON.parse(event.data) console.log('Message from server ', event.data) if (data.id === 'tellStatus') { const progress = parseInt(Number(data.result.completedLength) / Number(data.result.totalLength) * 100) + '%' const speed = parseInt(Number(data.result.downloadSpeed) / 1000) + ' kb/s' document.querySelector('#progress').innerHTML = progress document.querySelector('#speed').innerHTML = speed } if (data.method === 'aria2.onDownloadStart') { gid = data.params[0].gid const jsonData = { 'jsonrpc':'2.0', 'id':'tellStatus', 'method':'aria2.tellStatus', 'params': [gid] } if (!timer[gid]) { timer[gid] = setInterval(() => { socket.send(JSON.stringify(jsonData)) console.log('发送 tellStatus') }, 1000) } } if (data.method === 'aria2.onDownloadComplete') { gid = data.params[0].gid clearInterval(timer[gid]) delete timer[gid] document.querySelector('#progress').innerHTML = '100%' document.querySelector('#speed').innerHTML = '0 kb/s' } }); const startBtn = document.querySelector('#start') startBtn.addEventListener('click', function () { const jsonData = { 'jsonrpc':'2.0', 'id':'qwer', 'method':'aria2.addUri', 'params': [[ document.querySelector('#ipt').value ]] } socket.send(JSON.stringify(jsonData)) }) const pauseBtn = document.querySelector('#pause') const unpauseBtn = document.querySelector('#unpause') pauseBtn.addEventListener('click', function () { const jsonData = { 'jsonrpc':'2.0', 'id':'qwer', 'method':'aria2.pause', 'params': [gid] } socket.send(JSON.stringify(jsonData)) }) unpauseBtn.addEventListener('click', function () { const jsonData = { 'jsonrpc':'2.0', 'id':'qwer', 'method':'aria2.unpause', 'params': [gid] } socket.send(JSON.stringify(jsonData)) }) </script> </body> </html>
|